How to apply sliding panels Spry Widget in Dreamwevaer CS4

Could someone please share how to apply sliding panels widget in Dreamwevaer CS4 as it is not in insert spry panel?
Thanks kindly!

Hi Brad,
I meant something like this:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
or the one used on their site:
http://labs.adobe.com/technologies/spry/home.html
Thanks kindly

Similar Messages

  • How to install and place a widget on Dreamweaver CS4?

    I have downloaded many scripts from WidgetBox.com in JavaScript and in Flash.
    How I can install all the widget scripts on my site using DreamWeaver CS4 and place it easily?
    Thanks.

    Primer for using jQuery Plugins
    http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
    Nancy O.

  • How to apply a format to all hyperlink in CS4 file

    Hello, this is my first post,
    We are writing a magazine that we will publish as a PDF. We would like all hyperlink to stand out (we created a character style with these attributes: Candara Bold, Dark Red). The magazine will have a lot of hyperlinks in the form of numbers ("go to section 145") so manually formatting them is our last resort.
    We could not find an option in CS4 to do so. Any idea? Maybe GREP rules? Something else?
    Thank you.

    If you were a bit more specific in your request, I think we could come up with better advice for you. John's seemingly less-than-helpful suggestion is, I think, actually the best solution if you are keying your text directly into ID. But we don't know how your magazine is being written (Word content placed correctly with File -> Place? copied and pasted from web browser? Google Docs? database?), so it's hard to make appropriate suggestions. If you're keying it in manually every time, do you have enough control over the people doing the keying so they type the same "go to section ###" everytime? Is there any chance that they'll say "please see section ###" instead? If so, and if it's easier to trust 'em to type it the same way everytime than it is to trust 'em to apply a character style, then maybe a GREP style is the way to go.
    If they are already set up as links in ID, then you can shift-select them all in the Hyperlinks panel and choose "Hyperlink Options" and associate 'em all with a character style in one go. This is completely obvious to me but once again we don't really know what it's like on your side.

  • How to insert a lightbox gallery widget in dreamweaver cs4

    I have dreamweaver cs4.   . I've customized the lightox gallery widget in  adobe exchange.  I have a saved html page in a defined site into which I'd like to put the widget.  I tried dragging the widget into an html page in dreamweaver cs4 but it did not work.  Under "Insert" I don't see the option to insert a widget.  How do I get it there?
    Thanks so much.

    This video should tell you all you need
    http://www.youtube.com/watch?v=_Vv0QVP2CzE

  • How to change control panel options and shortcuts in CS4

    Hi there,
    I'm trying to customize the control panel in CS4 and am having trouble with a couple of options:
    - I've turned on distribute options but it won't display (only the align options will)
    - Where do I find/change the shortcut for "Highlight the first option in the Control panel" (currently cmd 6)
    Any suggestions would be much appreciated.
    Cheers
    Ben

    I bet A-M is spot on. As for this lingering issue
    macopp wrote:
    The issue with the keyboard shortcut is that I can't find the option to edit it - do you know where it is or how to search for a shortcut so it can be changed?
    since you know the current hotkey combo (CMD+6), you can call up the entire active keyboard set and search for this string. If you do so, you'll find this:
    Product area : Views, Navigation
         Toggle Keyboard Focus in Control Panel --- Default: Cmd+6

  • 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

  • Sliding Panels widget

    Hi,
    I do not know if this is the right place. If not, please tell me where to ask.
    I do not know nothing of programing and my use of a program is to "click" on shortuct. I am familiar with using Tabbed panels, Accordion and Collapsible panel.
    But I would like to know how to use sliding panels. I have read a lot on this links:
    http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS5F39D2B9-A298-472a-8E50-AC4B1 0984EFC.html
    but I do not know how to start. I do not understand English very much and do not have computer knowledge.
    So, is there a way for me to "click" on a widget or icon of a SPry to make  sliding panels?
    On this link are samples, but I realy have no idea, how to make this.
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    Thank you

    Hi Natasa,
    If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
    I hope this helps.
    Ben
    PS. My apologies, I did not realize that this topic had already been answered.
    Message was edited by: vw2ureg

  • 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

  • In Dreamweaver cc there is no spry widget, In Dreamweaver cc there is no spry widget

    How can i find a spry widget on dreamweaver cc

    Hi pat-emi,
    The widget browser has been deprecated in DW. See Re: Widgets a Gone Gone for alternative solutions.
    Thanks,
    Preran

  • Spry widget

    How do I add the spry widget which asks a question like: To prevent spam, please answer this question: What is 2 + 3?

    Client-side validation is not reliable.
    It won't work if the user has JavaScript disabled.
    Spam bots don't use JavaScript. 
    Form validation and spam prevention are best put into your form processing script.  Either in PHP, Classic ASP, ASP.net, Perl, etc... (ask your web host which form processing scripts you can use with your server). 
    Nancy O.

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

  • Spry Sliding Panel Widget problem

    I have tried to use the Spry Widget Sliding Panel code from
    the Adobe tutorial and I keep getting an error message. The message
    is that "Spry" is undefined in line 26. Please help! I have been
    trying to figure this out for 2 days. Is there any code I have to
    change in the .css file or in the .js file that comes with the Spry
    Widget Sliding Panel download.
    I am just getting familiar with the on-line community and I
    have posted this to two other fora -- so please forgive the
    repetition. I am also new to Spry and am eager to learn how to use
    it. I hope it is not too advanced for my level.
    Attached, please find the code.
    Attach Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Untitled Document</title>
    <link href="SprySlidingPanels3.css" rel="stylesheet"
    type="text/css" />
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    </head>
    <body>
    <a href="#" onClick="sp0.showPanel(0);"> Panel
    1</a>
    <a href="#" onClick="sp1.showPanel(1);">Panel
    2</a>
    <a href="#" onClick="sp2.showPanel(2);">Panel
    3</a>
    <a href="#" onclick="sp3.showPanel(3);">Panel
    4</a>
    <div id="slidingPanel_1" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div id="sp1"
    class="SlidingPanelsContent">Content1</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content2</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content3</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content4</div>
    </div>
    </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("SlidingPanel_1");
    </script>
    </body>
    </html>

    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 widget

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

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

Maybe you are looking for