Spry Tabbed Panels 2 - Remember Last Tab

Using the Spry UI Tabbed Panels 2, has anyone found a way for the page to remember which tabbed was last viewed?
I can see that I can use the showPanel() method to set the panel, and I can use the getCurrentTabIndex() to retrieve the current tab index, but I am not sure what to do with them next.
I am thinking about maybe setting a cookie with the current tab index, but I don't know what to attach the onclick event to. Should I use a spry selector to add the onclick attribute to the a tag that is automatically generated?
Does anyone else have any clever ideas?
Cheers,
Steve

THANK YOU VERY MUCH GRAMPS!: THIS DID WORK!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spry Accordion</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<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>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script>
var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};
// We need an unload listener so we can store the data when the user leaves the page
// SpryDOMUtils.js only provides us with a load listener so we create this function
Spry.Utils.addUnLoadListener = function(handler /* function */)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('unload', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('unload', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onunload', handler);
Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
    var name = name + '=';
    if(type == 'create'){
        // start cookie String creation
        var str = name + value;
        // check if we have options to add
        if(options){
            // convert days and create an expire setting
            if(options.days){
                var date = new Date();
                str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
            // possible path settings
            if(options.path){
                str += '; path=' + options.path
            // allow cookies to be set per domain
            if(options.domain){
                str += '; domain=' + options.domain;
        } else {
            // always set the path to /
            str += '; path=/';
        // set the cookie
        document.cookie = str;
    } else if(type == 'read'){
        var c = document.cookie.split(';'),
            str = name,
            i = 0,
            length = c.length;
        // loop through our cookies
        for(; i < length; i++){
            while(c[i].charAt(0) == ' ')
                c[i] = c[i].substring(1,c[i].length);
                if(c[i].indexOf(str) == 0){
                    return c[i].substring(str.length,c[i].length);
        return false;
    } else {
        // remove the cookie, this is done by settings an empty cookie with a negative date
        Spry.Utils.Cookie('create',name,null,{days:-1});
var cookie = Spry.Utils.Cookie('read','panel');
//alert(cookie);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
Spry.Utils.addUnLoadListener(function(){
    Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
</script>
</body>
</html>

Similar Messages

Remember last tab visited with Adobe Spry Tabs

I have been searching for an answer for this for sometime now. The http://go.spry-it.com/cookie is not working and all forums say to go there. Any help/suggestions. I want to go to the last tab looked at to pop focus after a page refresh or page change. Cookies etc. Any help would be appreciated.

Have a look at the following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spry Accordion</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<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>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script>
var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};
// We need an unload listener so we can store the data when the user leaves the page
// SpryDOMUtils.js only provides us with a load listener so we create this function
Spry.Utils.addUnLoadListener = function(handler /* function */)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('unload', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('unload', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onunload', handler);
Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
    var name = name + '=';
    if(type == 'create'){
        // start cookie String creation
        var str = name + value;
        // check if we have options to add
        if(options){
            // convert days and create an expire setting
            if(options.days){
                var date = new Date();
                str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
            // possible path settings
            if(options.path){
                str += '; path=' + options.path
            // allow cookies to be set per domain
            if(options.domain){
                str += '; domain=' + options.domain;
        } else {
            // always set the path to /
            str += '; path=/';
        // set the cookie
        document.cookie = str;
    } else if(type == 'read'){
        var c = document.cookie.split(';'),
            str = name,
            i = 0,
            length = c.length;
        // loop through our cookies
        for(; i < length; i++){
            while(c[i].charAt(0) == ' ')
                c[i] = c[i].substring(1,c[i].length);
                if(c[i].indexOf(str) == 0){
                    return c[i].substring(str.length,c[i].length);
        return false;
    } else {
        // remove the cookie, this is done by settings an empty cookie with a negative date
        Spry.Utils.Cookie('create',name,null,{days:-1});
var cookie = Spry.Utils.Cookie('read','panel');
//alert(cookie);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
Spry.Utils.addUnLoadListener(function(){
    Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
</script>
</body>
</html>
Gramps

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;

Spry Tabbed Panels - replace text tab with an image, how to?

Hi all, I'm stumped. I've uploaded 2 files to:
http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
http://docs.google.com/leaf?id=0B4zgjxAaUD97YTQ1MDliNzEtZGVhZS00MmYzLTllZWMtMzJiODQwMjRlMT Bl&hl=en&authkey=CILrxq0G
I'm working in Dreamweaver CS3, 4 tab "Spry Tabbed Panel" with 3 columns (one column is a form and submit btn). The 1st photo is a mockup of what I'm trying to accomplish. In the 2nd photo, Nokia designed a page for its Nokia Developer Summit 2010 (been pulled down since). This is the desired effect. I'm trying to replace the typical text tabs in the tabbed panel with images, or, at the very least, change the color between states ON and OFF (images the same except for bg color - green verses gray), which is probably the better way to go, given page load time.
I need the CSS and HTML code. I'd settle for just the image problem, but if someone can give me guidance on the content boxes too, that would be AWESOME!
REALLY hoping anyone can help (Ben, I'm an Aussie too) - been on this for a month now.
Very grateful Adobe staffs such a great resource tool as this site with a lot of really good, courteous brainiacs.
Thanks,
Louis cat

G'day Ben,
Upgraded to Dreamweaver CS5, added Tabbed Panels 2 widget to page.
Here's a mockup of what I'm trying to do: http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
Questions:
1. Want to change Spry TP tabs to images (see link, above), then make them vertical tabs, with morph effect - How?
2. How do I change the default TabbedPanels2 instance name? (not easy to rename)
3. The first section of the code was planted in my index page - shouldn't this be pasted into a CSS file, or just leave it alone?
================================================
FIRST SECTION OF THE CODE: -------------------------------------------------------------------------------
<style type="text/css">
/* BeginOAWidget_Instance_2138522: #TabbedPanels2 */
/* TabbedPanelsTabGroup */
#TabbedPanels2 .TabbedPanelsTabGroup {
top: 1px;
left: 0px;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
border-left: solid 0px inherit;
border-bottom: solid 0px inherit;
border-top: solid 0px inherit;
border-right: solid 0px inherit;
padding: 0px 0px 0px 0px;
/* TabbedPanelsTab */
#TabbedPanels2.TabbedPanels .TabbedPanelsTab,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTab {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #DDD;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTab a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTab a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabHover */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabHover,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabSelected */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #EEE;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabFocused */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #EEE;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsContentGroup */
#TabbedPanels2 .TabbedPanelsContentGroup {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 0px 0px 0px 0px;
/* TabbedPanelsContentVisible */
#TabbedPanels2 .TabbedPanelsContentVisible {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
border-left: solid 0px #CCC;
border-bottom: solid 0px #CCC;
border-top: solid 0px #999;
border-right: solid 0px #999;
padding: 4px 12px 4px 12px;
#TabbedPanels2.BTabbedPanels .TabbedPanelsTab {
border-bottom: solid 1px #999;
border-top: solid 1px #999;
#TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected {
border-top: solid 1px #999;
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup {
width: 10em;
height: 20em;
top: 1px;
left: 0px;
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #EEE;
/* EndOAWidget_Instance_2138522 */
</style>
========================================================
SECOND SECTION OF THE CODE: ----------------------------------------------------------------------------------------
<div id="TabbedPanels2">
    <h2>Tab 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. </p>
    <h2>Tab 2</h2>
    <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. </p>
    <h2>Tab 3</h2>
    <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. </p>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2138522: #TabbedPanels2
var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
   injectionType: "replace",
   widgetID: "TabbedPanels2",
   autoPlay: true,
   defaultTab: 0,
   enableKeyboardNavigation: true,
   hideHeader: true,
   tabsPosition: "top",
   event:"click",
   stopOnUserAction: true,
   displayInterval: 5000,
   minDuration: 300,
   maxDuration: 500,
   stoppedMinDuration: 100,
   stoppedMaxDuration: 200,
   plugIns:[]
// EndOAWidget_Instance_2138522
</script>
===================================================
Any help would be much appreciated, Ben. Cheers from another Aussie. Louis Cat!

Two or more spry sliding panels nested in tabbed panels?

Hi
I have a tabbed panel widget on one page. Inside the first
tab I inserted a sliding panel widget. Now this works fine.
I put another sliding panel widget into the second panel.
I changed the div id ( <div id="panelwidget2"
class="SlidingPanels"> ) and placed a second variable at the end
of the code ( var sp2 = new
Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
panel doesn't work and Dreamweaver highlights <div
id="panelwidget2" class="SlidingPanels"> as invalid code.
What do I do wrong?
Here's the code of the page:
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SprySlidingPanels.js"
type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<table border="0">
<tr>
<td><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"><div
align="center"><span class="style3"><a href="#"
onclick="sp1.showFirstPanel();">Bild l</a> | <a
href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent aliquam, Phasellus
trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">
<div align="center"><span class="style3"><a
href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
<a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
<a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
<a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget2" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">

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

Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

Horizontal Tabbed Panel Inside Vertical Tabbed Panel

Hello!
I am new to web coding and in dreamweaver I would like to place a horizontal spry tabbed panel as the content of a vertical spry tabbed panel. I guess you could call it a nesting a tabbed panel. However, when I place the horizontal panel in the content area, it takes the form of a vertical panel. Any thoughts?
Here is a live page of the issue: http://andrewpapp.com/baseballprofile.html
and here is the code:
http://www.andrewpapp.com/html.txt

Hi Newbie,
I say this through gritted teeth because I think you have done far better than just a newbie, even to the extent that you have given correct advice to Jennigje Galama.
To get to your problem, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
.HTabbedPanels .TabbedPanels {
     margin: 0px;
     padding: 0px;
     float: left;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.HTabbedPanels .TabbedPanelsTabGroup {
     margin: 0px;
     padding: 0px;
.HTabbedPanels .TabbedPanelsTab {
     position: relative;
     top: 1px;
     float: left;
     padding: 4px 10px;
     margin: 0px 1px 0px 0px;
     font: bold 0.7em sans-serif;
     background-color: #DDD;
     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;
.HTabbedPanels .TabbedPanelsTabHover {
     background-color: #CCC;
.HTabbedPanels .TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
.HTabbedPanels .TabbedPanelsTab a {
     color: black;
     text-decoration: none;
.HTabbedPanels .TabbedPanelsContentGroup {
     clear: both;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
.HTabbedPanels .TabbedPanelsContent {
     padding: 4px;
.HTabbedPanels .TabbedPanelsContentVisible {
</style>
</head>
<body>
<div id="TabbedPanels1" class="VTabbedPanels">
<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">
         <div id="TabbedPanels2" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 1.1</div>
             <div class="TabbedPanelsContent">Content 1.2</div>
         </div>
       </div>
    </div>
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels3" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 2.1</div>
             <div class="TabbedPanelsContent">Content 2.2</div>
         </div>
       </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
What the vertical tabs does, is override the style rules of the normal (horizontal) tabs. Thats OK, but if we then want horizontal tags, we must resurrect the orginal style rules. We must also make sure that we choose the selectors carefully unless we want to rewrite the JavaScript file.
I think the above approach is probably the best,
Keep up the good work.
Gramps

Tabbed Panel - Different selected tab gifs

Is it possible to have different gifs show up for a selected
tab in the Tabbed Panel example? From what I can see there's only
one style called in the .js file. Here's my example:
http://cftest.mccormick.com/zatstage/index.cfm
When you click on the tabs I would like them to match the tab body
color.

If you mark each of your tabs with an ID then you could do
something like this:
.TabbedPanelsTabSelected#MostPopularTabbedPanelsTab {
background-image: url(MostPopularTabButtonSelected.gif);
.TabbedPanelsTabSelected#TopRatedTabbedPanelsTab {
background-image: url(TopRatedTabButtonSelected.gif);
.TabbedPanelsTabSelected#SearchTabbedPanelsTab {
background-image: url(SearchTabButtonSelected.gif);
--== Kin ==--

Just upgraded to FF 5.0... NOW, pressing the mouse wheel turns the current tab into the last tab that I copied. Never did this b4? Can find no settings to change this behavior..

I have TabMixPlus and All-In-One Gestures 0.22.1 installed... have not changed any settings in them, checked to see if there was a setting to change (no), and find that the only way to keep this from happening is to restart FF 5.0. If I do NOT copy a link, then this issue does not exist. AFTER I copy a link and paste it into a new tab, Facebook, etc., then it is in memory and gets pasted with a mouse-wheel click.

Mountain Lion is OS X 10.8
10.6 was called Snow Leopard.
To use iTunes 10.7 the following is required:
Macintosh System Requirements
Mac computer with an Intel Core processor and 512MB of RAM
OS X version 10.6.8 or later
Safari 4.0.3 or later
400MB of available disk space
Broadband Internet connection to use the iTunes Store
Do you use iTunes Match?
That way all of your songs would be matched with the master song on the iTunes servers independently of iTunes on your Mac or PC...
Look here for further information: http://www.apple.com/itunes/itunes-match/

Formatting Spry Tabbed Panel so tabs appear on the right side

Hi, I know this is a rookie question, but that is because I'm a rookie. How can I format a Spry Tabbed Panel so the tabs appear on the top-right side rather than the default top-left. I found the solution on the Adobe Labs site, but couldn't get it to work. If anyone can please help me with the code or point me in the right direction if I can change it with css. Thanks.

Add/modify the following
.TabbedPanelsTab {
float: right;
Using the above, you will have to remember that the first tab will be on the extreme right.
Gramps

Spry Validation in Tabbed Panel

I've created a form that has a number of sections which I
have separated out using a spry tabbed panel. So far, so good.
On one of the panels, however, is a select box that is
required, so I have used a spry validation widget to look after it.
Now, if the select box hasn't been used then and the submit button
is clicked while one of the other panels is open, because the
validation widget halts the form it makes it look as though nothing
has happened. The warning message is only visible when the correct
panel is open.
My question is this: how do I either (a) force the panel with
the error on to reopen or (b) make the error message show up
elsewhere on the page so that it is visible? I tried positioning it
absolutely above the whole panel but it still only shows up when
the relevant panel is oen.

I have actually added multiple tabbed panels inside of tabbed
panels as well as collapsible panels inside of tabbed panels and
vise versa. This works across all browsers (IE 6 & 7, FF 2,
Safari 2 & 3).
The key for me was to use <div style="clear: both"> (I
put a comment here to satisfy IE6) </div> at the bottom of
the tab, before the closing of the tab since I was using a lot of
floating within the tabbed panels.
If you share some code, I'm sure someone could give you a
more specific answer.

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>

Spry Tabbed Panels Help

Greetings everyone:
I had an existing Spry tabbed panel with three tabs. I then
added a fourth tab and used the up arrow to move it to the number
one slot. It displays properly as far as the tab goes, but when the
page loads the original number one tab (now number two) is always
open.
How do I make the new number one tab the default for being
open when the page loads?
Thanks in advance for any help.
Glenn

Duh! (Smacks self in the forehead!)
How about in the property inspector - Default Panel.
Duh!
From reading all the purists posts on the board (Murray,
David and the rest of the gang) I immediately started looking for
this in the code and couldn't find it, so I posted the question.
I know, looking in the code is a good thing! :)
Thanks.
Glenn

Spry Tabbed Panel - Dotted outline around selected tab

Hello there,
I noticed in Spry Tabbed Panels, once a tab is selected,
there is a dotted outline around the selected tab (the 'focus').
How do I hide it? I've seen a similar set up using JQuery which has
the dotted outline automatically disappear after a tab is selected.
I've set up a demo at my personal website to illustrate what I'm
getting at.
http://www.sgdanielwang.com/spry/tabbed.htm
Could someone spare a bit of time to have a look and advise
me?
Thanks in advance.
Dan

Thanks, Arnout.
Your solution got rid of the dotted focus outline. However
the problem persists in Internet Explorer. I read at the following
site:
http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt- i
that the focus can be hidden using a javascript which looks
for all <a> element in the HTML file and disables the focus.
But in the case of the Spry Tabbed Panel, the <a> is actually
specified in CSS. Is there a CSS 'hack' to make the focus disappear
in Internet Explorer?
Rgds,
Dan

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" />
<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>
    
</div>

<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>
    
</div>

</div>
<h3> </h3>
<script type="text/javascript">

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

Spry tabbed panels: Shows everything when it shouldn't

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.
Any suggestions.

The problem is with the tag name "s_phone".
If iPhone Safari sees a tag name containing "phone", it automatically assumes you need the phone keypad. (Something similar goes for "zip".)
Here's a test case setup someone made:
http://www.iphonewebdev.com/examples/input.html

Spry Tabbed Panels 2 - Remember Last Tab

Similar Messages

Maybe you are looking for