Multiple sets of Spry Tabbed Sliding Panels?

I have my code set up for one sliding panel set with three tabs but I want to copy that set and create another set of the same 3 sliding tabs right below it with different content. However, when I copy it to the next set, clicking the second set of tabs still causes the first sets sliding Panel to slide. Furthermore, a few elements of the css are no longer being read for the second set, including the script in the .SlidingPanels that hides any of the text box outside of the specified dimensions.
Attached are a txt file for my html and css if that helps.
Any help on this would be greatly appreciated.
Thanks!
[Moved to Spry forum by moderator]

The constructor appears at the bottom of your sliding panel code, in exactly the format that Arnout has shown. You do not need to go into the javascript file for it.
But the first thing I think you need to do is to make sure that you match the classes (and format) you are using with the classes per your sliding panels style sheet.
Here is the essential markup (your content is not here; this is based on a plain example widget):
<div style="margin: 0 auto; width: 350px; border: solid 1px red;">
<a href="#" onclick="sp.showFirstPanel();">First Panel</a> | <a href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> | <a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#" onclick="sp1.showLastPanel();">Last Panel</a> | <a href="#" onclick="sp1.showPanel('p4');">Panel 4</a>
<div id="panelwidget" class="SlidingPanels" style="margin: 0 auto;">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
        </div>
    </div>
    <script type="text/javascript">
   var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
Note that the ID of the <div id="panelwidget" class="SlidingPanels"> matches the "panelwidget" in the constructor
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
For your second panelgroup, make <div id="panelwidget_01" class="SlidingPanels"> and change the constructor to
var sp2 = new Spry.Widget.SlidingPanels("panelwidget_01");
And of course the onclicks in the nav area should change for the second sliding panels set to use sp2 instead of sp1.
I hope that Arnout will correct me if I have got it wrong!
Best,
Beth

Similar Messages

Spry Widget Sliding Panel

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.
Attached, please find the code.

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=

Set Default Spry Tabbed Panel As Close Until Mouse Over

Dear All,
Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
How to fix??
Below is my SpryTabbedPanel.js
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
   this.defaultTab = 0;
else
   var count = this.getTabbedPanelCount();
   if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.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.TabbedPanels.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.TabbedPanels.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.TabbedPanels.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.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
   return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
   return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
   if (ele == arr[i])
    return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.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.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
   var child = root.firstChild;
   while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
     tabIndexEle = node;
     return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
     tabAnchorEle = node;
   return false;
if (tabIndexEle)
   this.focusElement = tabIndexEle;
else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
if (this.focusElement)
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
   if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);

You may be better off asking this question over at the forum dedicated to the Spry Widgets:
Spry forum.

Seperating Spry Tabs and Panel.

I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
I posted the same message here: http://forums.adobe.com/message/2694106
But because no one awnsers to it, and i believe it IS possible to alter the Spry code so it works in a seperate way im posting this as a new topic.
I have a site already and hate to change everything just because i like to use Spry tabbed panels.
I now have this set up with div floats.
HEADER
MENU CONTENT
FOOTER
I already have this working code in the Menu div. The buttons work and the code is ready for Spry if i get the seperate content working.
<div id="WNavigation">
         <div id="TabbedPanels1" class="VTabbedPanels">
            <ul class="TabbedPanelsTabGroup">
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Home">
          <a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
          <table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Info">
          <a href="/Info.html" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
          <table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Gallerij">
          <a href="/gallerij.html" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
          <li class="TabbedPanelsTab" tabindex="0">
          <style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
          <table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Contact">
          <a href="/Contact.html" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
        </ul>
        </div>
     </div>
I put animated buttons on it. And if i ever get the seperate Content div working i need to change the links to open the panel instead of a normal URL.
What i want to do next is put the TabbedPanelsContent into the Content div instead of the Menu div.
But everything i tried didnt work out right.
The TabbedPanelsTabGroup is now completly in the Menu div and i wish someone can post alternate code that i can put in the Content div.
So i am not using this code right now: (my page works without it for now)
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Please let someone make the content and tabs seperate!!!

