View Full Version : Persistence problem with Tab Content and Switch Content script

01-07-2006, 06:54 AM

I am able to combine the script of Tab Menu and Switch Content script.
It work like a charm.

However, the problem occurs when I try to enable both their persistence 'on'.
When both of them are 'on', only the tab content persistence work.

Switch content persistence only work when i remove module of the Tab persistence script totally.The switch content persistence do not work if I turn 'off' the module. Thus, I guess the problem lies with the module script

After some trial and error, I found that the switch content persistence work when I remove this line ( in red)

function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab

Since then, I am stuck with making the cookie script work.

Hope somebody could help in solving this problem, making both persistence work together.

Greatly Appreciated.:o

01-08-2006, 10:04 AM

By combine, do you mean merge the two scripts' functionality into one, or just have both scripts on the same page, but working seperately from one another? A URL might help too.

01-08-2006, 10:45 AM
very sorry, pardon me for my ignorance...:o
and thank you so much for the reply.:)

the two DD script are

Tab Content Script


Switch Content Script

The example can be seen at
To me, both are seperate script working seperately, but exist in the same page.

I did some modification (http://www.dynamicdrive.com/forums/showthread.php?t=6678&highlight=yahoo) in the tab content script to look like yahoo tab, but I dun think it could be cause of the problem . Cause the persistence does not work, even after I place back the original script of Tab Content Script.

Here is what I find out after some trials and error.

When both script persistence is on.
Only the persistence for the tab content script is working. The switch content script is not.

The persistence for the switch content script could only be work, when I remove the persistence module totally from the script. (Switching the module to 'false' does not help)

As I mention in the previous post, removing these line (red) could only make the switch content script work. My guess is that these are the culprit.
function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab

Hope these findings helps.

01-09-2006, 03:43 AM
The problem is due to a few duplications in the function/varaibles names, plus cookie value used by the two scripts. Changing these duplicates in one of the scripts will fix the problem. Specifically, for the Tab Content Script, use the below version instead:

HEAD section:

<style type="text/css">

padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;

#tablist li{
list-style: none;
display: inline;
margin: 0;

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;

#tablist li a:link, #tablist li a:visited{
color: navy;

#tablist li a.current{
background: lightyellow;

width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;



<script type="text/javascript">

* Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "tc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)

var previoustab=""

function expandtabcontent(cid, aobject){
if (document.getElementById){
if (previoustab!="")
if (aobject.blur)
return false
return true

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
for (i=0; i<tabobjlinks.length; i++)
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor

function collecttablinks(){
var tabobj=document.getElementById("tablist")

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname+"tc"
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandtabcontent(tabcontentid, tabobjlinks[whichtab])
expandtabcontent(initialtab[1], tabobjlinks[initialtab[0]-1])

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)


BODY section (with persistence module added at the end):

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandtabcontent('tc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandtabcontent('tc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandtabcontent('tc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandtabcontent('tc4', this)" theme="#DFFFDF">Search</a></li>

<DIV id="tabcontentcontainer">

<div id="tc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />

<div id="tc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.

<div id="tc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.

<div id="tc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>


<script type="text/javascript">

//Dynamicdrive.com persistence feature add-on

var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
return returnvalue;

function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname+"tc"
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab

if (window.addEventListener)
window.addEventListener("unload", savetabstate, false)
else if (window.attachEvent)
window.attachEvent("onunload", savetabstate)


Hope this helps,

01-10-2006, 02:35 AM
Thank You So Much!! :D :D

It works like a charm now!