Sliding Panels Question

Hi there. I'm new to Spry, and I'm using 1.6.1 in Dreamweaver CS3. I want to create sliding panels to showcase some work I've done, but I wanted to know if it's possible to build a scroll function for one panel which will have multiple pieces of work (not a scrollbar).
There's not enough horizontal real estate to show all the work in this particular panel at once, so I want to put a "continue" or "next" and a "previous" button/function on that panel so the user can automatically view differents areas of the panel to see the rest of the related work, without creating a number of different panels for all this.
Is this possible in the sliding panels widget, or is there just one pass per panel? I hope my question is clear.
I'm trying to decide whether to build this in Spry or Flash.
Thanks in advance for any suggestions.

I dug around a bit more and saw an example that shows me that I can do this. Thanks anyway!

Similar Messages

  • Spry Sliding Panels Question..

    I'm building a website and want to have a small image gallery page, with Spry Sliding Panels as the framework. Everything was working fine until I realized that in the browser, when I clicked the link to go the next panel, the actual web page itself automatically snaps back up to the top before the panel actually slides. I was wondering how to fix this because the gallery is about halfway down the page, and it looks stupid when the page jumps back up to the top each time. Thanks for your help...

    Yes, your panel button code (with my change) should look like this:
             <div class="panelbtn"><a href="javascript:;" onclick="sp1.showFirstPanel(); return false;">1</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p2); return false;">2</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p3); return false;">3</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p4); return false;">4</a></div>
    This is what I meant when I said to replace the # with the word javascript:;

  • Sliding Panels Navigation Question

    I'm using the sliding panels widget to display some image
    thumbnails. The problem is, I'm displaying about 5 or so at a time,
    and the showNextPanel function only moves the whole thing over by
    one thumbnail, making it necessary to click it five times to show
    the next set of thumbnails.
    Mangled test file can be found

    Hello Luke,
    I see there are 3 problems here you want/have to solve:
    1. On page load you try to animate an element in page that
    doesn't exists: thimbContainer. Every time you load the page in the
    browser 3 alerts that the element is not found are generated by the
    Spry Effects because the element isn't there. Please remove the
    following code from the onload attribute attached to the body tag:
    MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
    2. The move next arrow doesn't work on the first click. The
    problem appears because the SlidingPanel widget is instantiated
    before the data to be putted in place in your page by the ds1 XML
    DataSet. The regions are populated on page finish with the data but
    the SlidingPanel widget will still try to animate the old,
    incorrect element on the first click. To avoid this problem you'll
    have to remove from page the SlidingPanel instantiation and
    register a listener on the 'ticker' region update. Remove this
    <script type="text/javascript">
    var sp = new Spry.Widget.SlidingPanels("ticker");
    and just after the ds1 DataSet instantiation add the
    following line:
    {onPostUpdate:function(){sp = new
    3. To move the slider with the next 5 or prev 5 elements
    you'll have to create your own functions that should add or
    subtract from the current display index 5. The functions you look
    for are:
    function moveNextFive(){
    if (!sp)
    var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
    var maxPanels = sp.getContentPanels().length;
    if (idx > maxPanels)
    idx = maxPanels;
    function movePrevFive(){
    if (!sp)
    var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
    var minPanels = 0
    if (idx < minPanels)
    idx = minPanels;
    Please change the onclick for the previous and next arrows in
    your Sliding Panels with calls to these 2 functions.

  • 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:
    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. ent-page-1/
    Comment 29: David Powers

  • Problem with Accordion Widget INSIDE Sliding Panel Widget

    perhaps I should not do this, but I nested an Accordion
    Widget inside a Sliding Panels Widget:
    - There are eight Panels.
    - Each one contains a complete Accordion.
    The sliding works fine, and so does the Accordion animation,
    but the text inside the Accordion Panel Tabs won't move along, when
    a tab is activated. I need to hover the mouse over the accordion to
    make the panel texts appear again.
    Of course, when I un-nest the widgets and move the Accordion
    widget out of the Sliding Panel widget, everything is fine.
    My question is:
    - am I demanding "too much" by nesting the widgets?
    - or should this basically work, and the problem arises from
    rivalling scripts?
    Here is a link:
    widgets Test
    The horizontal top menu will activate the sliding panels, but
    as of now only the leftmost menu item contains an Accordion (I know
    the CSS does not look nice yet).
    Is there anything I can optimise to get this to work?
    Thank you so much,
    Greetings, Jensen
    Edit: The problem does NOT occur in Firefox, but in

    Hi John,
    That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link If you don't want the page to wiggle up and down, please check the box shown in the screenshot.

  • HTML Panel with Tabs like Sliding Panel tabs

    Hi, what do I need to add/change to have HTML panels
    switching with tabs that switches background image like the tabs in
    sliding panels example?
    Or can I modify the
    sp_withTabs.js to have graphic tabs work with HTML

    Nevermind, I got it. I used the SpryTabbedPanels.js and
    modified the SpryTabbedPanels.css with my graphics, size, position
    and what not.
    I do have one more question. I'm using HTML Panels with Fade
    in and out and when loading my page I have to have default content
    in the main html doc for something to display when the page loads.
    Then when I click on the first button, it then loads the real
    external HTML panels. Is there any way I can load my first external
    HTML page right when my site loads?

  • Spry sliding panels problem

    I'm using the sliding panels on my website, but I'm getting
    an error when I use a vertical scrollbar.
    To the right of the sliding panels I have an image, and when
    I press the up and down arrows, the hidden sliding panels are
    visible under the image!
    Any ideas?

    Originally posted by:
    Donald Booth
    Hi Spry Users,
    We are pleased that you are using Spry!
    When posting issues for help, please help us help you.
    Providing a URL is the quickest way
    for the Spry team, and our valued forum community, to help you with
    your page.
    Code samples are also great if you
    can't provide a URL.
    And of course, having the latest code
    is always a good idea. Use the latest download if possible.
    Questions posted without urls/code inevitably take more back
    and forth to get figured out.
    And now that this forum has been up for a year and a half, we
    have a good record of fixes previously given. Search the forums and
    see if your question has been solved already.
    Thanks for reading. Now, how can we help you?
    The Spry Team
    ^ else we cant Identify the problem

  • Spry Sliding Panels--how to get it to repeat at the end?

    I have a beautiful working Sliding Panels set up--you can see
    it at:
    (Scroll down to "Browse the Product Gallery")(and no, I did not
    design this attrocious, table-riffic site!). My question is, when I
    get to the last panel, how do I get it to automatically start over
    at the first panel? I can't seem to figure this out...

    Hi Kin,
    ljlindhurst posted this back in April 2008 without a positive conclusion.  It looks like the same conundrum that I posted a couple of days ago  :
    “  Spry SlidingPanels
    By default, after the last panel has displayed The Spry slidingPanels Widget causes the panels to zoom backward (visibly) through all the panels to arrive back at the first panel (sp1) to start the cycle again !?
    Well I don't see any sliding panels on line that do that these days, thank goodness, they all transition (continue) from the last to the first panel without a break or “reverse zoom” !    So what am I missing?  “
    Your reply to ljlindhurst started with the following line:
         “Since none of the geniuses have answered your question, I'll give it a try. :-P “
    Well I appreciate your humor and greatly respect all the work you do on the forums, as I suspect many of us do.
    So could you please revisit this item and have a stab at the javascript or code that will make this needed action work.
    Thanks in anticipation.

  • Sliding panels slideshow

    When doing a iPhoto sliding panels slideshow what size and orientation should the photos be? Thanks. Im having trouble with some of the photos being cut off.

    Post your topic in the iPhoto designated community >  iPhoto: iLife: Apple Support Communities
    More iPhoto users will see your question there.
    And you might wan to bookmark the iPhoto User Guide here.

  • 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?

    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'.

  • 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, 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:
    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 don't know until you try!

  • 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:
    // 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 ({ // 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");
    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:
    ** no s on department

  • 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:
    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><div class="slidingpanelandtab">
          <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>
    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.

  • How to Create a DVD from sliding Panels Slideshow.

    I have the latest MacBook and iLife software.
    I have created a 650 picture slideshow in Sliding Panels theme. It is 1.1 GB.
    I have tried to (1) export and (2) Create iDVD through "Share". In both cases I get the message that I do not have sufficient Disc space. I have 23GB of available disc space.
    I am probably doing something wrong but any CLEAR instructions?

    Welcome to the Apple Discussions. What system version are you running? As a precursor to trying the following fixes download and reapply the Mac OS X v10.6.3 v1.1 Update (Combo) updater if you're running Snow Leopard or the Mac OS X 10.5.8 Combo Update if you're running Leopard. Follow that with a repair of disk permissions. Then try the export again. If still not working continue with the fixes below:
    First delete the iPhoto preference file,, that resides in your User/Library/Preferences folder and try again.
    If that doesn't help backup and launch iPhoto with the Command+Option keys depressed to rebuild the library. Select the last three options.
    Click to view full size

  • 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.

Maybe you are looking for

  • MessageDownload in a table - Not working?

    There seems to be an issue with messageDownload and table Region Styles. I have created a table associated with a VO that has a BLOB that holds PDF images. When I download the file associated to any row, it always downloads the BLOB value from the fi

  • Why do I have to login twice after sleep mode?

    Until recently I have been able to login one time with a password to get to my desktop. Now I have to login twice and I have no idea why. I am running Yosemite, whatever the newest version is. I'm not too tech savvy, but have checked every setting I

  • Build installer error, help

    Hi all, There's a problem need your help. I have a LV8.5 PDS. And I create a exe, when I want to create a installer, I cannot found any information is "additional installer". When I try to build it, error reports as below. error information: CDK_Buil

  • Creating User with identical attributes

    How do I create a New User who has the same Preferences and Permissions as an already existing user? iMac Intel   Mac OS X (10.4.9)  

  • Lollipop update for note 3

    Hi i bot an AT&T Samsung Galaxy Note 3 from the U. S. A. I unlocked is here in Bangladesh locally. Bt i cant use NFC neither i can use my phone as Hotspot. Also i m unable to receive updates for lollipop. Any suggestions for me how to solve my proble