Results 1 to 5 of 5

Thread: Persistence problem with Tab Content and Switch Content script

  1. #1
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Persistence problem with Tab Content and Switch Content script

    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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

    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.

  3. #3
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    very sorry, pardon me for my ignorance...
    and thank you so much for the reply.

    the two DD script are

    Tab Content Script
    http://www.dynamicdrive.com/dynamici...tabcontent.htm

    and

    Switch Content Script
    http://www.dynamicdrive.com/dynamici...tchcontent.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 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.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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):

    Code:
    <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,

  5. #5
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank You So Much!!

    It works like a charm now!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •