PDA

View Full Version : Tab Content Script - Please help



ecreas01
10-31-2005, 02:36 PM
I am using this script: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

I can't provide you with a link to specifically show you the problem as it is an intranet with sensitive info behind it.

On the log-in page I use this script to show 7 tabs (I have persistence turned on). After the log-in, the user, depending on their rights, will have a script to show either 1-3 tabs. I preload the javascript in the <head> and depending on the user's rights they will get one of three .js files, each specifying a different number for the tabs (e.g., var initialtab=[3, "sc1"]).

I have two problems here. First (the biggest problem), is that I use one script on the log-in page (for 7 tabs) and another for the page that shows up after log in (1-3 tabs). When you log-in, I get the following JavaScript errors: "'null' is null or not an object," "'tabsource' index is not defined," and "'undefined' is null or not an object." Now, I have played around with it and if I always use 7 tabs throughout my session I will not have this problem--it is only after I switch from seven to a different number. I will post the code below.

The second issue is that it doesn't seem to work correctly for only one tab. Please help. I'm on a time crunch here and I could any help possible. :confused:

****Please note that the initialtab is set to 7 in the log-in and either 1-3 after log-in****

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

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

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

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

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=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(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



var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="sitewide" //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
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab
document.cookie=cookiename+"="+cookievalue
}

window.onunload=savetabstate

/***********************************************
* Tab Content script- 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
***********************************************/

ddadmin
10-31-2005, 08:26 PM
With persistence turned on, the # of tabs on each page that use this script needs to be the same. Imagine if the user were to click on the 4th tab on pageA with 7 tabs, then navigate to pageB where you've only specified 3 tabs on the page. The script tries to select the 4th tab on that page due to persistence, but cannot.

A compromise would be for the script to detect when the persisted tab is missing, and simply default to loading the first tab in that case. To do this, simply replace function do_onload() with the below version instead:


function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
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]
if (document.getElementById(tabcontentid)!=null) //NEW SELECTIVE PERSIST CODE
expandcontent(tabcontentid, tabobjlinks[whichtab])
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) //NEW SELECTIVE PERSIST CODE
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

Hope this helps,

ecreas01
11-01-2005, 03:46 PM
Thank you so much, ddadmin. It makes perfect sense and it worked like a charm. You rock! :D