PDA

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



miumiu
01-07-2006, 06:54 AM
Hi,

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
document.cookie=cookiename+"="+cookievalue
}


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

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

miumiu
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
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

and

Switch Content Script
http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm


The example can be seen at
http://www.miuprint.net/ground/test.htm
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
document.cookie=cookiename+"="+cookievalue
}


Hope these findings helps.

ddadmin
01-09-2006, 03:43 AM
Hi:
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">

#tablist{
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;
}

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

.tabcontent{
display:none;
}

</style>

<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){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

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
break
}
}
}

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
collecttablinks()
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])
}
else
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)
window.onload=do_onload


</script>

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

<DIV id="tabcontentcontainer">

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

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

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

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


</DIV>

<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
document.cookie=cookiename+"="+cookievalue
}

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

</script>

Hope this helps,

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

It works like a charm now!