Linking to a specific SLIDING panel remotely

I'm trying to link to a specific SLIDING panel (not a tabbed
panel) from a remote link. I'm sure this can be done using
SpryURLUtils.js as I've successfully achieved the result with
tabbed panels. There's not as much online information on doing this
with sliding panels, though, and I've had no luck experimenting on
my own.
Can anyone help?
Here are two example pages of the pages in question:
http://www.studiohyperset.com/sandbox/aafd/impressionist.php
http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm
The user launches the second page from the first and should
be able to get back to the second sliding panel on the first page
by clicking "RETURN." Right now, when the user clicks "RETURN,"
s/he returns to the first slide in the sequence.
Thanks in advance for any help.

http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
Comment 29: David Powers

Similar Messages

  • Linking to a Specific Spry panel (modified for RSS Reader)

    Hi – I would like to implement the following tutorial however have it work for the Spry Framework RSS Reader: http://foundationphp.com/tutorials/spry_url_utils.php
    I understand the concept of this article and have been able to implement the solution up to step 4 however for my solution I am not working with tabbed panels or an accordion widget but the RSS Reader from the latest Spry Framework. I would like to have a specific feed and article selected on the page depending on what link the user has come from.
    So instead of working with the tabbed panel and accordion variables I would be using the variables:
    var dsCategories
    var dsFeeds
    var dsChannel
    var dsArticles
    I would like to know if anyone can assist me in modifying the solution to suit this scenario? or if it is even possible?
    Thanks.
    Michael.

    Hi Ben,
    Thanks for pointing me to this tutorial.
    To keep things easier for myself I have kept the variable name as row. I have added the following code to the head of my called page:
    On lines 9-10:
    <script type="text/javascript" src="js/SpryURLUtils.js"></script>
    <script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject();</script>
    On lines 19-26:
    //define the data set
                var ds1 = new Spry.Data.XMLDataSet("data/LocalFeeds.xml", "feeds/feed");
                //get the url parameter for the row number
                var params = Spry.Utils.getLocationParamsAsObject();
                //set an observer so that when the data is loaded, we update the current row to the url param value
                ds1.addobserver({ onPostLoad: function(ds, type) {
                                                                                                                                ds1.setCurrentRow(params.row); }
    Currently my called page is still not loading in the wanted state with calling page passing the parameter row=2.
    I aren’t sure what I am still missing but think it is perhaps something to do with setting the spry:region and spry:repeat to equal ds1? But not sure where I should be placing this.
    Am I nearly there?
    http://www.michael-williams.com.au/
    Thanks.

  • Make default sliding panel load first

    Hi,
    I am using SpryURLUtils to link directly to certain sliding panels on a page, so for example:
    mysite.com/thepage.html?panel=3
    sets the 3rd panel (working from 0 of course) on that page to be displayed by default.
    The only problem here is that panels 0,1 and 2 still get loaded before 3 by the browser because they come first in the page structure, and as a result panel 0 is being displayed until panel 3 has been loaded, after which it 'jumps' to panel 3, which doesn't look too smooth and I think could confuse the user. Each panel on my page has a background image specified in CSS rules in the header of the page.
    What I want is for panel 3 (in this example) to be displayed straight away. I assume the problem may lie partly with the fact the widget constructor code (shown above) where the default panel is specified is located beneath all the page content, but I can't think of a way around this.
    Does anybody have any ideas?
    Thanks

    I solved this way:
    <body onLoad="myPanelsSlides('slide2');"/>
    Thanks

  • Having trouble with flash and linking to Sliding panels - PLEASE help

    Having trouble with Sliding panels and flash. Otherwise everything works fine but when I'm trying to implement the link
    <a href="#" onclick="sp1.showPanel('panel1'); return false;">Panel1</a>
    to a flash button I get confused. I have tried following
    on (press) {
    getURL("javascript:sp1.showPanel('panel1');");
    and it did not work. What would you suggest? I am desperate. Please help me! Any suggestions are highly appreciated!!!!

    Thanks for your answer!
    I have tried both sp1.ShowPanel('panel1'); and window.sp1.ShowPanel('panel1'); they both give blank window with [object]
    I have found a solution that works in other browsers, but not in IE. Well basicly it works, but after a few clicks IE freezes.
    on (press) {
    getURL("javascript:sp1.showPanel('panel1'); void(0);");
    Would you happen to have a solution other than that? I believe that the void(0); causes the IE to freeze.

  • Sliding panels active link

    Hi
    So yeah. When using the sliding panels widget, I want to be
    able to hightlight in the menu eg Prev 1 2 3 Next, which sliding
    panel is currenly being viewed. This must work when either pressing
    the page number or my clicking through using the Prev and Next
    buttons.
    Any ideas would be greatly appreciated.
    Cheers
    Jen

    Did you check out the source code for that those panels?
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/sp_withTabs.js
    Als you see, they use a separate function to set active classes to the tabs. You can use the same functionality for your active link class.

  • Sliding Panels - Highlighting selected panel link

    I would like the current/selected sliding panel link to be
    highlighted -- any ideas how to achieve this?

    Take a look at this topic: http://forums.adobe.com/message/2174795#2174795

  • Sliding panels - change link appearance depending on the current panel

    Hi,
    I'm trying to change the appearance of the link, depending on the display panel. Panels change automatically after a certain period of time. I do not know: for example, how to recognize the current panel, and using an if statement to change the appearance of the link. I have such code:
    var sp1 = new Spry.Widget.SlidingPanels('panele');
    sp1.forward = true;
    window.onload = function() {
        id = setInterval(function() {
            if (sp1.forward === true) {
                if (sp1.getCurrentPanel() === sp1.showNextPanel()) {
                    sp1.showPreviousPanel();
                    sp1.forward = false;
            } else {
                if (!sp1.showPreviousPanel()) {
                    sp1.showNextPanel();
                    sp1.forward = true;
        }, 3000);
        //Spry.$$("a2").setStyle("background-color: #000;")
    I tried this::
    var data = sp1.getCurrentPanel();
    if(data.id == "panel_id")
    Spry.$$("link_id").setStyle("background-color: #000;")
    but it does not work...

    Take a look at this topic: http://forums.adobe.com/message/2174795#2174795

  • Background image instead of color for each sliding panel

    I'm working with sliding panels and trying to add some style to the page.  I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but  I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser.  Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
    any help would be great!

    Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
    The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
    Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
    I see that you have
    <p>
      </p><div class="slidingpanelandtab">
        <blockquote>
          <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
        </blockquote>
    Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
    I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
    Beth

  • Using anchors for Sliding panel

    I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
    www.mysite.com/Portfolio.html#Panel1
    www.mysite.com/Portfolio.html#Panel2
    Is it possible to do so?  kindly guide me    

    You can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    Gramps

  • How do i style an inactive navigation for sliding panel?

    How  can i style my navigation when they are not active(for example i would  like to style my "previous" navigation arrow in a specific manner when  there is no previous content to show)

    With great difficulty. We must first determine the current panel and then, if the current panel is 0 then the previous button has to be changed and if the current panel matches the total number of panels, the next button has to be changed.
    The following is a complete document that will work. Make sure you have all of the support (read JS) files in the allocated directory.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sliding Panels Example.</title>
    <script src="SpryAssets/SprySlidingPanels.js" language="javascript" type="text/javascript"></script>
    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <style>
    .SlidingPanelsContentGroup {min-height:0;}
    .disabled {color:#F00;}
    </style>
    <script>
    function slideNextPanel() {
         sp1.showNextPanel();
         var currentPanel = getCurrentPanel();
         var panelCount = sp1.getContentPanelsCount()-1;
         if (currentPanel==panelCount) {
              Spry.$$("a#nextPanel").addClassName("disabled");
         } else {
              Spry.$$("a#previousPanel").removeClassName("disabled");
    function slidePreviousPanel() {
         sp1.showPreviousPanel();
         var currentPanel = getCurrentPanel();
         if (currentPanel==0) {
              Spry.$$("a#previousPanel").addClassName("disabled");
         } else {
              Spry.$$("a#nextPanel").removeClassName("disabled");
    function getCurrentPanel() {
         var className = 'SlidingPanelsContent'; //change the className that is on all your content panels..
         var panelCount = sp1.getContentPanelsCount();//get panel length
         var current = sp1.getCurrentPanel(); //get current panel
         var group = sp1.getContentGroup(); //get our group
         var panelNumber = 0;
         if(group.hasChildNodes()){
              var j = 0;
              for(var i = 0, l = group.childNodes.length; i < l; i ++){
                   if(group.childNodes[i].className && group.childNodes[i].className.search(new RegExp("\\b" + className + "\\b")) != -1){ // if it has SlidingPanelsContent class we found the correct node.
                        if(group.childNodes[i] == current){ // if it matches our current panel, we have a number
                             panelNumber = j;
                             return panelNumber;
                        j++; //increase our panelcounter
    </script>
    </head>
    <body>
    <a href="#" id="previousPanel" onclick="slidePreviousPanel();">Previous Panel</a> |
    <a href="#" id="nextPanel" onclick="slideNextPanel()">Next Panel</a> |
    <div id="panelwidget" class="SlidingPanels">
      <div class="SlidingPanelsContentGroup">
        <div class="SlidingPanelsContent" id="p1">Panel 1</div>
        <div class="SlidingPanelsContent" id="p2">Panel 2</div>
        <div class="SlidingPanelsContent" id="p3">Panel 3</div>
        <div class="SlidingPanelsContent" id="p4">Panel 4</div>
        <div class="SlidingPanelsContent" id="p5">Panel 5</div>
        <div class="SlidingPanelsContent" id="p6">Panel 6</div>
      </div>
    </div>
    <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    </body>
    </html>
    Gramps

  • Is it possible to get one sliding panel to automatically display a web site?

    I have a slinding panel widget with 6 content panes.  One of the tabs is named "Online Help'.  I would like the content pane for that tab to automattically display a form that is on a website.
    The 'onclick' that is associated with the "Online Help" tab is calling the sliding panel number.  If I repace it with an http address, the other panels continue to display but, that panel displays blank.
    I have tried a CSS style tag for the panel that includes the http url in a background attribute.  That is not working either.
    I made a stab at spry:detailregion, but I don't know if a url can be a prameter in that element.
    Does anyone have ideas on what I can try?
    Thanks,
    meileendougherty

    Well, a url can be the contents of a data cell, but it will only give you a link, not the other website.
    Although iframes are often considered tricky, I have not had bad luck with them. Put an iframe in your content cell, and use your other website as the source. You will have to give the iframe dimensions, or it will default to 'pretty small'.
    Beth

  • Possible to have two occurences of sliding panels in same location on page?

    Hi, any help you guys could give me would be greatly appreciated.
    I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
    I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
    Here's the page I'm working with, with only one of the Content Groups active:
    http://www.susanmeyerart.com/redesign/
    eta: I'm working with Spry Pre-Release 1.6.1.

    I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
    Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
    This may not work, but, as they say...you don't know until you try!
    Beth

  • Edit JS on spry sliding panels widget to fix auto panel height problem

    Hi guys,
    Ive been trying for a while to make the sliding panels widget
    show each panel in its own height instead of the longest panel's height in the container.
    I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
    I do, however, have a list of things that i believe if implemented should work,
    could you  help me do these fixes on the js? ( any one you know how to or think will work )
    1. edit so that:  Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
    2. edit so that:  PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
    3. edit so that:  Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
    4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
    the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
    He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
    <script>
    // The following function - setPanelNavigation() - assumes the following
    // 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
    // 2. The Previous Panel button has an ID of previousPanel
    // 3. The Next Panel button has an ID of nextPanel
    // 4. SpryDOMUtils.js has been linked
    function setPanelNavigation() {
        var current = sp1.getCurrentPanel(); // Get the current panel
        var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
        var panelNumber=1; // Give a value to the first panel number
        Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                     if (node.id==current.id){ // The current panel now receives a number
               if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
               if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
            panelNumber++; // Go to next panel after incrementing the count
    Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
    Anyone, please help. Thank you.

    wait my bad, the link to my page is:
    http://www.pupr.edu/department/industrial/students.asp
    ** no s on department

  • How do I link to a specific Hero Image in from another page?

    How do I link to a specific Hero Image from another page?

    Hi Laura,
    I am afraid that this is not possible in Muse at this stage, I will recommend that you post this on our ideas section over here, https://forums.adobe.com/community/muse/ideas, and let our devs team know of this requirement.
    As a work around I will suggest that you create a dedicated page with this panel opened when you publish and link that page with the text that you want. Let me know if you need more clarification on this.
    - Abhishek Maurya

  • Spry Sliding Panel widget

    Okay, So I'm dense at times!
    I want to try and learn the Spry Sliding Panels.  Problem is that it does not appear in my Insert – Spry menu.  After reading at Labs it assumes that since I have DW CS4 that it is installed.  I can't be that dense.
    Yeah, I located the CSS and and JS files online at Adobe.  But that sure won't install it into my DW – Insert menu.
    Am I really that dense?

    To my knowledge it shouldn't appear in the insert menu?
    I did the below tutorial to learn all about sliding panels.
    The tutorial will show you how to link your js and css files to your html etc, which make the panels work.
    http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html

Maybe you are looking for

  • Only one row appendable at a time in alv

    I would like to limit only one blank row at a time in my alv grid. Means, if i append a row using the standard "Append Row" Button, the user should not be able to append a second blank row till he fills out the first one. Any hints ?? regards, Priyan

  • Safe Mode Login ?

    Can anyone assist me with attempting to boot in safe mode? I have tried to boot normally, but I keep getting stuck with the aqua bar in the progress window; I boot up in safe mode, get to the login screen (in Safe Mode) but it accept my only (admin)

  • Mounting 3 pairs of omron sensor E3X-F21 at 25mm intervals to measure time taken by moving object breaking beams and connecting to 6601 counter/timer card

    System is Windows ME Labview 6.1 6601 Counter/timer card. 3 pairs of Omron Photoelectric sensors E3X-F21 are mounted on a flat surface and as the object passes the first pair of sensors it starts timer1 and timer2. As the object passes the second pai

  • Sync Issues? or Itunes

    Updated to firmware 1.1.2, not to sure if that caused the issue but the album art and some songs are ending up on albums were they are not supposed to be. Sometimes the art is there sometimes it isnt. Anyone else with this problem or how to fix would

  • Exporting movie/audio score for movie-please help

    i opened my quicktime movie file in logic, i created the audio score to go with it, i exported the audio to movie under the options/movie menu in logic, but when i open the file exported, it plays the quick time movie, but it only has the original au