Spry Tabbed Panels navigation

I am using Dreamweaver CS4 to create pages with both tabbed panels and accordian sets. I would like to "remember" which panel I was in when I navigate away from the page and then return to it using the "Back button on the browser. In some cases I have set the page to open to a specific panel instead of the default panel (0) when I navigate away from that page the back button on the browser takes me to the specific panel opened and not the last panel visited. In both cases I want to be able to return to the last panel visited and not to the default panel.

Hi Beth,
The older I get, the less I have to say (this ensures that I do not get into trouble) and the more I write down (memory starting to fail).
This particular reference I wrote down because our mutual aquaintance going by the name of Arnout Kazemier still keeps producing excellent articles that would otherwise be forgotten.
Come to think of it, thank you for broadcasting Learn to use the Spry framework for Ajax.  Maybe the above article should be mentioned in the online learning document.
Ben

Similar Messages

  • Spry Tab Panel is not working properly on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Hi
    Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
    The images have not been uploaded at all, the online CSS is the one without a link to the images
    Regards
    Adaan Pre-Media Services
    For more image editing services follow us @
    web designing services

  • 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

  • Remote Server doesn't display SPRY Tabbed Panel

    I'm using DW CS4.  I inserted a SPRY Tabbed Panel in the main page for navigation.  The local development and testing server displays the Panel, but the remote server (Go Daddy) does not.  All of the data from the panel is displayed in one log page without the tab feature.
    The site's address is:  mailbox.mikeklonecki.com
    I saw a couple of other posts for a slideshow error using SPRY in DW, but this seems to be different behavior.  I don't get an error, rather the panel just doesn't display.
    Any feedback would be greatly appreciated.  Thank you in advance.

    I apologize.  I found my answer.
    Two required files (one .js and one .css) were not loaded into the right folder, so the page didn't have access to them.  After re-locating the files, the Tabbed panel works just fine.
    Please disregard the inquiry.

  • Spry Tabbed Panels Keep Shifting

    I have built a page using the Spry Tabbed Panels. I have one
    set inside of another. The problem is when you click a main tab and
    then a secondary tab and then roll over the main tabs again the
    width changes on the secondary tab. I have no idea why it does
    this. Here is the link:
    http://www.pco2.com/v/vspfiles/downloadables/spry/Tabbed_Page_3.html
    Thanks in advance.

    I would have to say that I am not sure it is a good idea to
    be using the tabs spry function as a navigation system. It is not
    what it was intended for. This puts your entire web site on one
    HTML page. If you lots of images, this could be a rather large
    download. Downloading an entire web site before you can see just
    one page is not very efficient. You are better off, IMHO, to use
    the SPRY tabs sparingly and where they are conducive to the content
    and not as site navigation.
    My $0.02

  • 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

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

  • 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

  • Spry Tabbed Panel Defaults to home page with recordset paging

    I have Spry ver. 1.6.1.  A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6)  accesses a mysql database and shows the records in a table format.  Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page.   I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5;  It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed.  The user then has to click on Tab 6  to view the new results.  The url where this can be viewed is at http://Training.reliantair.com.  Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
    I want to avoid putting another  button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
    Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?

    I didn't try the cookie method suggested.  The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
    In the Head of the HTML document I put this code.  It searches for the query string in the HREF when any of the record paging buttons is pressed.
    <script type="text/javascript" src="SpryURLUtils.js"></script>
    <script type="text/javascript">
    var params = Spry.Utils.getLocationParamsAsObject();
    if (location.href.indexOf("GetChkRideRecs") != -1  && location.href.indexOf("tab") == -1)
      location.href +="&tab=5#TabbedPanels1"; 
    </script>
    Then in the body of the HTML document at the bottom of the page  the tabbed panel widget is changed like this:
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
    The first time a recordset paging link is  clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF.  Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found.

  • Spry Tabbed Panels overwritting popup menu in IE6 and IE7 but display fine in Firefox

    I am new to Spry and Dreamweaver CS3 and would appreciate any
    help anyone can give. I am having an issue with Spry Tabbed Panels
    appearing above a navigation bar pop up menu only in IE6 and IE7.
    Everyhting works like expected in FF. I have several product pages
    that are exhibiting the same issue. I am not having this issue when
    using Spry Accordian. Would someone be able to educate me on what I
    can do to fix this problem. One of the product pages that is
    exhibiting this problem is
    Page
    with display issue

    The IE browsers implement z-indexing differently than most
    browsers ... specifically, IE browsers establish a new z-index
    context if you set the position CSS property of an element to
    anything other than static.
    What this means is that if you set something to
    position:relative ... any z-index values of children inside that
    element will be relative to that element.
    In your case, you seem to have a position relative on your
    div FWTableContainer1966866324. If you set the z-index value to
    something like 10, you'll notice that it fixes the problem.
    --== Kin ==--

  • Spry Tabbed Panels bug

    I am having an issue with the spry tabbed panels on my
    website.
    http://www.roxbury.org. On the
    intial page load, all of the sub menus appear for a few seconds and
    then only the active one appears like it is supposed to. When
    creating a new page from template, the preview also shows all of
    the sub menu contents but when I open the page, it looks fine.
    It doesn't appear to happen when navigating to other pages,
    just on the index page of the site.
    Any clues? My boss wants to can all adobe features which I do
    not want to do so please help with a fix.

    roxwebmaster wrote:
    > I am having an issue with the spry tabbed panels on my
    website.
    >
    http://www.roxbury.org. On the
    intial page load, all of the sub menus appear
    > for a few seconds and then only the active one appears
    like it is supposed to.
    > When creating a new page from template, the preview also
    shows all of the sub
    > menu contents but when I open the page, it looks fine.
    >
    > It doesn't appear to happen when navigating to other
    pages, just on the index
    > page of the site.
    Checking the code, it seems that the first page doesn't set a
    defaultTab option, which the others do, so perhaps set the
    defaultTab to 0 for the home page. Or you could try moving the
    constructor code so that it is immediately after the tab panel HTML
    code rather than at the bottom of the page.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Spry tabbed panels broken

    hi there, my mom is an awesome little website designer with
    dreamweaver cs3, but her tabbed panels broke the other day. she was
    in the layout view, and deleted and re-entered a date. after that,
    her panels "gracefully degraded" into just being blocks on top of
    each other, and the navigation stopped working.
    i told her she probably just accidentally deleted some
    javascript or css that the spry tabbed panels needed, but i don't
    know where to look in the code. can anyone help me? i looked for
    other answers in this forum, but the adobe search engine is
    actually broken right now! thanks!
    PS: could this be a dreamweaver cs3 bug or did my mom really
    mess up the code? i included almost all of the code in the page, i
    just took most of the page's text.

    thanks snake eyes! here is the css code, i can also paste the
    javascript code if that helps. it's spry 1.4.
    @charset "UTF-8";
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%;
    float: left;
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    color: #999966;
    background-color: transparent;
    border: 1px solid #999966;
    .TabbedPanelsTabHover {
    background-color: #CCC;
    .TabbedPanelsTabSelected {
    background-color: #999966;
    border-bottom: 1px solid #EEE;
    color: #FFFFFF;
    font-weight: bold;
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    background-color: transparent;
    .TabbedPanelsContent {
    padding: 4px;
    .TabbedPanelsContentVisible {
    .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;

  • Customizing Spry Tabbed Panels

    I am trying to create my very first spry tabbed panel. I have
    a 5 tab panel. Instead of plain text on a colored background, I
    would like to have customized tabs with the text already on them,
    along with a "on mouseover" version. I am actually using it as part
    of my navigation.
    My CSS skills are still young, but in studying the
    sprytabbedpanels.css that dreamweaver automatically creates, it
    appears that there are about 9 class properties all starting with
    .tabbedpanels. It seems to be an all or nothing, so am I correct in
    assuming that if I want to have each of my tabs to be "unique" that
    I need to create 4 more "sets" of these classes? Are there just
    specific ones that I would need?
    I can't find anything online or in my dreamweaver bible to
    help me make heads or tails. Any help or insight would be most
    appreciated.
    Bonnie

    Hey Bonnie -
    .TabbedPanelsContent is
    the class for the content within the tab panel component. If you
    want to change the color for each tab panel content for instance,
    you could duplicate
    .TabbedPanelsContent 5
    times and add a background color to each class. I think the
    suggestion you mentioned would create various styles for each tab
    state. Is that really what you wanted? Just making sure I
    understand the question. :)
    .TabbedPanelsContent1 {
    padding: 4px;
    background-color: #FF0000;
    .TabbedPanelsContent2 {
    padding: 4px;
    background-color: #999;
    .TabbedPanelsContent3 {
    padding: 4px;
    background-color: #CCC;
    .TabbedPanelsContent4 {
    padding: 4px;
    background-color: #CC9900;
    .TabbedPanelsContent5 {
    padding: 4px;
    background-color: #CC9900;
    }

  • More than one spry tabbed panels

    Hi,
    On my index page I have a tabbed panel with it own css (size,
    color, etc.)
    I would like to insert another tabbed panel on another page
    (tabbed panel2). I would like this to have its own css style
    (different size, color scheme, etc.)
    When I insert a spry tabbed panel in dreamweaver it
    automatically takes on the css of my original tab panel design! How
    can I let the second tabbed panel take on its own life, completely
    independent of the first one?
    Thank you.

    "chris.cavage" <[email protected]> wrote in
    message
    news:gnuk7l$hoj$[email protected]..
    > How can I let the second tabbed panel
    > take on its own life, completely independent of the
    first one?
    Create a second set of CSS rules for it. The easiest way is
    to make a
    copy of SpryTabbedPanels.css, and call it
    SpryTabbedPanels2.css. Link
    SpryTabbedPanels.css to the original page, and
    SpryTabbedPanels2.css
    to the page that you want to look different.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the 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>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

Maybe you are looking for

  • Memory problem with JTextFields

    Hello, I have a wierd problem with JTextField and the memory. I need to fill a JPanel with different Components (including JTextFields), then do some calculation, remove the Components and filling the JPanel again. When i so this too often my i get a

  • How to configure some of VMX file configurations / VM Configuration Parameters via vCloudDirector REST API

    Hi We need to configure some settings for VM using vCloudDirector REST API other wise which can be down in 2 following ways. 1. On VCenter -> select VM  ( in Power Off Mode ) -> Edit Settings -> Options -> Advanced -> General -> Configuration Paramet

  • Remove lines in Outgoing Payments

    Hi,     I'm trying to remove all the lines i add into the "Payment Means" any time that y return no load this screen...before creating the payment. is there an object to do this??? or i have to do this removing item by item navigating from the all th

  • Filter Interactive Report by a Hidden Column

    Hi, I would like to know if you can filter an IR by a hidden column?

  • Dual ISP connection unequal load balancing

    Hi All, I an issue regarding load balancing between to ISP.  I have done policy based routing as stated in other cisco discussions .  I have 2 /30 as my test ISP and isp ip configured on other switch while i have my customer configs on my end. I can