How to use Spry Tabbed Panels?

Hello, I made spry tabbed panels but I'd like them to work on
a rollover or mouseover instead of a click. Here's what I tried but
it didn't actually do anything. Do I have to edit the .js file?

jcafaro10 wrote:
> Hello, I made spry tabbed panels but I'd like them to
work on a rollover or
> mouseover instead of a click. Here's what I tried but it
didn't actually do
> anything. Do I have to edit the .js file?
I believe that you do have to edit the .js file to accomplish
what you're looking for. I think that a couple of folks have
already done this and have posted a thread/response in the Spry
forum, so I'd suggest searching that forum for mouseover or related
terms:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Similar Messages

How to use H1, h3, h4 etc when using Spry Tabbed Panels?

Hi folks,
I am using Spry Tabbed Panels 2 on my site as it's the only way I know to direct visitors to particular tabs with links.
Unfortunately I can't use any of my header tags because H2 is dedicated to the Spry tabs, and for some reason has also taken "ownership" o all H tags.
Is there another way to mark my headings accordingly without having them turn into tabs?
My site is at www.qtnz.co.nz/activities
Thanks in advance for advice,
Jo

To help you on your way, have a look at the following. Just copy and paste into a new document and view in your favourite browser.
<!DOCTYPE html>
<html>
<head>

<base href="http://ajax.googleapis.com/" />

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      // more information about how this works.
      $('#tabs').tabs();
</script>
</head>
<body>
<div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and
        images hosted on Google's AJAX APIs CDN.</p>
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <h1>YEAH!</h1>
      <p>My header!</p>
    </div>
    <div id="tab-3">
      
    </div>
</div>
</body>
</html>

Help Using Spry tabbed panel as a menu.

Thanks in advance to all who take the time to read and any assistance you can offer.
I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel. I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page. For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
HELP?
http://www.orange.k12.nc.us/ec/beta/default.html

Thank you Gramps - for your prompt and helpful response! Your solution absolutely fixed the problem I asked about.
If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page. Can you look at one more page and advise please??
On the "subpages" of this site, the same tabbed panel "fake menu" exists. I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me. I'm obviously missing something in the code to send the user back to the HOME page from these pages.
In the sample link below, you will be starting from a "subpage" of the site. Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.) Can I add something to that line of code to get them back to the home page?
Again... thank you!!
http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

Can I use Spry Tabbed Panels to create a multi page form?

I'm trying to setup a multi page form and have been unsuccessful using PHP Sessions.
Would it be possible to use the Spry Tabbed Panels in DW CS3 and divide the different sections of the form in the panels? My thought is to have the Form Element around the main Tab Div and the submit button at the end of the form. Would this work?
If so, is there a way to have a "Next" button that will activate the next Tab so that the user can easily tab through each form field and easily go to the next tab to help with usability?

Beth, thank you! I was able to get the tabs to advance using your suggested
on the right: "Next Panel"
<a href="#" onclick="TabbedPanels1.showPanel(2); return false;">Next Panel</a>
In order to make it more graphical, I added a Next Button as suggested in the "Open Tabs Programatically" info at http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
<button onclick="TabbedPanels1.showPanel(0)" >open first panel</button>
<button onclick="TabbedPanels1.showPanel('tabID')">open panel</button>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
When I add the above code, when I clicked on the Next Button, it would submit the form. After looking at the Text Code, I noticed the Button Code did not have the ;return false; in the code so once I added that, the buttons now work as I want them to.
Take a look at http://www.soleproductions.com/oakley/tabform.php
Now that I have the basic setup, I can begin to setup the actual Online Application.
Thanks again for everyone's help. I guess I was looking for the WISIWIG way to do it since I'm not very good at hand coding.

How can I create tabbed panels using Dreamwaever CC, similar to Spry version available in CS6?

I used Spry tabbed panels in a site. Need to recreate that page on another site using Dreamweaver CC. CC has no Spry components anymore. Can anyone suggest a 3rd party product or alternative method to make similar panels in a page without having to hand code html-css-java?

