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

Similar Messages

Spry Sliding Panel Widget Template

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

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

Edit JS on spry sliding panels widget to fix auto panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
    var current = sp1.getCurrentPanel(); // Get the current panel
    var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
    var panelNumber=1; // Give a value to the first panel number
    Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                 if (node.id==current.id){ // The current panel now receives a number
         if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
           if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
        panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.

wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department

Spry Sliding Panel Widget 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 - 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 button

I have an issue with the buttons in the Sliding Panels Widget
after I implemented it in my page. The first time, I have to click
a button twice in order to have it working. Has someone seen this
problem before?

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 & DW V.9 BUILD 3481

Hi Folks,
Does anyone know of a way to get rid of the DW error message
that pops up when you use
the sliding panels widget? If not, I'll submit an SR with the
DW folks...
Error message upon opening any document in the code window
that contains the standard
sliding panels widget code:
"This document contains JavaScript code for a widget that no
longer exists. If you don't remove
the code, the browser might display JavaScript errors when
loading the page.......
mentions: var sp1 = new Spry.Widget.SlidingPanels(......
- GR

This document contains JavaScript code for a widget that no
longer exists. If you don't remove
the code, the browser might display JavaScript errors when
loading the page. Would you like
Dreamweaver to find all instances of this code for you?
var sp1 = new Spry.Widget.SlidingPanels("PANELS",{
duration:850, fps: 60, defaultPanel:0 });
Yes No
Just above the end-body tag I have the script:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
duration: 350, useFixedPanelHeights: false, defaultPanel: 0 });
The only ID I have is " <DIV id="Accordion1"
class="accordian_div Accordion">" as a container for the panels.
Should I
change an ID name or a var name ? The SlidingPanels work
fine. It's just that I'm using the "open recent files automatically
on startup" sort of option and each page displays the above
error and stops, until I reply to it, then continues to load the
next file.
- GR

Two or more spry sliding panels nested in tabbed panels?

Hi
I have a tabbed panel widget on one page. Inside the first
tab I inserted a sliding panel widget. Now this works fine.
I put another sliding panel widget into the second panel.
I changed the div id ( <div id="panelwidget2"
class="SlidingPanels"> ) and placed a second variable at the end
of the code ( var sp2 = new
Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
panel doesn't work and Dreamweaver highlights <div
id="panelwidget2" class="SlidingPanels"> as invalid code.
What do I do wrong?
Here's the code of the page:
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SprySlidingPanels.js"
type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<table border="0">
<tr>
<td><div id="TabbedPanels1"
class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab
1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab
2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><div
align="center"><span class="style3"><a href="#"
onclick="sp1.showFirstPanel();">Bild l</a> | <a
href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent aliquam, Phasellus
trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">
<div align="center"><span class="style3"><a
href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
<a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
<a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
<a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget2" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

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.

Sliding panel widget controls a la Brightcove website

I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
Thanks in advance for any advice.

Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541

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

Problem with Accordion Widget INSIDE Sliding Panel Widget

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

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Multi page recordset output from ASP page on Spry Tabbed Panel Widget

I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=one class="TabbedPanelsContent">Content 1</div>
    <div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Spry sliding panels with tab

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

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

Spry Sliding Panels Question..

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

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

Spry Sliding Panel widget

Similar Messages

Maybe you are looking for