Tabbed Panels Open on Hover

I was wondering if there was a way to fix Spry Tabbed Panels
so that they open on hover instead of click? I would like to click
on the tab to take me to another page instead. Is it
possible?

You can do what phil said, or change / edit the TabbedPanels.js
on line 306
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
change that by
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);

Similar Messages

Make a spry collapsible panel open on hover??

Hi All,
I'm trying to play with the Spry Collapsible Panel and would
like to have it open on hover but not on the on click, I've
attached the standard js code Dreamweaver produces, and would be
very grateful if you could highlight what needs to be
changed,---

http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
See the section titled Open panels programmatically
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"miachu" <[email protected]> wrote in
message news:fvihb0$miq$[email protected]..
> hi there,
>
> did you ever find a solution to this dreamweaver
collapsible panel problem? i
> am having the same problem...i need it to open on hover
instead of click. it
> makes so much more sense for them to have it on
hover/roll over!
>
> help would be much appreciated!
> thanks.
>

Spry tabbed panels, opening a tabbed panel, problem with IE

i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
body{
    color: #000;
    background-attachment: fixed;
    background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
#img2 {
    height: 2cm;
    width: 2cm;
    border:0;
#img {
    margin-right: 10px;
    height: 3cm;
    width: 3cm;
    border:0;
TD{
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;
    vertical-align: top;
    text-align: left;
#header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#header-container {
    height: 120px;
    background-repeat: repeat-x;
    background-position: left bottom;
#header {
    width: 1040px;
    margin: 0 auto;
    position: relative;
#header-content{
    width: 1040px;
    position: relative;
    background-image: url(../afbeeldingen/Sitepictures/background.jpg);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#header ul li {
    float: left;
    margin-right: 2px;
#container {
    width: 1040px;
    padding-top: 120px;
    padding-bottom:50px;
    background-color: #FFF;
    margin-bottom: 0px;
    left: auto;
    right: auto;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: auto;
    min-height:100%;
#container a:link {
    color: #00C;
    text-decoration: none;
#container a:visited {
    color: #F8495A;
    text-decoration: none;
#container a:hover {
    color: #00C;
    text-decoration: underline;
#container a:active {
    color: #00B004;
    text-decoration: none;
#kolommaker
    width:1040px;
    background-color: #CEECAE;
    height: 100%;
    float: left;
#boven {
    width: 1040px;
    position: static;
    height: 180px;
    background-color: #FFF;
#sitecontent {
    width: 1040px;
    background-color: #FFF;
    height: 100%;
#TabbedPanels1 {
    width: 1040px;
    position: static;
    background-color: #FFF;
    height: 100%;
    float: left;
.links, .rechts, .midden {
    height:100%;
    display: inline-table;
    background-color: #FFF;
.links{
    float: left;
    width: 330px;
    font-size: 12px;
    padding-top: 5px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.rechts{
    padding-top: 5px;
    float: right;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.midden{
    padding-top: 5px;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
#footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#footer-container {
    height: 50px;
    background-image: url(../images/footer-bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
#footer {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    background: #FFF;
#contentfooter {
    width: 1040px;
    margin-top: 0;
    margin-right: auto;
    position:relative;
    margin-bottom: 0;
    margin-left: auto;
    height:50px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #F00;
    text-align: center;
.leftfooter {
    float: left;
.rightfooter {
    float: left;
#iframe {
        height: 600px;
        min-height: 600px; }
.result_title a:link {
    color: #00C;
    text-decoration: none;
.result_title a:visited {
    color: #F8495A;
    text-decoration: none;
.result_title a:hover {
    color: #00C;
    text-decoration: underline;
.result_title a:active {
    color: #00B004;
    text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
    text-align: center;
    background: #FFF;
    border: 1px solid #CCC;
    height: 20px;
    width: 175px;
    font-size: 12px;
.clearfix {
    content:".";
    width:100%;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
    overflow: hidden;
body{
    overflow: auto;
#header-wrap, #footer-wrap {
    position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
    position: absolute;
    width: 100%;
    height:100%;
    overflow:auto;
#TabbedPanels1 {
    position: absolute;
.TabbedPanels {
    position: absolute;
#boven {
    padding-top: 100px;
#container {
    padding-top: 60px;
    height :100%;
#sitecontent {
    height: 100%;
#footer-wrap {
    bottom: -1px;
#header img, #footer img
display: block;
Template
<!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>Naamloos document</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="../Sites/login.html">Online map</a></li>
                        <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="../Sites/Aldi.html">Aldi</a></li>
            <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="../Sites/Bonita.html">Bonita</a></li>
            <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
            <li><a href="../Sites/C&A.html">C & A</a></li>
            <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
            <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
            <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="../Sites/Ikea.html">Ikea</a></li>
            <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
            <li><a href="../Sites/Lidl.html">Lidl</a></li>
            <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="../Sites/Scapino.html">Scapino</a></li>
            <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
     <div id="boven">test<br />
       <br />
     </div>
     <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
        <li class="TabbedPanelsTab" tabindex="0">Tools</li>
        <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
        <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
        <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
        <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven
            <p>Hier wordt de inhoud voor id midden weergegeven</p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
      </div>
      <div class="clearfix:after"> </div>
</div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
PAGE where i open the tabbed panels
<!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>Third Party</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="Verlof-Recup.html">Verlof</a></li>
                <li><a href="Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="login.html">Online map</a></li>
                        <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="Aldi.html">Aldi</a></li>
            <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="Bonita.html">Bonita</a></li>
            <li><a href="Carrefour.html">Carrefour</a></li>
            <li><a href="C&A.html">C & A</a></li>
            <li><a href="Decathlon.html">Decathlon</a></li>
            <li><a href="Delhaize.html">Delhaize</a></li>
            <li><a href="Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="Ikea.html">Ikea</a></li>
            <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="Kruidvat.html">Kruidvat</a></li>
            <li><a href="Lidl.html">Lidl</a></li>
            <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="Scapino.html">Scapino</a></li>
            <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Scales</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
        <li class="TabbedPanelsTab" tabindex="0">HP</li>
        <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
        <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
        <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
           <div class="links"></div>
          <div class="rechts"></div>
         <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
           <div class="rechts"></div>
          <div class="midden"></div>
        </div>
       <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
      </div>
       <div class="clearfix:after"> </div>
    </div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: static;
    float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: static;
    top: 1px;
    float: left;
    font: bold 0.7em sans-serif;
    background-color: #FF0033;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    border-bottom: 2px solid #EEE;
    color: #FFF;
    background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
/* 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 {
    padding: 4px;
    height: 100%;
    width: 1032px;
    float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #CCC;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;

added also the css for the menubar
pro_dropdown_3.css
.preload1 {
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
    padding:0;
    margin:0;
    list-style:none;
    height:38px;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: repeat-x;
#nav li.top {
    display:block;
    float:left;
    width: auto;
#nav li a.top_link {
    display:block;
    float:left;
    height:35px;
    line-height:33px;
    color:#ccc;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    width: 85px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 2px;
#nav li a.top_link span {
    float:left;
    display:block;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: no-repeat;
    background-position: right top;
    width: 70px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
#nav li a.top_link span.down {
    float:left;
    display:block;
    padding:0 10px 0 12px;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link {
    color:#fff;
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
#nav li:hover a.top_link span {
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link span.down {
    padding-bottom:3px;
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    background-repeat: no-repeat;
    background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
    color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
    color:#fff;
    border-color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
    color:#000;
    border-color:#50b5d0;
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;

Tabbed Panels: Opening panel with panel number doesn't work with Spry Data

I have some data inside a TabbedPanelsContent div, and would
like to be able to open tabs using links, but it only seems to work
with static content.
Clicking on tabs themselves loads content correctly, whereas
clicking on links does nothing. I tried both - panel number and
panel ID - neither worked. What gives?
See code below.
<div spry:region="ds1">
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Asset
Management</li>
<li class="TabbedPanelsTab"
tabindex="0">Brokerage</li>
<li class="TabbedPanelsTab" tabindex="0">Mutual
Funds</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry01}'.search(/^Asset Management/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry02}'.search(/^Brokerage/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry03}'.search(/^Mutual Funds/) !=
-1;">{ds1::client}</p>
</div>
</div>
</div>
<script type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>
<a href="#" onclick="tp1.showPanel(0); return
false;">Asset Management</a>
<a href="#" onclick="tp1.showPanel(1); return
false;">Brokerage</a>
<a href="#" onclick="tp1.showPanel(2); return
false;">Mutual Funds</a>

Try to declare the variable out side of the region
<script> var tp1;</script>
<div spry region ... >
tab panel stuff
<script type="text/javascript">
tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>

Spry Tabbed Panels- Open link on click

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

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

Tabbed Panels Show on Hover, Not Click

Hi,
I'm using the Spry Tabbed Panels widget (obviously). I'd like
the content panels to show on hover, rather than on click.
Reason being is my content in the content panels are images
-- as you hover over a tab, the image changes. Clicking on the tab
takes you to the tab's page. That's the end goal, at least.
The answer's in the SpryTabbedPanels.js file, I'm positive.
All my tinkering hasn't produced the desired result, though. Spare
a few minutes and direct me to the sections of the javascript file
I need to change?
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
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, "click",
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)
this.removeClassName(tabs
, this.tabSelectedClass);
if (panels)
this.removeClassName(panels
, this.panelVisibleClass);
panels.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
, panels);
this.showPanel(this.defaultTab);

near line 282 u will see the function:
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
function(tab, panel)
in there u will find
Spry.Widget.TabbedPanels.addEventListener(tab, "click",
function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { return self.onTabMouseOver(e, tab); }, false);
change this to:
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e,
tab); }, false);
and it should work.

Spry tabbed panels - question about hover

Hello, I am relatively new to Dreamweaver and Spry, but have made a website using vertical Tabbed Panels that finally looks ALMOST like I want it. I am sure that I have done some things that could be much simpler though…
http://web.me.com/marinka9170/JL_test/JL_test.html
My problem is that I would like the tabs to stay in their hover state (so coloured and wider) when you navigate to the content panel (until you hover over the next tab of course), instead of going back to their standard grey. How do I do that?
And my other question is: in the content panels I have used custom bullets. Is there a way to assign a different custom bullet for each content panel? Do I number the content panels, like I have done with the tabs?
Any hints, tips, solutions are appreciated!
Thanks,
Marinka

I indeed see that your example works, but I think in my code there is some sort of conflict going on
I have copied the Source Code and the SpryTabbedPanels.ccs below and 'bolded' the parts where I think the problem is. It is probably in splitting the different tabs in 5, right?
I am sorry for asking these stupid questions. It's all quite new to me, but I've ordered a book to study more. It's just not in yet
Thanks again for your help! Really appreciate it!
Marinka
<!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" />
<meta name="description" content="description goes here">
<meta name="keywords" content="">
<meta name="author" content="metatags generator">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 month">
<title>JL_test</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
h1 {
font-family: Verdana, Geneva, sans-serif;
color: #15375e;
font-weight: bold;
font-size: 14px;
h2 {
font-family: Verdana, Geneva, sans-serif;
color: #016596;
font-weight: bold;
font-size: 14px;
h3 {
color: #00A0AF;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
h4 {
color: #679145;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
h5 {
color: #B4D88b;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
.container .content #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent table tr {
vertical-align: top;
.container .footer copyright {
</style>
<div class="container">
<div class="header"><img name="" src="" width="1024"
" height="120" alt="logo" style="background-color: #FFFFFF" align="right" /></div>
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
<div class="placeholder"><img src="Website_03-web-images/JL_ice.jpg" width="1024" height="400" alt="" /></div>
   <div class="content">
    <div id="TabbedPanels1" class="VTabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab1" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">home</li>
        <li class="TabbedPanelsTab2" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">who are we?</li>
        <li class="TabbedPanelsTab3" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">our services</li>
        <li class="TabbedPanelsTab4" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">sectors of activity</li>
        <li class="TabbedPanelsTab5" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">contact</li>
      </ul>
     <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
<table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
                <home>
                  <h1>news</h1>
                </home>
                <p>News items can go here. Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                  Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                  Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
</div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
                <h1> </h1>
                <p>Dandem quamendit as pelendae placiamus adipiet, voluptur minctis ad qui sinctur repercia dolorerum aceatiis est aut erchil maio qui nobis accupta.<br />
                  ssimpe qui omniscid quunt id molupti orrorpor res estrumquae lab ipician debitaq uature, optate nobis ut illaborrum diae placit id moloreribus doluptatur, unt rehent laborent rempori tassed ma non ne id qui rem voluptatur mos.<br />
                  Apist rem fugit et, corepuda con reperum auts esendip.</p>
              </div></td>
            </tr>
          </table>
        </div>
    <div class="TabbedPanelsContent">
     <table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
                <h2>who are we?</h2>
                <p>Who are we? Why are we here? What do we do? Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                  Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                  Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
</div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
                <h3><img src="" alt="Photo" width="338" height="200" hspace="0" vspace="0" align="texttop" /></h3>
              </div></td>
            </tr>
          </table></div>
    <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h3>our services</h3>
      <ul id="tab3">
        <li>Service 1 - description of the type of service goes here with a possible hyperlink or something</li>
        <li>Service 2</li>
        <li>Service 3</li>
      </ul>
    </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
</div></td>
            </tr>
          </table></div>
        <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h4>sectors of activity</h4>
      <ul id="tab4">
        <li>Sector 1 - description of the sector of activity goes here with a possible hyperlink or something</li>
        <li>Sector 2</li>
        <li>Sector 3</li>
        </ul>
    </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
</div></td>
            </tr>
          </table></div>
     <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h5>contact</h5>
                <p>Name</p>
                <p>Telephone number: +12 3456 7890</p>
                <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
              </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
              </div></td>
            </tr>
          </table></div>
      </div>
    </div>
</div>
<div class="footer">
    <copyright>©2011 </copyright>
</div>
</div>
<script type="text/javascript">
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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 338px;
height: 30px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375e;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab1 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab2 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab3 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab4 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab5 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
color: #fff;
height: 30px;
width: 300px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
height: 30px;
width: 300px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
background-color: #FFF;
/* 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 {
padding: 0px 0px 0px 0px;
list-style-image: url(file:///Macintosh%20HD/Users/marinka/Desktop/JL/optencia_website/images/bullet.png);
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
padding-right: 10px;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
overflow: hidden;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 338px;
height: 240px;
position: relative;
overflow: hidden;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab1 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab2 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab3 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab4 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab5 {
float: left;
overflow: hidden;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
text-decoration:none;
overflow: hidden;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 686px;
height: 240px;
background-color: #fff;
/* 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;

Tabbed Panel with Fade Effect

Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
Daniel

For Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don

Spry Tool tip on Tabbed panels

I am having a problem with the new spry tool tip widget. I
have a Tabbed panels table with 4 tabs. For some reason the spry
widget only works when I have 4 seperate div's with the tool tip
content and 4 separate js variables placed after the divs. One must
be on each tab. Is there any way to make it work so there is one
div and one variable creation on the page rather than 1 for each
panel?. heres how my code works:
<head>
<body>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">TAB
1</li>
<li class="TabbedPanelsTab" tabindex="1">TAB
2</li>
<li class="TabbedPanelsTab" tabindex="2">TAB
3</li>
<li class="TabbedPanelsTab" tabindex="3">TAB
4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="Funds_DIV1" spry:region="ds1"
class="SpryHiddenRegion" >
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="Funds_DIV2" class="SpryHiddenRegion"
spry:region="ds2">
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
Repeat two more times . You get the idea

Sorry i just kinda threw that together as a mock up
id="blindMe" becomes id="blindMe2" and so on for each subsequent
use. I had already checked for that. The same thing goes for the
associated script variable. It works as is, i just dont want to
have to duplicate it.
The problem is, if i remove all the duplicated divs and
scripts, then place that script and div on the bottom of the page
after the </div> for the tabbed panels div, the hover state
no longer works. Same is true if i keep it within the </div>
the only way it does work is if i duplicate it within each tabbed
panels content divs. (With different id values of course)

Spry tabbed panels - Different Hover Class for each tab

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

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

Opening specific Spry tabbed panels not working or displaying in IE

I have a tabbed panel spry widget on an asp page in Dreawmweaver (http://www.herbsmithinc.com/casedog.asp) that worked marverously across IE, Firefox and Safari until I tried to get different panels to open on load through links. I used the following tutorial: http://foundationphp.com/tutorials/spry_url_utils.php
Everything works as it should in Firefox and Safari but the panels all appear at once, stacked down the page in IE. Does anyone have a fix for this or see what it is I'm doing wrong?
Thanks!!

I added the code, but It didn't work
I just noticed that there's an error on the page when it loads in IE:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 24 Mar 2011 15:05:33 UTC
Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 292
Char: 1
Code: 0
URI: http://www.herbsmithinc.com/casedog.asp
I searched the error but didn't come up with too much. Any other suggestions? I really appreciate the help!!

Spry tabbed panels not opening in IE on Vista

Link:
About
page
Link:
Story
page
Spry tabbed panels on these pages display fine in Firefox and
Safari.
But in IE on two separate Vista-running PCs, everything
except the tabs themselves loads, until you click refresh one or
more times. Both PCs were on broadband connections and I checked
each PC several times just to make sure it wasn't just an
intermittent connection.
Way to fix this for IE? As far as my client is concerned,
it's a bug.

Dear all, thanks for your replies.
I have tried Barascu Diana's fix to both pages linked at the
top, but am presently unable to test it on IE6. Anyone able to see
if those tabs are now appearing?
<DIV class="TabbedPanel" id="TabbedPanels1" style
="position:relative">
(Hope I did this right?)
I also temporarily tried kinblas' fix, but removing relative
positioning there caused the tabs to hover over to the left of the
page.

Open previously viewed Tabbed Panel when using browser back button

I have a page containing SPRY tabbed panels, and was wondering if there was a way that if a user navigates back to this page using the browser back button, the last panel viewed could remain open. Using hash tags in the URL works for Mozilla but not for IE8. Here is the sample page: http://www.davidkneale.com/wcusa/expedition_leader.html
Does anyone know how I can get this to work in IE8?

Perhaps you missed the announcement that Adobe is no longer investing in the development of Spry. See: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l.
There used to be a dedicated Spry forum, but it has been changed to read-only.
Spry isn't exactly dead, but nor is it in the best of health. Add to that the fact that IE 8 doesn't support the HTML5 history management API, and the lack of replies isn't really surprising.

Change Text on Tab of Tabbed Panel When it's Open.

I posted this on the DW board but it was suggested I try here.
I am using a tabbed panel to hide and reveal a page of text on this page: www.imagesandwords.org.uk/Don/pages/essay.php
The reason I am using the tabbed panel to reveal the page is to try to keep every page looking the same throughout the site.
When the panel is open the text in the tab still says, "More" and I wonder if there is a way to make it say, "Hide" or something when it's open. Although it isn't uploaded yet my last task was to put tiny up and down arrows in the tab so that helps with a down arrow on closed and an up arrow on open.
As well as the question about changing the text on the tab, is there anything wrong with using the tabbed panel like this? I guess it might be clunky if the user has javascript turned off but I''m thinking of putting up a .pdf for download once the content is dealth with.
Kind regards
Martin

Hi Martin,
The error is very genuine and need to be fixed.
You know what the problem is...
We are calling same funtion from a span that is inside a div which is again calling the same funtion. So the innerHTML is not getting updated correctly.
So what we need to do is to duplicate our JS funtion and call name it as say....cchange()
/* for the Tab/DIV based click*/
function change(){
var temp=document.getElementById('moreContent').innerHTML;
if(temp=='More...'){
document.getElementById('moreContent').innerHTML='Hide...';
if(temp=='Hide...'){
document.getElementById('moreContent').innerHTML= 'More...';
/* for the span/text based click*/
function cchange(){
var temp=document.getElementById('moreContent').innerHTML;
if(temp=='More...'){
document.getElementById('moreContent').innerHTML='Hide...';
if(temp=='Hide...'){
document.getElementById('moreContent').innerHTML= 'More...';
and in our HTML it becomes
<div class="CollapsiblePanelTab" onclick="change();"><span id="moreContent" onclick="ccchange();">More...</span> </div>
This should finally do the required icing on cake
Regards,
Vinay

Spry Tabbed Panels changing bkg on hover?

I'm trying to use a tabbed panel widget for a client but each
tab uses a different background image for each tab. Now it was easy
to use a different background for each tab when they first appear.
Just make a series of classes and assign one of them per each tab.
Fine. Now my problem is I also want different images when you
rollover each tab and I can't figure that out. Right now I get the
same background image on hover no matter which tab I rollover. I
saw here on the forums a way to have a different background for
each selected tab, but I want this for the hover effect instead? Is
it possible without having to play around with the .js file?

Turns out I figured it out myself from the other link. You do
something like this:
.TabbedPanelsTabHover#TabbedPanelsCF {
background-image: url(../images/tabs/1_off.gif);
.TabbedPanelsTabHover#TabbedPanels2 {
background-image: url(../images/tabs/2_off.gif);
.TabbedPanelsTabHover#TabbedPanels3 {
background-image: url(../images/tabs/3_off.gif);
and it works....

Tabbed Panels Open on Hover

Similar Messages

Maybe you are looking for