Haven’t begun to try it yet. Looking at some tutorials.
But I appreciate the heads up.
Bill Liedlich
TerraGroup Corporation
Tactical Water Purification Systems
Po Box 8839
Allentown, PA 18105 USA
p 610-821-7003
f 610-821-7025
[email protected]
[email protected]<mailto:[email protected]>
www.tacticalwater.com<http://www.tacticalwater.com/>
CONFIDENTIALITY NOTICE: This electronic mail transmission, its contents and any attachments to it, are privileged and confidential, and/or may contain legally privileged and confidential information and is intended only for the review of the party or parties to whom it is addressed. Any dissemination, distribution, copying or forwarding of this message, its contents or attachments to other than the intended recipient(s) is strictly prohibited. If you are not one of the intended recipients, or have received this transmission and its contents in error, please immediately return it to the sender. Unintended transmission shall not constitute a waiver of any "Confidentiality Notice" privilege.

Spry Tabbed Panels- Open link on click

I am completely new to Dreamweaver and web design in general so please bear with me. I have created a tab menu using Spry Tabbed Panels but dont know how to make it so once a tab has been clicked an html file (ex. tab1.html which is saved on my computer) opens in the content portion, not open a new window.Can anyone post a tutorial or if its simple enough, post some directions?
Any help would be appreciated!

Spry Tabbed Panels are not a "menu" per se, but a series of panels, all but one of which remain hidden until their tab is clicked. Tabbed Panels is a Spry "disclosure" widget. All the content may actually exist on the same page as the Tabbed Panels widget, or you can use <iframe></iframe> to 'surface' other pages in your Tabbed Panel Content divs.
As it sounds as if you want to use the <iframe> approach, here's how:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">First Panel</li>
    <li class="TabbedPanelsTab" tabindex="0">Second Panel</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">This is the content of the first panel <br /><iframe src="heirloom.html" width="100%" height="800" frameborder="0"></iframe></div>
    <div class="TabbedPanelsContent">This is the content of the second panel <br /><iframe src="data.html" width="100%" height="500"></iframe></div>
</div>
</div>
You can also omit the frameborder="0" if you want to keep the default look of an iframe. Remember to give both a height and a width to your iframes. Test them in several different browsers (or BrowserLab) to make sure they look the way you want.
Beth

Spry Tabbed Panels mangled by IE

I have struggled -- and failed -- to figure out why IE mangles my Spry Tabbed Panel code even though the same code is rendered perfectly by Firefox, Safari, and Dreamweaver's Live View. If you think you can help me out, please take a look at the affected web page:
www.mulinosultevere.com/panoramic_tab.htm
using Firefox and/or Safari and then look at it using IE. The source code, of course, is available for you to view. I would appreciate any suggestions as to how I can get IE to render the code as the other browsers do. I assume that the problem on IE has something to do with my effort to use the very long photo.since the web page snaps back into the proper position when the second tab panel is activated.
Only the web page provided currently uses Spry Tabbed Panels. The rest of the website is live using only rollover menus. I want to upgrade the website with tabbed panels, but they have to work properly in IE, of course.
Thanks for any help you can provide.
-- Bill

Thanks, Helpvid, but I don't think that is the problem. I already know that IE has to be "kicked" to start Javascript. However, if you look at my web page -- www.mulinosultevere.com/panorama_tab.htm -- you will see that IE is, in fact, recognizing the Javascript because the second tab panel is rendered correctly. My problem is with the first panel that has the very long photo. Apparently there is a problem with the Javascript/html code itself. I am still looking for a solution :-( .
Ciao!
-- Bill

Spry Menus on Spry Tabbed Panels?

