Make default sliding panel load first

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

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

Similar Messages

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

  • 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

  • Sliding Panels Auto Advance w/ Timer

    Hi everyone. I'm looking to make my sliding panels advance
    with a simple timer. I know this can be done (right?) but can't
    find any way to do this. I have text content in my panels (no
    images) so the posted example of a gallery doesn't help me much.
    I have no problem setting up the panels as I want, I just
    want to make them advance every few seconds.
    Anyone please help!!
    Thanks so much,
    Varen Swaab

    Instead of creating a custom script, I decided to extend the widget it self. So everything can be controlled from the widget constructor.
    Before we get started a small side note:
    I would advice to put the changes in a seperate script, and not to modify the current SlidingPanels.js. This way, if you happen to update to Spry 1.7 it will not overwrite the change you made. But if you do not wish to update just paste it in the SprySlidingPanels.js (This saves a HTTP request, resulting in a slightly faster page load, maintainablity vs performance)
    The changes allow you specify the following new options in the constructor:
    - automatic: true / false [boolean]
    turns automatic sliding panels on or off, off by default
    - direction: 0 / 1 [number or Spry.forward , Spry.backward if you have SpryEffects included]
    direction that panels should automaticly slide to, 1 is forward, 2 is backward
    - each: 1000 [number]
    time in miliseconds, note I had to name this "each" instead of duration, because duration handles the sliding panel animation duration.
    Example constructor:
    var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { automatic: false, direction: 0, each: 5000 });
    It also adds 3 new methods to the sliding panel:
    - .start  [ sp1.start(); ]
    This allows you to start the automatic sliding of the panels, this will also work, if you did not specify automatic in your constructor
    - .stop  [ sp1.stop(); ]
    Stops automatic sliding of the panels
    - .setDirection [ sp1.setDirection(1); ]
    Sets a new direction for the sliding panels, requires the same values as you can specify in the sliding panels constructor
    The new code:
    // line 121 of SprySlidingPanels.js
    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;
         if (this.automatic){
              this.start();
    // These are all new methods
    Spry.Widget.SlidingPanels.prototype.start = function(){
         var self = this; // reference to this, so we can use it inside our function
         this.automaticStarted = setInterval(function(){
                   var panels = self.getContentPanels(),
                        panelcount = panels.length,
                        current = self.getCurrentPanel(),
                        newpanel;
                   // locate the current panel index, and check if we need to increase or decrease the panel
                   for(var i = 0; i < panelcount; i++){
                        if(panels[i] == current){
                             self.direction == 1 ? (i++) : (i--);
                             self.showPanel( self.direction == 1 ? (i >= panels.length ? 0 : i) : (i < 0 ? panels.length -1 : i));    
                             break; // stop looping, we already found and are displaying our new panel
         }, this.each || 3000);
    Spry.Widget.SlidingPanels.prototype.stop = function(){
         if(this.automaticStarted && typeof this.automaticStarted == 'number'){
              clearInterval(this.automaticStarted);
              this.automaticStarted = null;
    Spry.Widget.SlidingPanels.prototype.setDirection = function(direction){
         this.direction = direction;
    Hopes this helps

  • 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

  • Sliding Panels No Javascript Enabled,

    I'm not crazy about how the Sliding Panels widget degrades if
    JavaScript is disabled (it exposes all the panels side by side
    horizontally). Go to the sliding panels widget example from Adobe
    and disable your JavaScript:
    Adobe
    Sliding Panels example page.
    As an alternative for users who have JavaScript disabled, I
    would only like to show only the first panel (preserving the
    original width of the sliding panel as if JavaScript were enabled)
    or I'm looking for a way to create an error message (not on a
    separate page, but in the section where the sliding panels would
    be) that reads something like "please enable javascript etc. and
    will hide the sliding panels content). Netflix does this with their
    sliding panels if you have JavaScript disabled- located on the new
    releases page after you login (would give the link but you have to
    login). Or if someone has a better solution I am all ears. Thank
    you.

    elen,
    I had to make the sliding panel the same height as my container div.
    For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue.

  • Sliding Panels - Problems Scrolling Horizontal in Safari

    I have adjusted the CSS in order to make the Sliding Panels widget scroll horizontal using the float: left;
    It is working fine in Firefox but no matter what I do it does not scroll horizontal in Safari, it continues to scroll verticle.  It seems as if it is just not responding to the float in the style.
    What am I doing wrong?
    Here is the URL to the page I'm working on.
    www.wyndetryst.com/testportfolio/portfolio.html

    It works fine in my safari. Do the examples work in safari?  (Example 2: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html )
    Did you also change the rest of the setting or just the float:left. As it needs width changes as well as seen in the example.

  • How can I make iTunes sort on the first word by default, even though that word is "The" or "A"?

    How can I make iTunes sort on the first word by default, even though that word is "The" or "A"?
    I myself think that (for instance) "A tribe called Quest" should be sorted under "A", not "T".
    Now I can edit the sort options manually per track and/or per selection, but I would really like to just kill this "iTunes-knows-how-you-should-sort"-feature in iTunes.
    Anyone any suggestion on how to do that?
    Thanks

    Here is a modified version of one of Doug's Scripts. My modification was to add Sort Name to the list of tags that could be changed. I tried it on a single track and it worked. I recommend backing up your library first. Select the tracks you want to change (or all tracks) and run the script from the Applescript Editor.  If it works as intended, save it so you can apply it to newly imported tracks.  And, yes, I know this isn't the exact answer to your question, you want to change a preference setting in iTunes (if there is such a setting).
    Original script can be forund at http://dougscripts.com/itunes/scripts/ss.php?sp=thistagthattag
    Modified script is below. Start up Applescript Editor, paste it into a new window.  Start up iTunes and select the tracks to modify.  Click Run in the Applescript Editor.  Follow the instructions.
    (* Put This In That
    v2.0 april 22 2008
    - runs as universal binary
    - adds "Show" tag
    - consolidated code
    - saved as script bundle
    v1.7 October 3, 2006
    - adds "Album Artist" as option
    v1.6 October 28, 2004
    - works around iTunes 4.7 selection bug
    v1.5 ('04/1)-- adds "grouping" tag
    Get more free AppleScripts and info on writing your own
    at Doug's AppleScripts for iTunes
    http://dougscripts.com/itunes/
    This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
    This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
    Get a copy of the GNU General Public License by writing to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
    or visit http://www.gnu.org/copyleft/gpl.html
    -- CONSTANTS
    property allOptions : {"Song Name", "Artist", "Album", "Album Artist", "Composer", "Genre", "Comments", "Show", "Grouping", "Sort Name"}
    property my_title : "Put This In That"
    global thisTag, thatTag, theNewTags, theOriginalTags, yn
    tell application "iTunes"
              if selection is not {} then -- if tracks are selected...
                        set sel to selection
                        set numTracks to (length of sel)
                        set s to "s"
                        if numTracks is 1 then set s to ""
                        display dialog "The data from one tag REPLACES the data in another tag in all the selected tracks, with option to delete data in first tag." & return & return & (numTracks & " track" & s & " selected.") buttons {"Cancel", "Continue"} default button 2 with title my_title giving up after 30
                        if gave up of result is true then return
                        my choose_this_tag()
                        my choose_that_tag()
                        set yn to (button returned of (display dialog "Delete data in " & thisTag & " afterwards?" buttons {"Yes", "No"} default button 2 with title my_title giving up after 45) is "Yes")
                        set oldfi to fixed indexing
                        set fixed indexing to true
                        repeat with t from 1 to numTracks
                                  tell contents of item t of sel
                                            set theOriginalTags to {get name, get artist, get album, get album artist, get composer, get genre, get comment, get show, get grouping, get sort name}
                                            set theNewTags to theOriginalTags
                                            my do_put()
                                            set {name, artist, album, album artist, composer, genre, comment, show, grouping, sort name} to theNewTags
                                  end tell
                        end repeat
                        set fixed indexing to oldfi
              else
      display dialog "No tracks have been selected." buttons {"Cancel"} default button 1 with icon 0 giving up after 30
              end if -- no selection
    end tell
    to choose_this_tag()
              tell application "iTunes"
                        set n to (choose from list allOptions with prompt ("Select a tag to get data from:") with title my_title)
                        if n is false then error number -128
                        set thisTag to (n as text)
              end tell
    end choose_this_tag
    to choose_that_tag()
              set o to {}
              repeat with t in allOptions
                        if (t as text) is not thisTag then copy t to end of o
              end repeat
              tell application "iTunes"
                        set n to choose from list o with prompt ("Use data from the " & thisTag & " tag to REPLACE data in...") with title my_title
                        if n is false then error number -128
                        set thatTag to n as text
              end tell
    end choose_that_tag
    to do_put()
              try
                        repeat with i from 1 to (length of allOptions)
                                  if thisTag is (item i of allOptions) then
                                            set thisTag_sto to (item i of theOriginalTags)
                                            exit repeat
                                  end if
                        end repeat
                        repeat with i from 1 to (length of allOptions)
                                  if thatTag is (item i of allOptions) then
                                            set (item i of theNewTags) to thisTag_sto
                                            exit repeat
                                  end if
                        end repeat
                        if yn then
                                  repeat with i from 1 to (length of allOptions)
                                            if thisTag is (item i of allOptions) then
                                                      set (item i of theNewTags) to ""
                                                      exit repeat
                                            end if
                                  end repeat
                        end if
              end try
    end do_put

  • Sliding panels hidden content on page load, SprySlidingPanels.js

    There was a
    previous
    post about the issue of hidden content flashing on page load.
    That issue was solved with a "hideGroup" class and an additional
    line in the JS file under the addEventListener lines. My sliding
    panels JS file isn't as simple and I would like to accomplish the
    same thing. I'm using SprySlidingPanels.js. Can anyone help?

    All you really need to do is add this to your CSS:
    .SlidingPanels {
    overflow: hidden;
    No additional JS or CSS class required.
    --== Kin ==--

  • Sliding Panels hidden content shows on page load

    Greetings,
    I am working on a site for a child abuse prevention
    non-profit and need some help asap!
    I am using the unobtrusive sliding panels at:
    Adobe
    Unobtrusive Sliding Panels Example
    I have two panels side by side. When the page loads, all of
    the hidden content is briefly shown to the right of the panels. It
    does this on the adobe sample as well.
    Is there ANY way to hide this hidden content during the page
    load? If so, could I get exact instructions? I am more of a
    front-end person and not the best with scripting.
    BTW, all of the content is static so the "Adobe Hiding Data
    References During Page Load" does not work in this instance.
    Thanks in advance!!

    Try this:
    1. Set a class that sets visibiliity to hidden:
    .hideGroup{visibility:hidden;}
    2. Add this class to your content group:
    <div class="SlidingPanelsContentGroup hideGroup">
    3. Add a line to sp_unobtrusive.js to remove this new class
    after the widget made.
    Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
    Add that right under the addEventListener lines.
    That should do it.
    Don

  • Sliding Panel - default panel

    Hello,
    I have looked in the documents section for the sliding panels
    but I can't find a solution how NOT to show the content until a
    user clicks on a link. If there is a solution documented, please
    point me in the right direction. If not, can you advise how to best
    go about it - or is it an effect?
    Cheers,
    tintin

    add style visibility hidden to the div,
    than use the SpryDOMUtirls.js onloadlistener to show it
    (using document.getElementById and style.visibility

  • Sliding panel inside tabbed panel - onclick both

    I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
    OK I have another scenario as well....
    You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

    Try this and adapt to your needs:
    <!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>Document sans nom</title>
    <script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
    <script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style>
    .SlidingPanels {
       position: relative;
       width: 200px;
       height: 200px;
       padding: 0px;
    .SlidingPanelsContentGroup {
       position: relative;
       height:600px;
       margin: 0px;
       padding: 0px;
    .SlidingPanelsContent {
       width: 100%;
       height: 400px;
       overflow: hidden;
       margin: 0px;
       padding: 0px;
    </style>
    </head>
    <body>
    <a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Contenu 1
          <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
          <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
          <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
             <div id="slidingPanel_1" class="SlidingPanels">
                  <div class="SlidingPanelsContentGroup">
                     <div id="content1" class="SlidingPanelsContent">The Content 1</div>
                <div id="content2" class="SlidingPanelsContent">The Content 2</div>
                <div id="content3" class="SlidingPanelsContent">The Content 3</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Contenu 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    Spry.Utils.addLoadListener(function() {
            Spry.$$("#trigger1").addEventListener('click', function() {
                TabbedPanels1.showPanel(0);
                sp1.showPanel(2);
            }, false);
            Spry.$$("#trigger2").addEventListener('click', function() {
                //TabbedPanels1.showPanel(0);
                sp1.showPanel(0);
            }, false);           
    </script>
    </body>
    </html>
    You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
    Xav

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

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

Maybe you are looking for