WRobN1 wrote:
I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
In a previous post I did say that you cannot separate the tabs from the panel. By that I really meant that you must keep the structure, including ID's and CLASSes as follows for the widget to work in its standard format.
<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">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
If you want to use the DIV <div id="TabbedPanels1" class="TabbedPanels"> as your mainContent area, UL <ul class="TabbedPanelsTabGroup"><div class="TabbedPanelsContentGroup"> as your menu and DIV as your content area, then that is OK.
Using style rules you can style the tabs as you wish as well as the content area. You can move the content area down from the tabs using the following style rule
.TabbedPanelsContentGroup {
   margin-top: 150px;
As said, it does not matter how you style the widget, the structure must stay intact.
WRobN1 wrote:
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr><td style="padding-right:0px" title ="Home"><a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td></tr></table></li>
When you do use the mark-up as above, please remember that by definition the <STYLE>-tag must be within the <HEAD>-area and try to use DIV's, SPAN's etc instead of using tables.
I hope the above helps.
Ben

ANN: Linking to non-default Spry tab or panel - tutorial

Spry 1.6 includes a file called SpryURLUtil.js that makes it
easy to
link to a specific tab or panel in a Tabbed Panels or
Accordion widget.
I've created a step-by-step tutorial explaining how to use
it. You can
find it on my site at the following URL:
http://foundationphp.com/tutorials/spry_url_utils.php
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

That should be built in, as it is in all PVII Widgets.
Being how Spry has grown to be such an important part of your
books and
other writings, perhaps you would agree (and maybe even be
able to influence
Adobe) that what Spry needs is a re-writing rather than
updates.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"David Powers" <[email protected]> wrote in message
news:fokosr$l1e$[email protected]..
> Spry 1.6 includes a file called SpryURLUtil.js that
makes it easy to link
> to a specific tab or panel in a Tabbed Panels or
Accordion widget. I've
> created a step-by-step tutorial explaining how to use
it. You can find it
> on my site at the following URL:
>
>
http://foundationphp.com/tutorials/spry_url_utils.php
>
> --
> David Powers, Adobe Community Expert
> Author, "The Essential Guide to Dreamweaver CS3"
(friends of ED)
> Author, "PHP Solutions" (friends of ED)
>
http://foundationphp.com/

Setting dynamic Spry tab

Can anyone tell me how to target a specific Spry tab from an
external link?

This is the correct answer - thanks. - searched all day for this
In the head JS tag add the following after
var dsCities = new Spry.Data.XMLDataSet("xml/{dsStates::url}", "state/cities/city");
var statenum = 20; // Sets dsStates to the 21st node value = MA Massachusetts - observer will default the dsCities to massachusetts.xml
// add an array search to return the index for statenum
dsStates.addObserver({ onDataChanged: function(ds, type) { dsStates.setCurrentRowNumber(statenum); } });
There should be a a cookbook on SPRY of popular needed functions - the samples are fragments but it takes a lot of work, the hard way to learn and piece it together..

Spry Tabs + Collapsable Panels

Hello,
I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
Thanks, here's my example:
http://www.robvanwyen.com/cv/rfblair/
Best,
Rob

V1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!!

Multiple Spry tabbed panels?

Is it possible to have more than one set of Spry Tabbed
Panels .css rules, i.e., with different rules within the same web
site?
I'd like to have tabbed panels with differing heights or
widths, but if the dimensions (and, obviously, other rules) are
changed for one panel, it changes them for all panels within the
web site.

I would like to digg up this old post if possible and really looking for an answer asap!
Unfotunately the answer given here was pretty poor and didntreally help, hence the reason the user I believe went else where and got a simpler and more in depth answer in a non techie jargon from asktheecpers.com.
Anyway, my problem is slightly different but must be possible!!
I have one tabbed panel, but I have a fairly complex slanted tabs menu, I have done well so far to get it to work, however the final step I need to apply a slighly diffent hover class to on eof the tab items (the first one in the list has a flat left edge and not a slanted.)
The selcted and initial states are fine as I have applied a different class and therefore can apply a different image, however the hover class is applied dynamic throughthe JS (not my area of expertise!!) and so I need to create a 2nd hover class to apply to different list items within the same tabbbed group??
Please, please help!!
Regards,
Ryan.
Problem can be seen here, its the first tab that is the problem, its hover needs to be a different image (blue with straight left edge)
http://doosan.corporateprm.com/
Thanks

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

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

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>

Sliding Panels options

Hi, i'm building a sliding panels widget inside a
spry:region, and i wish to set options for it like duration and
defaultpanel but since the options must be inside brackets {} spry
interprets it as a data reference.... how can it set options for
this sliding panels widget, avoiding the spry interpretation of the
constructor code?

Adding spaces within the constructor brackets will solve it.
{ defaultPanel:3 }

Help with spry tabbed menu bar

Hi.
I need help with the spry tabbed menu panel (horizontal) It
works fine in dreamweaver ( pressing f12 ) but when i goto my
website www.so-nouveau.com it puts it all over and not in boxes
either just the writing.
I ahve double checked all uploading is correct and files are
located but it wont work.
Here is what i did >
new> html> 1 column elastic,centered. i have not
changed any other settings at all. Do i need to change the doc type
or css layout in the drop down menus before starting (doc
type=xhtnl 1.0 transitional and layout css=add to head)
I am still on cs3 , does this matter ? or is 4 easier ?
any help out there guys is much appreciated but please bear
in mind that i am not a web designer or pc expert at all , this is
just me building my own site , until nowit has been an enjoyable
experience but grrrrrr when it dont work
Thanks
Jay

so-nouveau wrote:
> Hi.
> I need help with the spry tabbed menu panel (horizontal)
It works fine in
> dreamweaver ( pressing f12 ) but when i goto my website
www.so-nouveau.com it
> puts it all over and not in boxes either just the
writing.
Please post links directly to the page having an issue. I saw
no tabs on the home page, but I noticed that there is a link on the
bottom of the page to this page that has a Spry tab on it:
http://www.so-nouveau.com/test%208.html
> I ahve double checked all uploading is correct and files
are located but it
> wont work.
That page refers to a Spry JavaScript file and a Spry CSS
file, which should be at the following locations but are not
present:
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.js
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.css
Make sure you upload the SpryAssests folder and see where
you're at after that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Formatting Spry Tabs to start from left to to right

I'm currently working for Arabic version of a webpage, the menus and other contents should start from right to left. Does anyone who know how to set the Spry Tabs to start the tabs from left to right?
Thanks,
Mylyn

Add the following to your document
<style>
.TabbedPanelsTab {
float: right;
</style>
Gramps

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.

Multiple sets of Spry Tabbed Sliding Panels?

Similar Messages

Maybe you are looking for