Hi,
I'm designing a site that has major tabs at the top, each of which takes the visitor to an appropriate section of the site... each with a default section overview page and a horizontal nav menu that's appropriate for that section. (This design is similar to going to a site like AT&T and clicking on top tabs for Home, Small Business or Enterprise. Once you've done so, the menu below then presents links appropriate to the Home, Small Business or Enterprise products.) I've been trying to implement this by putting instances of Spry Menus in Spry Tabbed Panels within the TabbedPanelsContentGroup div. Specifically, I have the MenuBarHorizontal class is each TabbedPanelsContent div/class.
I have the basic layout working, but the wiring is mystifying me. Clicking the various tabs indeed presents the correct corresponding menus. But I also need to figure out how to make clicking a section tab go to the section overview page (which happens to also correspond the first menu item, "Overview", in each section). There's no real <a href> kind of option that's apparent in conjunction with the TabbedPanelTabs in the TabbedPanelsGroup. Is there a way to force a particular page to display when switching tabs? Or am I trying to use the wrong tool for the job and there's a better technical approach to implementing this design?
I've tried David Powers' blog entry re "Opening Specific Tabs and Panels from Another Page" (http://foundationphp.com/tutorials/spry_url_utils.php), but it describes exactly what the title implies.
Thanks!
Jeffrey

Hi, Jeffrey,
I think I'm going to need to diagram this out!
Let's see...when you say "major tabs at the top" are you referring to a separate MenuBar or are you speaking of Spry Tabbed Panels?
You of course realize that if you are speaking of Spry Tabbed Panels, that EVERYTHING on the panels is on one page. If that is your main organization, yeah, it's a little hairy.
Now, if you have a "normal" one-level set of nav buttons that each takes you to a page that contains a set of Tabbed Panels for that "department," that will get you where you need to be without quite as much mind-blowing follow-the-wire through the wall hijinks, if you know what I mean.
Here is a site that I put together using Spry Tabbed Panels: http://www25.uua.org/uuhs/index.html Although the top "tabs" nav looks like Tabbed Panels tabs, the Tabbed Panels don't start until you get inside the site, and there I use Vertical tabs (on the left side) and on the Panels have put lots of Spry Accordions.
By using this technique, you have an effective "landing page" on each "department" linked to with the top navigation buttons.
Best of luck, and watch out for short-circuits!
Beth

Contact form with Spry 'Tabbed Panels' and 'Validation TextField'

Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you!

Hello
I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
5. If it doesn't do either of these, how could we make it do that?
I hope to hear from you!

Spry tabbed panels as menu system

Hi,
This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// 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.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.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.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
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.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
   var el = false;
   if (key == this.previousPanelKeyCode && i > 0)
    el = tabs[i-1];
   else if (key == this.nextPanelKeyCode && i < tabs.length-1)
    el = tabs[i+1];
   if (el)
    this.showPanel(el);
    el.focus();
    break;
return this.cancelEvent(e);
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) { self.onTabClick(e, tab);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);
})(); // EndSpryComponent

Note - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
    -moz-user-select: none;
    background-color: #000000;
    border-color: #000000;
    border-left: 0 solid #000000;
    border-style: solid;
    border-width: 2px 0 0;
    cursor: pointer;
    float: left;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    height: 15px;
    list-style: none outside none;
    margin: 0;
    padding: 4px 18px;
    position: relative;
    top: 0;
Don't use dummy text without normal length text with breaks

Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver

I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?

<!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>LEAP 2 GROW</title>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
    <h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
    </h1>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="volunteer.html">VOLUNTEER</a> </li>
      <li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
      <li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
    </ul>
</div>
<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="mission.html">mission/overview</a></li>
          <li><a href="ourteam.html">OUR team</a></li>
        </ul>
      </li>
      <li><a href="problem.html">THE PROBLEM</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
        <ul>
          <li><a href="solution.overview.html">overview</a></li>
          <li><a href="solution.structure.html">structure</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
        <ul>
          <li><a href="parentcollege.html">parent college</a></li>
          <li><a href="mentor.html">MENTOR program</a></li>
          <li><a href="farming.html">urban farming</a></li>
          <li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
        <ul>
          <li><a href="location.fulton.html">fulton county ga</a></li>
          <li><a href="location.haiti.html">haiti</a></li>
          <li><a href="location.tribe.html">native american tribe</a></li>
        </ul>
      </li>
      <li><a href="news.html">NEWS|RESOURCES</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
      <li><a href="#">DONATE</a></li>
    </ul>
