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.

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 display

    I have Spry Tabbed panels and all my content is suddenly displaying in the first, default tab.  Also, the turquoise "Spry Tabbed Panels" is missing from the top of my widget. This has happened on three different pages so far, and all I have found is that I must insert a new tabbed panel.  My <div> codes all match up, so I'm stumped.  Any help would be really appreciated.

    Source Code in this post
    <!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"><!-- InstanceBegin template="/Templates/base_template.dwt" codeOutsideHTMLIsLocked="false" -->
        <head>
        <!-- InstanceBeginEditable name="doctitle" -->
        <title>BCCA Library - Abstracts</title>
        <meta name="Description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
        <!-- InstanceEndEditable -->
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
        <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
        <!-- InstanceBeginEditable name="head" -->
        <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
        <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
        <!-- InstanceEndEditable -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- InstanceParam name="Content Left" type="boolean" value="true" -->
        <!-- InstanceParam name="Content Right" type="boolean" value="true" -->
    </head>
        <body>
            <div class="bannerArea">
          <div class="container">
                    <div class="bannernav"><a href="http://www.bccancer.bc.ca/" target="_blank" >BC Cancer Agency</a> &bull; <a href="http://POD" target="_blank" >POD</a> &bull; <a href="http://www.phsa.ca" target="_blank" >PHSA </a>&bull; <a href="mailto:[email protected]?subject='Contact Us' from Library Links" >Contact Us</a></div>
                    <div class="toplogo"><a href="index.html" target="_parent"><img src="images/liblinks_infobase.png" alt="Library Links Home Page" hspace="135" border="0" /></a></div>
                    <div style="clear:both;"></div>
              </div>
        </div>
            <div class="topnavigationArea">
                <div class="container">
                    <div class="topnavigationgroup">
                        <ul id="MenuBar1" class="MenuBarHorizontal">
                          <li><a href="databases.html" class="MenuBarItemSubmenu">Databases</a>
                            <ul>
                              <li><a href="databases.html">All Databases</a></li>
                              <li><a href="remote.html">Remote Access</a></li>
                              <li><a href="mobile.html">Mobile Resources</a></li>
    <li><a href="training_bcca.html">Training</a></li>
    <li><a href="autoalerts.html">AutoAlerts</a></li>
    <li><a href="primal.html">Primal Pictures</a></li>
                            </ul>
                          </li>
                          <li><a class="MenuBarItemSubmenu" href="journals.html">Journals</a>
                            <ul>
                              <li><a href="journals.html" class="MenuBarItemSubmenu">Journals</a>
                                <ul>
                                  <li><a href="http://atoz.ebsco.com/home.asp?Id=BCCA230F" target="_blank">BCCA A-Z e-journals</a></li>
                                  <li><a href="http://bcca.andornot.com/results.aspx?TN=bccacat&QY=find%20(Format%20ct%20Serial)%20not%20 (Status%20%3DDiscarded%20%2F%20%3DMissing)%20and%20(Location%20ct%20library)&RF=WebBriefDa te&DF=WebFull&BU=http%3A%2F%2Fbcca.andornot.com%2Fdefault.htm&MR=10&NP=255&RL=0&DL=0&MF=bc cawpmsg.ini&AC=QBE_QUERY" target="_blank">Print Journals BCCA</a></li>
                                  <li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
    <li><a href="mailto:[email protected]?subject=Request articles" title="Request articles from BCCA Library">Request Articles</a></li>
                                </ul>
                              </li>
                              <li><a href="ebooks.html">E-books</a></li>
                              <li><a href="abstracts.html">Abstracts/Conferences</a></li>
                              <li><a href="remote.html">Remote Access</a></li>
                              <li><a href="mailto:[email protected]?subject=Request articles">Request Articles</a></li>
                            </ul>
                          </li>
                          <li><a href="refworks.html">RefWorks</a></li>
                          <li><a href="catalogues.html" class="MenuBarItemSubmenu">Catalogues</a>
                            <ul>
                              <li><a href="catalogues.html">Catalogues</a></li>
                              <li><a href="http://bcca.andornot.com/" title="BCCA Library Catalogue" target="_blank" class="MenuBarItemSubmenu">BCCA</a>
                                <ul>
                                  <li><a href="http://bcca.andornot.com/topics.htm" title="Automated Searches" target="_blank">Popular Topics</a></li>
                                  <li><a href="ebooks.html" target="_blank">E-books</a></li>
    <li><a href="http://tinyurl.com/4jmvwpn" title="Books added this month" target="_blank">BCCA New Books</a></li>
                                </ul>
                              </li>
                              <li><a href="http://library.ubc.ca/" title="UBC Library Catalogue" target="_blank" class="MenuBarItemSubmenu">UBC</a>
                                <ul>
                                  <li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
                                  <li><a href="http://webcat2.library.ubc.ca/vwebv/searchBasic/" title="UBC Books &amp; more" target="_blank">UBC Books</a></li>
                                  <li><a href="http://services.library.ubc.ca/borrowing/library-cards/" target="_blank">UBC Library Cards</a></li>
                                  <li><a href="http://www.it.ubc.ca/cwl/homelink.shtml/" title="Campus Wide Login" target="_blank">Campus Wide Login</a></li>
                                  <li><a href="http://www.library.ubc.ca/home/proxyinfo/" title="Connect from Home" target="_blank">VPN / EZ Proxy</a></li>
                                  <li><a href="mailto:[email protected]?subject=Request Articles" title="Request from BCCA Library">Request Articles</a></li>
                                </ul>
                              </li>
                              <li><a href="http://library.sfu.ca/" title="SFU Library Catalogue" target="_blank">SFU</a></li>
                              <li><a href="http://www.bcit.ca/library/" title="BCIT Library Catalogue" target="_blank">BCIT</a></li>
                              <li><a href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=nlmcatalog" title="National Library of Medicine Catalogue" target="_blank">NLM (U.S.)</a></li>
                              <li><a href="http://library.unbc.ca/" title="UNBC Library Catalogue" target="_blank">UNBC </a></li>
                              <li><a href="http://www.ubc.ca/okanagan/library/welcome.html" title="UBC Okanagan Library" target="_blank">UBC Okanagan</a></li>
                              <li><a href="http://library.uvic.ca/" title="U Vic Library Catalogue" target="_blank">U Victoria</a></li>
                              <li><a href="http://www.vpl.ca/" title="Vancouver Public Library" target="_blank">Vancouver Public </a></li>
                            </ul>
                          </li>
                          <li><a href="professional.html" class="MenuBarItemSubmenu">Professional Practice</a>
                            <ul>
    <li><a href="abstracts.html">Abstracts/Conferences</a></li>
    <li><a href="admin.html">Administration</a></li>
    <li><a href="guidelines.html">Cancer Guidelines</a></li>
                              <li><a href="nursing.html">Nursing</a></li>
                              <li><a href="nutrition.html">Nutrition</a></li>
                              <li><a href="pharmacy.html">Pharmacy</a></li>
                              <li><a href="physicians.html">Physicians</a></li>
                              <li><a href="psychosocial.html">Psychosocial</a></li>
                              <li><a href="rt.html">RT / Physics</a></li>
                              <li><a href="researchers.html">Researchers</a></li>
                              <li><a href="writers.html">Writing &amp; Authors</a></li>
                            </ul>
                          </li>
                          <li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training</a>
                            <ul>
                              <li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training Home Page</a>
                                <ul>
                                  <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
    <li><a href="training_ac.html">AC Training</a></li>
                                  <li><a href="training_csi.html" title="CSI Training">SAHCSI Training</a></li>
                                  <li><a href="training_fvc.html">FVC Training</a></li>
                                  <li><a href="training_vc.html" title="VC Training">VC Training</a></li>
                                  <li><a href="training_vic.html">VIC Training</a></li>
                                </ul>
                              </li>
                              <li><a href="https://edreg.cw.bc.ca/phsaedcalendar/Home.aspx" target="_blank">Learning Hub</a></li>
                              <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
                              <li><a href="primal.html">Primal Pictures</a></li>
                            </ul>
                          </li>
                          <li><a href="library.html" class="MenuBarItemSubmenu">Library Services</a>
                            <ul>
    <li><a href="#" class="MenuBarItemSubmenu">Contacts &amp; Info</a>
      <ul>
    <li><a href="../Documents/VC_Staff_Information_Sheet.pdf">VC - Vancouver</a></li>
    <li><a href="../Documents/VIC_Staff_Information_Sheet.pdf">VIC - Victoria</a></li>
    <li><a href="../Documents/SAHCSI_Staff_Information_Sheet.pdf">SAHCSI - Kelowna</a></li>
    <li><a href="../Documents/FVC_Staff_Information_Sheet.pdf">FVC - Surrey</a></li>
    <li><a href="../Documents/AC_Staff_Information_Sheet.pdf">AC - Abbotsford</a></li>
    <li><a href="../Documents/CN_Staff_Information_Sheet_Library.pdf">CN - Prince George</a></li>
    <li><a href="http://www.bccancer.bc.ca/PPI/Library/Contacts.htm" target="_blank">Library webpage</a></li>
      </ul>
    </li>
    <li><a href="mailto:[email protected]?subject=Request a Search" title="Request a Search">Request a Search</a></li>
    <li><a href="mailto:[email protected]?subject=Request Article(s)" title="Request Articles">Request Articles</a></li>
                              <li><a href="http://www.bccancer.bc.ca/PPI/RecommendedLinks/default.htm" target="_blank">Recommended Websites</a></li>
                              <li><a href="autoalerts.html" title="AutoAlert Searches">AutoAlert Searches</a></li>
                              <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
                              <li><a href="pamphlets.html" title="May need an install from IMIT">Pamphlets Database</a></li>
                              <li><a href="publications.html">Publications</a></li>
                              <li><a href="copyright.html" title="Copyright">Copyright</a></li>
                              <li><a href="patients_reading.html">What patients are reading</a></li>
                              <li><a href="patients.html" title="Services for Patients">Services for Patients</a></li>
                              <li><a href="archives.html">Archives</a></li>
                            </ul>
                          </li>
                        </ul>
    </div>
                    <div style="clear:both;"> </div>
                </div>
            </div>
            <div class="contentArea">
                <div class="container">
                <!-- InstanceBeginEditable name="Content Left" -->
                <div class="contentleft">
                  <h1>Abstracts and Conferences</h1>
                  <div id="TabbedPanels1" class="VTabbedPanels">
                    <ul class="TabbedPanelsTabGroup">
                      <li class="TabbedPanelsTab" tabindex="0"> AACR</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ASCO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ASH</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ASTRO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> CARO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ECCO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ESMO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ESTRO</li>
                      <li class="TabbedPanelsTab" tabindex="0"> ISPOR</li>
                      <li class="TabbedPanelsTab" tabindex="0"> San Antonio </li>
                      <li class="TabbedPanelsTab" tabindex="0"> UICC</li>
                      <li class="TabbedPanelsTab" tabindex="0"> Finding and Citing</li>
                    </ul>
                    <div class="TabbedPanelsContentGroup">
                      <div class="TabbedPanelsContent">
                        <h2>AACR - <a href="http://www.aacr.org/" target="_blank">American Association for Cancer Research</a></h2>
    <p>These abstracts are available in two places - from the <strong>AACR</strong> website and from the journal <strong>Cancer Research.</strong></p>
    <p> </p>
                        <p><strong>1. Cancer Research. 2009-present</strong>. </p>
                        <blockquote>
                          <p>These abstracts were  published in the journal <em>Cancer Research</em>. They can be downloaded from the journal to RefWorks.
                            Use Advanced Search at <a href="http://cancerres.aacrjournals.org/search" target="_blank">http://cancerres.aacrjournals.org/search</a>. 
                            Check the &quot;Search Only Meeting Abstracts&quot; box. You can also limit your search to April of the year you want.</p>
                          <p> </p>
                          <p><img src="images/AACR_search_meetings.jpg" alt="Search meetings" width="226" height="55" border="1" /></p>
                        </blockquote>
                        <h3>2. <a href="http://www.aacrmeetingabstracts.org/search.dtl" target="_blank">AACR online - <strong>2004-2010</strong></a></h3>
                        <blockquote>
                          <p>This online searchable database has the capability to download to RefWorks. </p>
                          <p> </p>
                          <p>Try to avoid using the sections called <em>Specify Journals to Search </em>and <em>Specify Meetings to Search</em>.                    They occasionally cause the search to fail without explanation.</p>
                        </blockquote>
                        <blockquote>
                          <p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
                        </blockquote>
                        <p><strong>3.</strong> <strong>1982-2004 </strong>(Volumes 23-45)</p>
                        <blockquote>
                          <p>The BCCA VC Library has print copies of  AACR abstract books. Some older versions may need to be retrieved from Storage.</p>
                        </blockquote>
                        <h3>AACR Education Book <a href="http://educationbook.aacrjournals.org/search.dtl" target="_blank">2005-current</a></h3>
                        <blockquote>
                          <p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
                        </blockquote>
                        <h3>RefWorks: Change Reference Type to 'Abstract'</h3>
                        <h3> </h3>
                        <p><img src="images/RW_abstracts.jpg" alt="Change the Reference Type" width="423" height="440" border="1" /></p>
                        <p> </p>
                        <h3>Webcasts of 2012 AACR Meeting</h3>
                        <p> </p>
                        <p><a href="http://www.aacr.org/page29436.aspx" target="_blank"><img src="images/AACR_2012_webcasts.jpg" alt="Webcasts from 2012 conference" width="325" height="180" border="1" /></a></p>
                        <p> </p>
                        <h3>AACR 2013</h3>
                        <p> </p>
                        <p><a href="http://www.aacr.org/home/scientists/meetings--workshops/aacr-annual-meeting-2013.aspx" target="_blank"><img src="images/AACR_2013.jpg" alt="AACR 2013" width="154" height="200" border="1" /></a></p>
                        <p><br />
                        </p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ASCO - <a href="http://www.asco.org/" target="_blank">American Society of Clinical Oncology</a></h3>
                        <p><br />
                          These  abstracts are available in two places - from the journal <strong>JCO</strong> and from the <strong>ASCO</strong> Conference website. </p>
                        <p> </p>
                        <h3>1. <a href="http://jco.ascopubs.org/search.dtl">JCO</a> - 2004-current </h3>
                        <p>These references can be downloaded to RefWorks. Restrict your search of JCO by ticking the box &quot;Specify Sources to Search&quot;:</p>
                        <blockquote>
                          <p><img src="images/asco_jco.jpg" alt="" width="411" height="79" /></p>
                        </blockquote>
                        <br />
                        <h3>2. <a href="http://jco.ascopubs.org/search.dtl" target="_blank">ASCO</a> - 2007-current</h3>
                        <p> This database is searchable, <strong>but you</strong> <strong>can't download to RefWorks</strong>. You may use copy and paste to add these abstracts to RefWorks.</p>
                        <blockquote>
                          <p><a href="http://www.asco.org/ASCOv2/Meetings/Abstracts" target="_blank">2007 - 2011</a><br />
                          </p>
                          <p> </p>
                          <p> </p>
                        </blockquote>
                        <h3>ASCO 2013 </h3>
                        <h3> <strong>May 31-June 4, 2013 | McCormick Place | Chicago, Illinois</strong></h3>
                        <p> </p>
                        <p><a href="http://chicago2013.asco.org/" target="_blank"><img src="images/ASCO_2013.jpg" width="366" height="260" /></a></p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ASH - <a href="http://www.hematology.org/" target="_blank">American   Society of Hematology</a></h3>
                        <h3><br />
                          Abstracts</h3>
                        <p>Published in <em>Blood</em>, these abstracts can be downloaded to RefWorks.</p>
                        <p><a href="http://abstracts.hematologylibrary.org/content/vol118/issue21/" target="_blank">2011</a></p>
                        <p><a href="http://abstracts.hematologylibrary.org/content/vol116/issue21/" target="_blank">2010</a></p>
                        <p><a href="http://bloodjournal.hematologylibrary.org/misc/ASH_Meeting_Abstracts_Info.dtl" target="_blank">2007-current</a></p>
                        <p><strong><br />
                          Hematology, </strong>the <em><strong>Education Program Book</strong></em>.<br />
                        </p>
                        <p><em><strong><a href="http://www.asheducationbook.org/contents-by-date.0.shtml" target="_blank">Hematology</a></strong></em> is published annually by the American Society of   Hematology (ASH) in one volume per year. The <em>Education Program Book</em> provides review articles from the Education Program from the  ASH Annual Meeting. In this book, each chapter relates to a session presented at the meeting</p>
                        <p> </p>
                        <p><a href="http://asheducationbook.hematologylibrary.org/content/current">Current issue</a></p>
                        <p><a href="http://www.asheducationbook.org/contents-by-date.0.shtml">Previous issues</a>.</p>
                        <p> </p>
                        <h3>ASH 2012 - Atlanta - December 8-12, 2012</h3>
                        <p> </p>
                        <p><a href="http://www.hematology.org/meetings/annual-meeting/"><img src="images/ASH_2012.jpg" width="440" height="275" alt="ASH 2012" /></a></p>
                        <p> </p>
                        <p> </p>
                        <p> </p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ASTRO - <a href="https://www.astro.org/" target="_blank">American Society for Radiation Oncology</a></h3>
                        <h3><a href="http://www.redjournal.org/content/astro_abstracts" target="_blank">Abstracts</a> - from the annual conference</h3>
                        <p>These abstracts can be downloaded to RefWorks.</p>
                        <p> </p>
                        <p><a href="http://www.astro.org" target="_blank">ASTRO</a>’s role in research includes the promotion and support of basic,   translational, clinical and outcomes/health services research and training in radiation oncology, biology and physics. These activities are facilitated through the ASTRO Research Council.</p>
                        <p> </p>
                        <p>Founded in 1958, ASTRO’s mission is to advance the practice of radiation oncology by promoting excellence in patient care, providing opportunities for educational and professional development, promoting research and disseminating research results and representing radiation oncology in a rapidly evolving healthcare environment.</p>
                        <blockquote>
                          <blockquote>
                            <blockquote>
                              <p><em>from:</em> <a href="http://www.astro.org/AboutUs/index.aspx" target="_blank">www.astro.org/AboutUs/index.aspx</a></p>
                              <p> </p>
                            </blockquote>
                          </blockquote>
                        </blockquote>
                        <h3>ASTRO 2012 - Boston - October 28-31, 2012</h3>
    <p> </p>
    <p><a href="https://www.astro.org/Meetings-and-Events/2012-Annual-Meeting/Index.aspx" target="_blank"><img src="images/ASTRO_2012.jpg" alt="ASTRO_2012" width="440" height="108" border="1" /></a></p>
                        <p> </p>
                        <p> </p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>CARO - <a href="http://www.caro-acro.ca" target="_blank">Canadian Association of Radiation Oncology</a></h3>
                        <p> </p>
                        <p>The abstracts are published in print, in <em><a href="http://www.sciencedirect.com/science/journal/01678140" target="_blank">Radiotherapy &amp; Oncology</a></em>. All abstracts are listed in a .pdf document and are not downloadable to RefWorks. To add these abstracts to RefWorks or other citation managers, you must copy and paste.<br />
                        </p>
                        <p> </p>
                        <p>2011 not yet available (as of Mar 1/12)</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/96/supp/S2" target="_blank">2010</a> 96 Suppl 2</p>
                        <p><a href="../Documents/caro_2009_green_journal_abstracts_sept2.pdf" target="_blank">2009</a> (not yet published in R&amp;O, but the Libary has a copy in .pdf format.)</p>
                        <p><a href="http://tiny.cc/j4q2r" target="_blank">2008</a> 88 Suppl 1<br />
                          <a href="http://www.sciencedirect.com/science/journal/01678140/84/supp/S2" target="_blank">2007</a> 84 Suppl 2</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/80/supp/S1" target="_blank">2006</a> 80 Suppl 1</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/76/supp/S1" target="_blank">2005</a> 76 Suppl 1</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/72/supp/S1" target="_blank">2004</a> 72 Suppl 1</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/69/supp/S1" target="_blank">2003</a> 69 Suppl 1</p>
                        <p><a href="http://www.sciencedirect.com/science/journal/01678140/65/supp/S1" target="_blank">2002</a> 65 Suppl 1</p>
                        <p><a href="http://www.sciencedirect.com/science/article/pii/S0360301601016728" target="_blank">2001</a> These abstracts were published in <em>Int J Radiat Oncol Biol   Phys;</em>50(5):1380-1418<strong>.</strong></p>
                        <p> </p>
                        <p> </p>
                        <h4>CARO 2012 - Ottawa - Sept 12-15</h4>
                        <p><img src="images/CARO_2013.jpg" width="384" height="192" /></p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ECCO - <a href="http://www.ecco-org.eu/" target="_blank">European CanCer Organization</a></h3>
                        <p> </p>
                        <p><a href="http://www.ecco-org.eu/Conferences/Conferences/Past-conferences.aspx" target="_blank">Past Conferences</a></p>
                        <ul>
                          <li><a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">ECCO 16 2011</a> or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 47 Suppl 1</a></li>
                          <li><a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html" target="_blank">ECCO 15 2009</a></li>
                          <li><a href="http://www.ecco-org.eu/ecco_content/ECCO14_AbstractBook/index.html" target="_blank">ECCO 14 2007</a> or CD-ROM in Library: QZ200 E88 2007 vol. 2</li>
                          <li><a href="http://www.ecco-org.eu/ecco_content/ECCO13_abstractbook/index.html#/1/zoomed" target="_blank">ECCO 13 2005</a> or CD-ROM in Library: QZ200 E88 2005 vol. 2</li>
                        </ul>
                        <p>Education Books</p>
                        <ul>
                          <li>ECCO 15 2009 <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a> or CD-ROM in Library: QZ200 J74 2009</li>
                          <li>ECCO 14 2007 CD-ROM in VC Library: QZ200 E88 2007 vol. 1</li>
                          <li>ECCO 13 2005 CD-ROM in VC Library: QZ200 E88 2005 vol. 1</li>
                        </ul>
                        <h3>ECCO 2013</h3>
                        <p> </p>
                        <p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ESMO - <a href="http://www.esmo.org/" target="_blank">European Society for Medical Oncology</a></h3>
                        <p><a href="http://www.esmo.org/education-research/abstracts-virtual-meetings-and-meeting-reports.html">List of meetings</a></p>
                        <p> </p>
                        <p><a href="http://www.esmo.org/education-research/educational-books.html" target="_blank">ESMO Educational books</a></p>
                        <p>ESMO 36 2011 European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p>
                        <p>ESMO 35 2010 : Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/21/suppl_8" target="_blank">21 Suppl 8</a> (Milan)</p>
                        <p>ESMO 34 2009 European Journal of Cancer Supplements <a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html">7(2) Sept 2009</a> (Berlin)</p>
                        <p>or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a></p>
                        <p>ESMO 33 2008  Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/19/suppl_8.toc">19 Suppl 8</a> (Stockholm)</p>
                        <p>ESMO 32 2007 Annals of Oncology <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">18 Suppl 9</a> (Lugano)</p>
                        <p>ESMO 31 2006 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/17/suppl_9.toc?etoc" target="_blank">17 Suppl 9</a> (Istanbul)</p>
                        <p>ESMO 29 2004 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/15/suppl_3.toc" target="_blank">15 Suppl 3</a> (Vienna)</p>
                        <p> </p>
                        <h3>ESMO 2013 Amsterdam</h3>
                        <p> </p>
                        <p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
                      </div>
                      <div class="TabbedPanelsContent">
                        <h3>ESTRO - <a href="http://www.estro.org" target="_blank">European Society for Therapeutic Radiology and Oncology</a></h3>
                        <p> </p>
                        <p>Many of these abstracts are published in the green journal,<em> Radiotherapy &amp; Oncology</em>. Some of the <a href="http://www.estro-members.org/publications/Pages/AbstractBooks.aspx" target="_blank">abstract books</a> are also available for download from the ESTRO website.</p>
                        <p>You can't download these abstracts to RefWorks.</p>
                        <p> </p>
                        <table width="479" border="0" cellspacing="1" cellpadding="3">
                          <tr align="left">
                            <th width="33" scope="row">2011*</th>
                            <td width="135">30th Annual  Meeting</td>
                            <td width="289"><p>European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p></td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2010</th>
                            <td>29th Annual  Meeting</td>
                            <td><a href="http://www.estro-events.org/Documents/ESTRO29_report.pdf" target="_blank">Abstracts</a> (Barcelona) </td>
                          </tr>
                          <tr align="left">
                            <th valign="top" scope="row">2009*</th>
                            <td valign="top">28th Annual  Meeting</td>
                            <td>(abstracts not available)(ECCO15 / ESTRO 28), Berlin 20-24 September, 2009?)</td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2008</th>
                            <td>27th Annual  Meeting</td>
                            <td>Radiotherapy &amp; Oncology <a href="http://www.estro-members.org/publications/Documents/ESTRO2720AbstractBook.pdf" target="_blank">88 Suppl 2</a></td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2007*</th>
                            <td>26th Annual  Meeting</td>
                            <td>(abstracts not found)</td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2006</th>
                            <td>25th Annual  Meeting</td>
                            <td>Radiotherapy &amp; Oncology <a href="http://www.sciencedirect.com/science?_ob=PublicationURL&_tockey=#TOC#5155#2006#999189999.8 998#665740#FLT#&_cdi=5155&_pubType=J&_auth=y&_acct=C000054470&_version=1&_urlVersion=0&_us erid=1766625&md5=971c04d2d708ca04155e86c400b96821" target="_blank">81 Suppl 1</a></td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2005*</th>
                            <td>24th Annual  Meeting</td>
                            <td>(abstracts not found)</td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2004</th>
                            <td>23th Annual  Meeting</td>
                            <td><a href="http://www.estro-members.org/publications/Documents/2AbstractbookESTRO23.pdf" target="_blank">online abstract book</a></td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2003*</th>
                            <td>22th Annual  Meeting</td>
                            <td>(abstracts not found)</td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2002</th>
                            <td>21th Annual  Meeting</td>
                            <td>Radiotherapy &amp; Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/64/supp/S1" target="_blank">64 Suppl 1</a></td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2001</th>
                            <td>20th Annual Meeting</td>
                            <td>(abstracts not found)</td>
                          </tr>
                          <tr align="left">
                            <th scope="row">2000</th>
                            <td>19th Annual Meeting</td>
                            <td>Radiotherapy &amp; Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/56/supp/S1" target="_blank">56 Suppl 1</a></td>
                     

  • I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

    I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
    If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
    By the way new to all this so be gentle please
    <div id="main_column">
         <div class="section_w500">
            <h2>North Bali Listings</h2>
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
                <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
                <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
                <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially  in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to  acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
                  <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area,  principally along the coastline ,  with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling,  water sports, fishing, sailing. trekking  gives this area the potential to be world-class tourist destination. Research has shown that  property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                    <br />
                    The Northern part of Bali  is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
                  Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
                  <table width="100%">
                    <tr>
                      <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property  in this area; be it for investment, development or private use.</div></td>
                    </tr>
                  </table>
                  <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other  areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve;  are also beginning to attract investors, resulting in  prices  rising.<br />
                    The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with &quot;Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of  established ex pat communities, and better facilities  also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
                  <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
                </div>
                <div class="TabbedPanelsContent">
                  <p> </p>
                  <table width="100%" border="0">
                    <tr>
                      <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                        <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                      <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng  Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                    </tr>
                    <tr>
                      <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded &quot;Tourism Status&quot;  ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                        <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone &amp; Internet close to hand and readilly available</p></td>
                      <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                    </tr>
                    <tr>
                      <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                        Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                          Min Rental Period 25 Years, extendable to to a max of 75 years
                          (with full &quot;Right Of Use&quot; issued by owner)</span></td>
                      <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                        <br />
                        <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                    </tr>
                  </table>
                  <p><br />
                  </p>
                  <hr width="100%" noshade="noshade" />
                  <p> </p>
                </div>
    <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
                <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
    </div>
            </div>
            <p> </p>
          <p>
            <h7 style="color: #C03"></h7>
          </p>
    <h2></h2><!-- this stays empty to put dotted line under listings block -->
         </div>
         <div class="cleaner"></div>
        </div> <!-- end of main column -->

    Could you share a link to the page?
    Seeing it in context and in our browsers is much easier to debug.
    If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

  • Spry tabbed panels and "The tag: "li" doesn't have an attribute: "tabindex" ..."

    Hi,
    I've been using the DW CS4 "Spry Tabbed Panels" on a few pages. When I validate the website (with DW tool for that), I get the following messages for each use of the tabbed panels: The tag: "li" doesn't have an attribute: "tabindex" in currently active versions. [XHTML 1.0 Transitional].
    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    Emilie
    Example of code this message is linked to:
    <div class="TabbedPanels" id="TabbedPanelsADMS">
      <ul id="TabUL" class="TabbedPanelsTabGroup">
        <li id="TabLI1" class="TabbedPanelsTab" tabindex="0">About</li>
        <li id="TabLI2" class="TabbedPanelsTab" tabindex="0">Assets</li>
        <li id="TabLI3" class="TabbedPanelsTab" tabindex="0">Input</li>
        <li id="TabLI4" class="TabbedPanelsTab" tabindex="0">Output</li>
        <li id="TabLI5" class="TabbedPanelsTab" tabindex="0">Support</li>
        <li id="TabLI6" class="TabbedPanelsTab" tabindex="0">Purchase</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <!-- TabLI About -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI About -->
        </div>
        <!-- TabLI Assets -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Assets -->
        </div>
        <!-- TabLI Input -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Input -->
        </div>
        <!-- TabLI Output -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Output -->
        </div>
        <!-- TabLI Support -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Support -->
        </div>
        <!-- TabLI Purchase -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Purchase -->
        </div>
        <!-- end #TabbedPanelsContentGroup -->
      </div>
      <!-- end #TabbedPanelsADMS -->
    </div>

    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    If validation is important to you, you need to remove tabindex. Should you worry about it? Not really. Sometimes it makes sense to ignore validation to achieve a particular goal, which is why Spry widgets use tabindex in a technically invalid way.
    The explanation as to why Spry does that can be found here: http://blogs.adobe.com/spryteam/2007/03/spry_widgets_and_tab_index.html.

  • Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    As an FYI: Adobe discontinued developing the Spry framework last year.  And Spry was removed from DW CC.  You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
    Nancy O.

  • 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 not selectable and displaying everything

    I have a spry tabbed panel with 2 tabs.
    In design view, this correctly shows me the contect of each of the tabs (a different table in each) when I click on the tab.
    When I run it in live view or the browser however, it displays both tabs TOGETHER, (i.e both table) and I can't select either of the tabs.
    I've attached a screen print.
    I've tried creating a brand new page with a new tabbed panel and still get the same result.
    Any suggestions.

    Here you go,
    This is just a template with a few headers and nothing much else, plus the blank tabbed panel, I did this just to test out the panel.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="Layout3.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <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/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    -->
    </style>
    <link href="SpryAssets/SpryTabbedPanels_test.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="twoColFixLtHdr">
    <div id="container">
      <div id="header">
        <div id="Righty">
          <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a href="#">Home</a>      </li>
        <li><a href="#">Members</a></li>
      </ul>
      <p> </p>
    </div>
    Login / Register
    <div id="Middle">
      <h1 align="center">GuitarSwap</h1>
    </div>
      </div>
      <div id="sidebar1">
        <h3>Members Area</h3>
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="#">Item 1</a>      </li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a>      </li>
    </ul>
        <h3>  </h3>
      </div>
      <div id="mainContent">
        <h3>Adverts</h3>
        <!-- end #mainContent -->
      </div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
      <div id="main3">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <p> </p>
        <p> </p>
      </div>
      <br class="clearfloat" />
      <div id="footer">
        <p> </p>
        <!-- end #footer -->
      </div>
      <!-- end #container -->
    </div>
    <h3>  </h3>
    <script type="text/javascript">
    <!--
    var  = new Spry.Widget.MenuBar("", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>

  • Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

    I am having an issue with Spry Tabbed Panels appearing above
    a Flash drop down menu in IE6 & IE7 but it works fine in
    Firefox. Would someone be able to educate me on what I can do to
    fix this problem. The page that is exhibiting this problem is
    http://us.shuttle.com/performance.aspx
    I’ve add “WMODE” to my flash menu,
    also updated “SpryTabbedPanels.js to version 0.5 –
    pre-release 1.6”, but neither way is
    helping…….

    Thank you very much for the suggestion. Yes, this is how I
    tried:
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%;
    z-index: 1000;
    I’ve been tried setting Z-index to from 50 to 2000 in
    attached css, but still not working.

  • Spry Tabbed Panel doesn't work

    I have a spry tabbed panel on my site. The tabs contain
    information, but you cannot open the tab. I can set the default
    tab, and the info is there, it just won't allow me to open the
    different tabs. Code is below:
    <div id="level3MainContent"> <!--
    InstanceBeginEditable name="content" -->
    <div spry:region="ds1">
    <div spry:repeat="ds1">
    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab"
    tabindex="0">Newspaper</li>
    <li class="TabbedPanelsTab"
    tabindex="0">Location</li>
    <li class="TabbedPanelsTab"
    tabindex="0">Information</li>
    <li class="TabbedPanelsTab" tabindex="0">Microfilim
    Holdings</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div
    class="TabbedPanelsContent">{ns1:title}</div>
    <div class="TabbedPanelsContent">County:
    {ns1:county}<br />City: {ns1:city}</div>
    <div class="TabbedPanelsContent">Publisher:
    {ns1:publisher}<br />Volume: {ns1:volume}<br
    />Published: {ns1:published}<br />Other Information:
    {ns1:otherinfo}</div>
    <div
    class="TabbedPanelsContent">{ns1:microfilm}</div>
    </div><p></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:1});
    //-->
    </script>
    <!-- InstanceEndEditable --></div>
    Link to page is:
    http://www.history.nd.gov/archives/counties/barnes.html

    I tried it on a blank page, nothing but the tabbed panel. It
    still does not allow the user to open a tab:
    http://www.history.nd.gov/trialTAB.html
    I am not sure about the generic statement about "some
    problems not allowing it to validate. if you sort those". Can you
    be more specific. I have had a number of problems with spry panels
    that won't open. The spry menus work fine on the site.

  • 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">
    <!--
    body  {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #090909;
    background-image: url(k2-mountain-1280x800-1.jpg);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    .twoColFixLtHdr #container {
    width: 1200px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #header {
    padding: 0;
    margin-top: 10px;
    border-bottom-width: medium;
    border-bottom-style: solid;
    border-bottom-color: #8CC543;
    .twoColFixLtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    background-color: #25A8E0;
    margin-top: 40px;
    height: 400px;
    .twoColFixLtHdr #mainContent {
    margin-right: 0;
    margin-bottom: 0px;
    margin-left: 248px;
    border: 1px solid #8CC543;
    margin-top: 40px;
    text-align: center;
    background-position: center center;
    color: #8CC543;
    font-family: "Century Gothic";
    font-size: medium;
    text-transform: none;
    height: 400px;
    background-image: url(k2-faded.jpg);
    .twoColFixLtHdr #footer {
    padding: 0;
    text-align: left;
    font-family: "Century Gothic";
    text-transform: uppercase;
    color: #25A8E0;
    letter-spacing: 5px;
    font-size: small;
    word-spacing: normal;
    display: block;
    margin-left: 0px;
    margin-top: 10px;
    .twoColFixLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style>
    <!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a:link {
    color: #25A8E0;
    text-decoration: none;
    a:hover {
    color: #8CC543;
    text-decoration: none;
    -->
    </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">
    <!--
    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    //-->
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style2 {font-size: xx-small; color: #EEEEEE; }
    a:visited {
    text-decoration: none;
    color: #25A8E0;
    a:active {
    text-decoration: none;
    .style3 {
    color: #FFFFFF;
    font-weight: bold;
    .style4 {color: #FFFFFF}
    -->
    </style>
    <style type="text/css">
    <!--
    .style5 {font-size: x-large}
    h1 {
    font-size: medium;
    color: #25A8E0;
    .style6 {color: #444444}
    .style8 {color: #444444; font-weight: bold; }
    -->
    </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>
        <!-- end #header --></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>
        <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    //-->
    </script>
    </body>
    </html>

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

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

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

  • 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 Tabbed Panels - Forms within Panels

    Any thoughs on how to place updatable Forms within Tabbed
    Panels. I thought it might be interesting to try to use the Spry
    Tabbed Panels to allow Updating specific areas of a database using
    each tab to update specific fields of a table. When doing this
    using the Update server behavior I create all sorts of variable
    issues.
    Anybody have thoughts on this... or an alternate method to
    create the same effect?

    Hi Gramps-
    Were you able to use the widget in Firefox?  For me, it just displays of the panels, one on top of the other and no tabs.  Maybe my browser's broken (that would be the best case scenario).  I'll start there.
    Thanks!
    Dianne

Maybe you are looking for