Get Count of Panels in Sliding Panels

Is there a way to get the # of panels of a sidling panels
widget?
I'd like to add left and right arrows and gray out an arrow
if they're at the end of the list of panels.
The only way to do this is to find out if currentPanel =
totalPanels (assuming this exists).
Is there an API for this?
Thanks!
Chris

hi Chris,
Try calling the getContentPanelsCount() method on the sliding
panels object.
var panelCount = sp.getContentPanelsCount();
You can also get the index of the current panel like this:
var curPanelIndex =
sp.getContentPanelIndex(sp.getCurrentPanel());
I have the addition of observers to widgets on my list of
things to do.
--== Kin ==--

Similar Messages

  • Creating SEF URLs and getting directly access to sliding panels

    I'm working on a Spry based project that is using SlidingPanels widget with tabs. I usually use "<a href="#" onclick='..." expression to call panels. But the URL never changes as you know. I guess there are some ways to get access to a specified panel by typing URLs into address bar like "main.html?sPanelsLevel1=Id1#Div1&sPanelsLevel2=Id2#Div2...". I tried to use SpryURLUtils but couldn't manage that yet
    If I can get these URLs i will use them for creating SEF URLs for google adwords and a sitemap.
    Thanks in advance...

    Thanks for reply Ben,
    Sure, I had a look at this page. But there is no problem with navigate panels with showPanel(PID). I just wanna get the URL to each sliding panel.
    Like this...

  • Getting a sliding panel loaded into an html panel to work.

    Hi. This is my first post on the forum.
    I've been using Spry a little here and there. Today I ran
    into a situation where I want to load an external page, that has a
    sliding panel in it, into an html panel. So far I have not had luck
    and I suppose it has to do with loading the js file. At the moment
    I have a right column that already has a sliding panel (working).
    But it would appear that the loaded external html file (in the left
    "main" column) is not picking that up. Any suggestions for a noob
    as to what to do next? Viewing the external page by itself allows
    the sliding panel to work (that is when I add the js file import to
    the head of the external html file... but that head section does no
    good when loaded into an html panel)
    Anyway, any help at all is greatly appreciated.
    Thanks,
    Eric

    Thank you very much! I found the topic
    here.
    It will require a bit of a small learning curve for me as html
    panel and sliding panels are my first interaction with js... even
    my rollovers are css driven. Thanks!

  • 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

  • Spry Sliding Panels not working in IE

    I've been working for about 12 hours straight on getting this
    working correctly - my Sliding Panels just aren't working at all in
    IE. The panels load properly - for example, you can see only the
    first loaded panel, not all of them - but when I click a link to
    switch to the next, nothing happens. Firebug is reporting no
    errors, and neither is IE. Here is the relevant code:
    <head><script type="text/javascript"
    src="SpryAssets/SprySlidingPanels.js"></script>
    <link type="text/css" rel="stylesheet"
    href="SpryAssets/SprySlidingPanels.css"></head>
    <div id="mainContent">
    <div id="panelwidget" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="main">Main
    Content<br /><a href="images/news.png" rel="lytebox"
    title="Omgtest!"><img src="images/news.png"
    /></a><br /> <a href="javascript:void(0);"
    onclick="sp1.showPanel('series');">TEST</a></div>
    <div class="SlidingPanelsContent" id="series">Series
    and Models</div>
    <div class="SlidingPanelsContent" id="about">About and
    Bio</div>
    </div>
    </div>
    <script type="text/javascript">var sp1 = new
    Spry.Widget.SlidingPanels("panelwidget");</script>
    </div>
    The following might be somewhat related: I am using the
    Lytebox javascript library, which is a Lightbox clone (that doesn't
    use prototype), as well as a preloader for my mouseover nav bar,
    with this code:
    <script type="text/javascript">
    function init() {
    MM_preloadImages('images/menu/main_click-trans.png','images/menu/main_hover-trans.png','i mages/menu/series_click-trans.png',
    'images/menu/series_hover-trans.png','images/menu/about_click-trans.png','images/menu/abo ut_hover-trans.png');}
    </script>
    My nav bar links to the panels like this:
    onclick="MM_nbGroup('down','group1','Main','images/menu/main_click-trans.png',1);
    sp1.showPanel('main'); return false"
    However, a plaintext link inside of the first panel - "<a
    href="javascript:void(0);"
    onclick="sp1.showPanel('series');">TEST</a>" - does not
    work either.
    Just for fun I thought I would try adding min-height:0; zoom:
    1; to the CSS classes for slidingpanels.... no dice there as well.
    URL is
    www.goldensealdrums.com/wip
    Any ideas? I am at a complete loss. Thanks.

    Thanks for your help :] I ended up realizing that a huge
    bloated js navbar wasn't all that great of an idea anyway, so I
    scrapped it and used a CSS-based one instead...much cleaner and
    works better (no preloading! woohoo.) It looks like the problem was
    probably an amalgamation of many things, but it's resolved now.
    quote:
    IE doesn't seem to like the PNG images you are using
    understatement of the decade.

  • Sliding Panels: displaying active panel number, total panel count, etc.

    I have an XML-generated Sliding Panels widget. How do I fetch the active panel number, total panel count, and disable Previous/Next buttons based on panel's place in the sequence?
    In other words:
    Panel 1 of 3   |   < Previous (disabled)   |   Next >
    Panel 1 (active)
    Panel 2
    Panel 3

    I've not seen an example of exactly what you're trying to do, but take a look at the code for this page:
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
    It dynamically builds up the sliding panel from data and dynamically creates the list of numbered links based upon the number of panels.
    In a quick look, there isn't a method of the Sliding panel object which tells you the index of the current panel, but you can get that by calling getCurrentPanel() and then loop over the panels which you can obtain by getContentPanels() and checking against each panel to see if it is the current panel and then that's the index of your current panel. From there you can set the "(active)" label and enable and disable the previous and next buttons, if you're at index 0, then disable previous and if your at getContentPanelsCount()-1  then you're at the end.

  • 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:
    http://www.traditional-building.com/index-anim.htm
    (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...
    thanks!

    Hi Kin,
    ljlindhurst posted this http://forums.adobe.com/message/97681# back in April 2008 without a positive conclusion.  It looks like the same conundrum that I posted a couple of days ago http://forums.adobe.com/thread/851757  :
    “  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.

  • 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

  • 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

  • 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

  • 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

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

    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, com.apple.iPhoto.plist, 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

  • Sliding Panels

    Have a problem with the sliding panels widget. Say for
    example I have 2 panels - each with a number of form fields on. If
    I tab through the form fields on panel 1 the focus automatically
    goes to the form fields on panel 2 and therefore panel 2 is visible
    in it's current position.
    Here's an example:
    Spry
    Panel Test
    Any ideas how to fix this?

    So the problem with just showing the panel that has focus is
    that we don't know what the designer/developer intended. For
    example, the sliding panels widget could be used to present a
    wizard, where the user is not allowed to proceed to the next page
    (panel) until they have dones something specific.
    So a possible workaround for this is to use CSS to hide
    elements that are not visible. Elements on the page that are not
    visible, can't receive focus. Try adding the following CSS
    somewhere *BELOW* SprySlidingPanels.css on your page:
    <style type="text/css">
    .SlidingPanelsContent {
    overflow: hidden;
    .SlidingPanelsContent * {
    visibility: hidden;
    .SlidingPanelsCurrentPanel *, .SlidingPanelsAnimating * {
    visibility: visible;
    </style>
    The sliding panels widget programatically places
    SlidingPanelsCurrentPanel and SlidingPanelsAnimating classes on the
    various panels at strategic times. The styles above make use of
    these classes to hide content when they aren't showing. Thus
    preventing them from getting focus. Note that the overflow:hidden
    on the SlidingPanelsContent class is necessary because if it is
    auto or scroll, the browser will place the div in the tab order so
    it can get focus. If it is overflow:hidden, it does not do this.
    --== Kin ==--

  • Control layout of "Sliding Panels"?

    Is there a way to control the layout of the sliding panels slide show theme? I have quite a few photos I'd like to display in a rather short length of time. It is also challenging because the photos are stills I captured from some prior iMovie/iDVDs so the resolution just isn't there. Therefore I'm trying to keep the layouts with the smaller pictures: 3, 4, 5 panels at a time (which look much better) and remove the layout for the single picture, double picture which exposes the poor resolution and doesn't let me get as many pictures fit into the time I need.

    Thanks Terence, but I didn't ask about the timing of slides. I wanted to know if there is some way to adjust the layout so it only uses the smaller, multi-photo display in the Sliding Panels style. I'm not seeing anything in iPhoto itself, but I'm currently looking at a copy I made of the SlidingPanels.mrbStyle in the root Library > Application Support > iLifeSlideshow > Styles. In the bundle there is a StyleDescription.plist. And I notice there are 15 effect presets. The preset IDs are labeled pretty clearly. I'm thinking maybe if I delete some of the effect presets and rename the style maybe I'll get just the layout elements I need. I guess it is worth a shot unless anyone here knows of some way within iPhoto to select which layouts are used?

  • Sliding Panel Content Not Hidden

    Hi All. This is my first post so apologies if I do something wrong.
    I'm setting up sliding panels to work on my site (I've used them before) and this time I can't get the panels that aren't displayed to hide. The panels slide, but all panels are visable at all times. Here is the code -
    CSS
    .SlidingPanels {
        position: relative;
        width: 221px;
        height: 260px;
        padding: 0px;
        border: none;
    .SlidingPanelsContentGroup {
        position: relative;
        width: 10000px;
        margin: 0px;
        padding: 0px;
        border: none;
    .SlidingPanelsContent {
        width: 221px;
        height: 260px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        border: none;
    .SlidingPanelsAnimating * {
        overflow: hidden !important;
    .SlidingPanelsCurrentPanel {
    .SlidingPanelsFocused {
    TEST.PHP
    <!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>Untitled Document</title>
    <script src="http://www.guaranteedprofit.co.uk/Scripts/SprySlidingPanels.js" type="text/javascript"></script>
    <link href="http://www.guaranteedprofit.co.uk/sandbox.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
        href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
    <a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
        onclick="sp1.showLastPanel();">Last 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>
    Has anyone got any suggestions please as I know it's something simple, I just can't work it out. I've tested it in FF and IE6
    Thanks in advance, Adam

    Solved it. I've been at this since 5am and put a rouge <! -- in the css file which screwed it up

Maybe you are looking for