</div>
<div class="style3" id="mainContent">
    <div align="left" class="style4">
      <p class="style5">MENTOR PROGRAM</p>
      <div id="TabbedPanels2" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
          <li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
          <li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
          <li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <blockquote>
              <p><em>“Those who have the ability, have the responsibility”</em></p>
              <p><u>Avenue of attention:</u> <strong>                        MENTOR PROGRAM</strong> <br />
                Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
              <p>Two levels of involvement: </p>
              <ol>
                <li>High School Academic Mentors</li>
                <li>Community-Leader Mentors</li>
              </ol>
              <p><u>Program title:</u>                         <strong>Talent 2 Kids</strong> </p>
              <p><u>Why Program Important</u><strong>:</strong> </p>
              <ol>
              <ul>
                <li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
                <li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
                <li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
              </ul>
            </blockquote>
          </div>
          <div class="TabbedPanelsContent">Content 2</div>
          <div class="TabbedPanelsContent">Content 3</div>
          <div class="TabbedPanelsContent">Content 4</div>
          <div class="TabbedPanelsContent">Content 5</div>
          <div class="TabbedPanelsContent">Content 6</div>
        </div>
      </div>
      <p> </p>
    </div>
    <p> </p>
    <p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
      <tr>
        <td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
        <td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
        <td><div align="center"><a href="farming.html">urban farming</a></div></td>
        <td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
      </tr>
    </table>
    <p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
    </div>
</div>
<script type="text/javascript">

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

Spry Tabbed Panels: Issue in Safar 4

I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.

I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone.

Spry Tabbed Panels position customization

The default position for Spry Tabbled content panels is to render below each tab when each tab is clicked. However I would like the content panels to render above the tabs, so that the tabs are positioned below the content panels. I cannot figure out how to do this. Can anyone help?
Thanks, Dave

Hopefully this helps you: http://blog.extensioneering.com/2008/07/how-to-create-spry-tabbed-panels-with.html
I was searching for help getting the content below my tabs to shove down and found this before I found your question!

Spry Tabbed Panels acting up!

I am using Dreamweaver CS6
I am using Spry Tabbed Panels and would like to add two tabs. From the properties page, I use Panels + to add the second tab.
I name the tab, then I go to split view to see what I did. I notice there is a content 2 that appears, but when I go back to see
the properties page, under panels, I see the first tab showing the name it should be, the second tab says the following: <missing content panel>
If I go to split view and look at the code, I see this:
<div id="apDiv9">
            <div id="TabbedPanels2" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">PayStation</li>
                <li class="TabbedPanelsTab" tabindex="0">IP Settings</li>
</ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent"> <br/>
                  <br/>
PayStation is the first tab
IP Settings is the second tab
I don't understand why it is saying missing content panel???
Thank you,
Neil

Don't use Absolute positioning in primary layouts. It's completely unnecessary for this and will actually do more harm than good.
Use this in your CSS:
body {
width: 1000px; /**adjust page width as desired**/
margin: 0 auto;
font-size: 62.50%;
font-family: arial, helvetica, sans-serif;
table {
border: 1px solid #000;
width: 30%;
float:left;
margin-right:3%;
font-size: 12px;
table caption {font-size: 24px}
==============
HTML:
<table><caption>SALES</caption>
<tr>
<td>something here </td>
<td>something here </td>
</tr>
</table>
<table><caption>EQUIP. STATUS</caption>
<tr>
<td>something here </td>
<td>something here </td>
</tr>
</table>
<table><caption>TIME/DATE</caption>
<tr>
<td>something here </td>
<td>something here </td>
</tr>
</table>
Nancy O.

Blog in Spry Tabbed Panel

I am a bit of a Dreamweaver novice but have created a website for a friend.
The website uses Spry Tabbed Panels.
My friend has an existing blog on their website, dating back to 07 which is run via Word into Contribute, or maybe straight into Contribute.
On the new page for the blog, I wish there to two spry tabbed panels - 1) The current month's blog entries; 2) Blog archive
What is the best way to do this, or are there any better/simpler solutions?
Many thanks.

That works, but it in my case, I really would like the video
to autoplay when the tab page is selected. Is there something I can
add to the script that would make it work the same way in IE as in
Firefox (Firefox works correctly with autoplay enabled).
Basically, I have a Spry TabPage titled "Installation Video".
When users select this tab they shouldn't then have to also select
the play button to start the video.
Otherwise, is there a modification I can make to the script
that disables autoplay if the browser is IE vs Firefox.

How to use Spry Tabbed Panels?

Similar Messages

Maybe you are looking for