Spry Sliding Panel - Timer

I've been working on extending Spry's Sliding Panels to allow
me to set a timer to auto advance to the next panel. Whilst I had
success with a script that targeted a particular element (eg sp1)
it really isn't terribly useful to have to recode per panel. So
trying to extend instead. Problem is that I keep getting an error
that says the advanceToNextPanel function doesn't exist. Hoping
someone might be able to point me in the right direction. Code
below:
// Sliding Panel Timer
// Based upon
http://labs.adobe.com/technologies/spry/demos/gallery/gallery.js
and feedback within the Adobe Spry forum
// Extend SlidingPanels to include additional data
Spry.Widget.SlidingPanels.prototype.gPanelShowInterval =
1000; // msecs between panels
Spry.Widget.SlidingPanels.prototype.gPanelShowOn = false;
Spry.Widget.SlidingPanels.prototype.gPanelShowTimer = null;
Spry.Widget.SlidingPanels.prototype.gAutoStartPanelShow =
true;
Spry.Widget.SlidingPanels.prototype.addPanelShowTimer =
function()
if (this.gPanelShowInterval == undefined)
this.gPanelShowInterval = 10000; // msecs between panels
if (this.gAutoStartPanelShow)
this.startPanelShow();
// Kill any previous timer event
Spry.Widget.SlidingPanels.prototype.killPanelShowTimer =
function() {
if (this.gPanelShowTimer)
clearTimeout(this.gPanelShowTimer);
this.gPanelShowTimer = null;
// Display next sliding panel on rotational loop
Spry.Widget.SlidingPanels.prototype.advanceToNextPanel =
function() {
var tPanels = this.getContentPanels().length - 1; // Total
Panels
var cPanel = this.getContentPanelIndex(this.currentPanel);
// Index of currently displayed panel
if (tPanels == cPanel)
this.showFirstPanel(); // Return to the first panel
else
this.showNextPanel(); // Show the next sliding panel
this.setPanelShowTimer();
// Setup timer event to change to next panel
Spry.Widget.SlidingPanels.prototype.setPanelShowTimer =
function() {
this.killPanelShowTimer(); // Kill any previous timer event
this.gPanelShowTimer = setTimeout( function() {
this.gPanelShowTimer = null; this.advanceToNextPanel(); },
this.gPanelShowInterval);
// Start the timed sliding panel
Spry.Widget.SlidingPanels.prototype.startPanelShow =
function() {
this.gPanelShowOn = true;
this.setPanelShowTimer();
};

My previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich

Similar Messages

  • 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

  • Spry sliding panels with tab

    Maybe I'm missing something but I've been stuck on this for a
    long time. In one example of the spry sliding panel with tab there
    are <li> elements for the menu like this...
    <ul class="slidingTabPanel">
    <li><a href="#" id="about" class="tabActive"
    title="about"></a></li>
    <li><a href="#" id="contact" class="tab"
    title="contact"></a></li>
    </ul>
    and they should link to...
    <div id="aboutPanel" class="p1"></div>
    <div id="contactPanel" class="p2"></div>
    with contents in each of those DIV
    I just can't seem to get the buttons to do anything, how are
    the <li> calling the panels?

    Actually, I figured it out. I had to edit the sp_withTabs.js
    file with the IDs as well, that's whats calling the CSS class.
    My problem now is that everything is all good with 4 tabs,
    but when I try to add another tab, no matter what path I set for
    the background image state it always shows the image of the fourth
    tab and not a new image.

  • Spry Sliding Panels Question..

    Hello,
    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:;
    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

  • Spry Sliding Panel Widget Template

    I have inserted the Spry Tabs and Accordion widgets and
    adjusted using CSS. Can I do the same with a Spry Sliding Panel
    Widget?, if so where can I access a sliding panel widget to
    adjust?.
    I have found a tutorial to create a Spry Sliding Panel Widget
    inserting code, but my code experience is zero.
    Thanks

    Also copy the required Javascript file and CSS file to the
    correct location..
    in the <head></head> of the page u will see
    <script src=""> go to the location of the src.. copy and
    paste the files to your new location in the same folder, or change
    the src to match the new location of the file. Do the same for the
    CSS wich is included at the <link href=

  • SIFR 3 and Spry Sliding Panels

    I am having trouble combining spry sliding panels and sIFR 3
    r419 in firefox. Implementation works perfectly in IE6 & 7 but
    in FF3 the headings flicker as one panel slides out and as another
    slides in.
    I have tried adding sIFR.replace to onclick to combat this,
    as described in another post but to no avail.
    Does anyone have any suggestions?
    Many thanks
    Marcel

    Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

  • Spry Sliding Panels & iFrames Issue

    NOTE: This was also posted in the Dreamweaver section
    http://www.ripplecommunications.com/75th/index.htm
    I'm having an issue with iFrames and their visibility within
    a Spry sliding panel. When the panel slides, the iFrame stays
    visible outside of the sliding panel container.
    Any ideas? You can see an example above, click on a date in
    the timeline. This seem to occur in Firefox. IE 7 is OK.
    2.0.0.11 on a PC. Below is a screenshot to the issue that I
    see.
    http://www.ripplecommunications.com/75th/screen.png

    jim,
    I am working with sliding oanels in GoLive and trying to
    incorpoate iFrames as well. It seems to work (all manual coding of
    course) and i do not have problems with the visible issues. have
    you checked the
    &quot;slidingpanelsconent&quot;...&quot;overflow&quot;
    value in the css file, should be hidden.

  • Spry Sliding Panel automatic changes

    Hi, is there any way to do sliding panel to change
    automatically (without clicking on any link) with some duration,
    about 10sec.? I will be appreciate for any help

    My previously posted I'd fixed this but it is in fact not
    working.
    Hi hope you can help.
    My Spry Sliding panel is appearing over my floats in IE, fine
    in Firefox.
    Test
    page here
    Sliding
    Panels CSS Here
    Any ideas?
    Is this a spry problem or my CSS?
    Thanks.
    Rich

  • Spry Sliding Panel

    Hi hope you can help.
    My Spry Sliding panel is appearing over my floats in IE, fine
    in Firefox.
    Test
    page here
    Sliding
    Panels CSS Here
    Any ideas?
    Is this a spry problem or my CSS?
    Thanks.
    Rich

    Apologies, I have fixed that with clear: both;
    But IE6 my panel doesn't appear at all!
    Rich

  • Spry Sliding Panel Problem - Repost

    Hi hope you can help.
    My Spry Sliding panel is appearing over my floats in IE, fine
    in Firefox.
    I previously posted but it is in fact not working.
    Test
    page here
    Sliding
    Panels CSS Here
    Any ideas?
    Is this a spry problem or my CSS?
    Thanks.
    Rich

    quote:
    Originally posted by:
    kinblas
    If you're getting a "Spry is undefined" error, it probably
    means that the browser is not finding the JS files you included at
    the top of your HTML file. Make sure the path to your JS files are
    correct ... you can do this by trying to load the JS files directly
    in the URL field at the top of your browser.
    --== Kin ==--
    if u look at the code.. u will seee:
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    it should be
    <script src="SprySlidingPanels.js"
    type="text/javascript"></script>

  • Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

  • Spry Sliding Panel Flicker

    I am new to Spry and familiar with but not fluent in
    JavaScript.
    I have created sliding panels to hold text and they work
    beautifully with the exception of a flicker or flash when the page
    is loaded. The extra text flashes on the right side (these are
    horizontal panels) as the page is loading. It does not do it on
    every page or every time; it seems more frequent on the longer
    pages and on slower connections.
    A couple of the pages that pose problems frequently are:
    http://www.tersiiska.com/creativity/main/introduction.html
    http://www.tersiiska.com/creativity/resources/inspiration.html
    I am working in Dreamweaver CS3 and used the code from Spry
    1.5
    My CSS (below) is basically the SprySlidingPanels.css file
    with a couple of changes to get the horizontal effect and the
    correct panel size.
    .SlidingPanels {
    position: relative;
    width: 100%;
    float: left;
    height: 340px;
    padding: 0px;
    border: none;
    .SlidingPanelsContentGroup {
    position: relative;
    float: left;
    width: 10000px;
    margin: 0px;
    padding: 0px;
    border: none;
    .SlidingPanelsContent {
    width: 570px;
    height: 340px;
    float: left;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: none;
    .SlidingPanelsAnimating * {
    overflow: hidden !important;
    .SlidingPanelsCurrentPanel {
    .SlidingPanelsFocused {
    Any help would be greatly appreciated.
    Thank you,
    Donna

    Hi Donna,
    This is easily fixed by adding an overflow:hidden to the
    .SlidingPanels rule:
    .SlidingPanels {
    position: relative;
    width: 100%;
    float: left;
    height: 340px;
    padding: 0px;
    border: none;
    overflow: hidden;
    The widget actually programatically sets the overflow:hidden
    on the top-level element of the widget when the constructor is
    called, but as you say, this can be too late on a very slow
    connection... we do it that way so that if JavaScript is turned
    off, the user can still see *all* the content.
    --== Kin ==--

  • Spry Sliding Panels - current 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 guys help me do these fixes on the js? ( the one you 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 )
    Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.
    This is the SprySlidingPanels.js:
    // SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.SlidingPanels = function(element, opts)
        this.element = this.getElement(element);
        this.enableAnimation = true;
        this.currentPanel = null;
        this.enableKeyboardNavigation = true;
        this.hasFocus = false;
        this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
        this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;
        this.currentPanelClass = "SlidingPanelsCurrentPanel";
        this.focusedClass = "SlidingPanelsFocused";
        this.animatingClass = "SlidingPanelsAnimating";
        Spry.Widget.SlidingPanels.setOptions(this, opts);
        if (this.element)
            this.element.style.overflow = "hidden";
        // Developers can specify the default panel as an index,
        // id or an actual element node. Make sure to normalize
        // it into an element node because that is what we expect
        // internally.
        if (this.defaultPanel)
            if (typeof this.defaultPanel == "number")
                this.currentPanel = this.getContentPanels()[this.defaultPanel];
            else
                this.currentPanel = this.getElement(this.defaultPanel);
        // If we still don't have a current panel, use the first one!
        if (!this.currentPanel)
            this.currentPanel = this.getContentPanels()[0];
        // Since we rely on the positioning information of the
        // panels, we need to wait for the onload event to fire before
        // we can attempt to show the initial panel. Once the onload
        // fires, we know that all CSS files have loaded. This is
        // especially important for Safari.
        if (Spry.Widget.SlidingPanels.onloadDidFire)
            this.attachBehaviors();
        else
            Spry.Widget.SlidingPanels.loadQueue.push(this);
    Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
        this.hasFocus = true;
        this.addClassName(this.element, this.focusedClass);
        return false;
    Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
        this.hasFocus = false;
        this.removeClassName(this.element, this.focusedClass);
        return false;
    Spry.Widget.SlidingPanels.KEY_LEFT = 37;
    Spry.Widget.SlidingPanels.KEY_UP = 38;
    Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
    Spry.Widget.SlidingPanels.KEY_DOWN = 40;
    Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
        var key = e.keyCode;
        if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
            return true;
        if (key == this.nextPanelKeyCode)
            this.showNextPanel();
        else /* if (key == this.previousPanelKeyCode) */
            this.showPreviousPanel();
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
        return false;
    Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
        var ele = this.element;
        if (!ele)
            return;
        if (this.enableKeyboardNavigation)
            var focusEle = null;
            var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
            if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
                focusEle = ele;
            if (focusEle)
                var self = this;
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
        if (this.currentPanel)
            // Temporarily turn off animation when showing the
            // initial panel.
            var ea = this.enableAnimation;
            this.enableAnimation = false;
            this.showPanel(this.currentPanel);
            this.enableAnimation = ea;
    Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
        var children = [];
        var child = element.firstChild;
        while (child)
            if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                children.push(child);
            child = child.nextSibling;
        return children;
    Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
        return this.currentPanel;
    Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
        return this.getElementChildren(this.element)[0];
    Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
        return this.getElementChildren(this.getContentGroup());
    Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
        return this.getContentPanels().length;
    Spry.Widget.SlidingPanels.onloadDidFire = false;
    Spry.Widget.SlidingPanels.loadQueue = [];
    Spry.Widget.SlidingPanels.addLoadListener = function(handler)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('load', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('load', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onload', handler);
    Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
        Spry.Widget.SlidingPanels.onloadDidFire = true;
        var q = Spry.Widget.SlidingPanels.loadQueue;
        var qlen = q.length;
        for (var i = 0; i < qlen; i++)
            q[i].attachBehaviors();
    Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.pr ocessLoadQueue);
    Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent("on" + eventType, handler);
        catch (e) {}
    Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
        if (ele)
            ele = this.getElement(ele);
            var panels = this.getContentPanels();
            var numPanels = panels.length;
            for (var i = 0; i < numPanels; i++)
                if (panels[i] == ele)
                    return i;
        return -1;
    Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
        var pIndex = -1;
        if (typeof elementOrIndex == "number")
            pIndex = elementOrIndex;
        else // Must be the element for the content panel.
            pIndex = this.getContentPanelIndex(elementOrIndex);
        var numPanels = this.getContentPanelsCount();
        if (numPanels > 0)
            pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
        else
            pIndex = 0;
        var panel = this.getContentPanels()[pIndex];
        var contentGroup = this.getContentGroup();
        if (panel && contentGroup)
            if (this.currentPanel)
                this.removeClassName(this.currentPanel, this.currentPanelClass);
            this.currentPanel = panel;
            var nx = -panel.offsetLeft;
            var ny = -panel.offsetTop;
            if (this.enableAnimation)
                if (this.animator)
                    this.animator.stop();
                var cx = contentGroup.offsetLeft;
                var cy = contentGroup.offsetTop;
                if (cx != nx || cy != ny)
                    var self = this;
                    this.addClassName(this.element, this.animatingClass);
                    this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
                        self.removeClassName(self.element, self.animatingClass);
                        self.addClassName(panel, self.currentPanelClass);
                    this.animator.start();
            else
                contentGroup.style.left = nx + "px";
                contentGroup.style.top = ny + "px";
                this.addClassName(panel, this.currentPanelClass);
        return panel;
    Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
        return this.showPanel(0);
    Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
        return this.showPanel(this.getContentPanels().length - 1);
    Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
        return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
    Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
        return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
    Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
        this.element = ele;
        this.curX = curX;
        this.curY = curY;
        this.dstX = dstX;
        this.dstY = dstY;
        this.fps = 60;
        this.duration = 500;
        this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
        this.startTime = 0;
        this.timerID = 0;
        this.finish = null;
        var self = this;
        this.intervalFunc = function() { self.step(); };
        Spry.Widget.SlidingPanels.setOptions(this, opts, true);
        this.interval = 1000/this.fps;
    Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
        this.stop();
        this.startTime = (new Date()).getTime();
        this.timerID = setTimeout(this.intervalFunc, this.interval);
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
        if (this.timerID)
            clearTimeout(this.timerID);
        this.timerID = 0;
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
        var elapsedTime = (new Date()).getTime() - this.startTime;
        var done = elapsedTime >= this.duration;
        var x, y;
        if (done)
            x = this.curX = this.dstX;
            y = this.curY = this.dstY;
        else
            x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
            y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
        this.element.style.left = x + "px";
        this.element.style.top = y + "px";
        if (!done)
            this.timerID = setTimeout(this.intervalFunc, this.interval);
        else if (this.finish)
            this.finish();

    Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

  • Spry Sliding Panels - 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 guys help me do these fixes on the js? ( the one you 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 )
    Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.
    This is the SprySlidingPanels.js:
    // SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.SlidingPanels = function(element, opts)
        this.element = this.getElement(element);
        this.enableAnimation = true;
        this.currentPanel = null;
        this.enableKeyboardNavigation = true;
        this.hasFocus = false;
        this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
        this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;
        this.currentPanelClass = "SlidingPanelsCurrentPanel";
        this.focusedClass = "SlidingPanelsFocused";
        this.animatingClass = "SlidingPanelsAnimating";
        Spry.Widget.SlidingPanels.setOptions(this, opts);
        if (this.element)
            this.element.style.overflow = "hidden";
        // Developers can specify the default panel as an index,
        // id or an actual element node. Make sure to normalize
        // it into an element node because that is what we expect
        // internally.
        if (this.defaultPanel)
            if (typeof this.defaultPanel == "number")
                this.currentPanel = this.getContentPanels()[this.defaultPanel];
            else
                this.currentPanel = this.getElement(this.defaultPanel);
        // If we still don't have a current panel, use the first one!
        if (!this.currentPanel)
            this.currentPanel = this.getContentPanels()[0];
        // Since we rely on the positioning information of the
        // panels, we need to wait for the onload event to fire before
        // we can attempt to show the initial panel. Once the onload
        // fires, we know that all CSS files have loaded. This is
        // especially important for Safari.
        if (Spry.Widget.SlidingPanels.onloadDidFire)
            this.attachBehaviors();
        else
            Spry.Widget.SlidingPanels.loadQueue.push(this);
    Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
        this.hasFocus = true;
        this.addClassName(this.element, this.focusedClass);
        return false;
    Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
        this.hasFocus = false;
        this.removeClassName(this.element, this.focusedClass);
        return false;
    Spry.Widget.SlidingPanels.KEY_LEFT = 37;
    Spry.Widget.SlidingPanels.KEY_UP = 38;
    Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
    Spry.Widget.SlidingPanels.KEY_DOWN = 40;
    Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
        var key = e.keyCode;
        if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
            return true;
        if (key == this.nextPanelKeyCode)
            this.showNextPanel();
        else /* if (key == this.previousPanelKeyCode) */
            this.showPreviousPanel();
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
        return false;
    Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
        var ele = this.element;
        if (!ele)
            return;
        if (this.enableKeyboardNavigation)
            var focusEle = null;
            var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
            if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
                focusEle = ele;
            if (focusEle)
                var self = this;
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
                Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
        if (this.currentPanel)
            // Temporarily turn off animation when showing the
            // initial panel.
            var ea = this.enableAnimation;
            this.enableAnimation = false;
            this.showPanel(this.currentPanel);
            this.enableAnimation = ea;
    Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
        var children = [];
        var child = element.firstChild;
        while (child)
            if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                children.push(child);
            child = child.nextSibling;
        return children;
    Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
        return this.currentPanel;
    Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
        return this.getElementChildren(this.element)[0];
    Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
        return this.getElementChildren(this.getContentGroup());
    Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
        return this.getContentPanels().length;
    Spry.Widget.SlidingPanels.onloadDidFire = false;
    Spry.Widget.SlidingPanels.loadQueue = [];
    Spry.Widget.SlidingPanels.addLoadListener = function(handler)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('load', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('load', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onload', handler);
    Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
        Spry.Widget.SlidingPanels.onloadDidFire = true;
        var q = Spry.Widget.SlidingPanels.loadQueue;
        var qlen = q.length;
        for (var i = 0; i < qlen; i++)
            q[i].attachBehaviors();
    Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.pr ocessLoadQueue);
    Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent("on" + eventType, handler);
        catch (e) {}
    Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
        if (ele)
            ele = this.getElement(ele);
            var panels = this.getContentPanels();
            var numPanels = panels.length;
            for (var i = 0; i < numPanels; i++)
                if (panels[i] == ele)
                    return i;
        return -1;
    Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
        var pIndex = -1;
        if (typeof elementOrIndex == "number")
            pIndex = elementOrIndex;
        else // Must be the element for the content panel.
            pIndex = this.getContentPanelIndex(elementOrIndex);
        var numPanels = this.getContentPanelsCount();
        if (numPanels > 0)
            pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
        else
            pIndex = 0;
        var panel = this.getContentPanels()[pIndex];
        var contentGroup = this.getContentGroup();
        if (panel && contentGroup)
            if (this.currentPanel)
                this.removeClassName(this.currentPanel, this.currentPanelClass);
            this.currentPanel = panel;
            var nx = -panel.offsetLeft;
            var ny = -panel.offsetTop;
            if (this.enableAnimation)
                if (this.animator)
                    this.animator.stop();
                var cx = contentGroup.offsetLeft;
                var cy = contentGroup.offsetTop;
                if (cx != nx || cy != ny)
                    var self = this;
                    this.addClassName(this.element, this.animatingClass);
                    this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
                        self.removeClassName(self.element, self.animatingClass);
                        self.addClassName(panel, self.currentPanelClass);
                    this.animator.start();
            else
                contentGroup.style.left = nx + "px";
                contentGroup.style.top = ny + "px";
                this.addClassName(panel, this.currentPanelClass);
        return panel;
    Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
        return this.showPanel(0);
    Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
        return this.showPanel(this.getContentPanels().length - 1);
    Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
        return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
    Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
        return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
    Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
        this.element = ele;
        this.curX = curX;
        this.curY = curY;
        this.dstX = dstX;
        this.dstY = dstY;
        this.fps = 60;
        this.duration = 500;
        this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
        this.startTime = 0;
        this.timerID = 0;
        this.finish = null;
        var self = this;
        this.intervalFunc = function() { self.step(); };
        Spry.Widget.SlidingPanels.setOptions(this, opts, true);
        this.interval = 1000/this.fps;
    Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
        this.stop();
        this.startTime = (new Date()).getTime();
        this.timerID = setTimeout(this.intervalFunc, this.interval);
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
        if (this.timerID)
            clearTimeout(this.timerID);
        this.timerID = 0;
    Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
        var elapsedTime = (new Date()).getTime() - this.startTime;
        var done = elapsedTime >= this.duration;
        var x, y;
        if (done)
            x = this.curX = this.dstX;
            y = this.curY = this.dstY;
        else
            x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
            y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
        this.element.style.left = x + "px";
        this.element.style.top = y + "px";
        if (!done)
            this.timerID = setTimeout(this.intervalFunc, this.interval);
        else if (this.finish)
            this.finish();

    And on a side note, if it's just IE6 where the problem arises, should I care???
    Have a look here http://www.w3counter.com/globalstats.php
    Gramps

Maybe you are looking for