Switch Content Script Cookies across all pages?

[matg]

Hello,

I've just added the Switch Content Script II to my pages, it works well bu the cookies that is set is set for tha page you are on not the whole site. Therefore if you collaspe a couple of areas and then go to another page they reopen, if you then go back a page they close.

So how do I make stay open or closed depending upon what the user has done across the whole site?

[mclover]

I had the same problem and found this script in an archive here. I updated it with the Expand/Collapse functions.

It works fine for me as a single file (SSI) that is used site-wide. You may want to experiment with var collapseprevious setting. I have it set to "yes" for my site and it works as I want it to.

Good luck with it.

Maura

[matg]

Hi Maura,

many htanks for the script

I've reaplaced the standard script with this version but I'm not getting to work do you have an online demo I could try out?

Thanks

[mclover]

Sorry, what I'm building is behind a firewall. But this should get you going:

I have a common header file (header.asp) that is used throughout my site. In that file I place the script call:
<script type="text/javascript" language="javascript" src="switchcontent.js"></script>

In the .asp files on my site I call the header file as a SSI:
<!--#include virtual="/scripts/header.asp"-->

In a common menu file (menu.asp) which is also used as a SSI, here's the HTML to use the script (I'm using button images):

<div class="button"><img id="company" name="company" src="company.gif" border="0" alt="Company" height="25" width="120" onclick="return expandcontent('sc1', this);"></div>
<div id="sc1" class="switchcontent">
<div><a href="about.asp">Who We Are</a></div>
<div><a href="what.asp">What We Do</a></div></div>

The last thing is that I use these settings in the script:

var enablepersist="on"
var collapseprevious="yes"

Setting var collapseprevious="no" also works.

Hope this helps,
Maura

[jscheuer1]

All that is really needed for a script that already sets a page only cookie to set one 'sitewide' is for the cookie code to be altered to include the setting and retrieval of a path, as opposed to only the url of the page. See:

Quirksmode Cookie Page

for information on how that is done.

[jscheuer1]

Not tested but, this should do what I propose in my previous post:

<script type="text/javascript">

/***********************************************
* Switch Content script II- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7" //persistence in # of days

var contractsymbol='minus.gif' //Path to image to represent contract state.
var expandsymbol='plus.gif' //Path to image to represent expand state.

/////No need to edit beyond here //////////////////////////

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}


function expandcontent(curobj, cid){
if (ccollect.length>0){
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="none")? "none" : ""
curobj.src=(document.getElementById(cid).style.display=="none")? expandsymbol : contractsymbol
}
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="none"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}

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 getselectedItem(){
if (get_cookie('switchState') != ""){
selectedItem=get_cookie('switchState')
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie('switchState')!=selectedItem){ //only update cookie if current states differ from cookie's
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = "switchState="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}

function do_onload(){
uniqueidn="switchStatefirsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie('switchState')!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

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

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

[mclover]

Hi John,

Thanks so much for posting a revised script! I did test it and it doesn't quite work for what I'm doing. But based on your reply I went back to the original Switch Content script here: http://www.dynamicdrive.com/dynamici...tchcontent.htm

and modified it to this (changed items are in red):

/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.


if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}

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 getselectedItem(){
if (get_cookie("switchcookie") != ""){
selectedItem=get_cookie("switchcookie")
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie="switchcookie="+selectedItem+";path=/"
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

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

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

This now works exactly as I need it to (persists sitewide from a single menu file). I have a very complicated site and am using this script for the menuing system. This works for me, might not work for others. Thank you for your help!

Maura

[matg]

thanks all I now have it working

a further question, when I go to any page that has content boxes closed I firstly see them rendered open and then a second later they close up once the browser has had time to read the cookie.

Is there anyway of it being the other way around so that the windows are always closed and then openend once the cookie is read by the browser?

Thanks

[jscheuer1]

. . . when I go to any page that has content boxes closed I firstly see them rendered open and then a second later they close up once the browser has had time to read the cookie.

Is there anyway of it being the other way around so that the windows are always closed and then openend once the cookie is read by the browser?

That's the way (the way you say you want it) the demo page here at DD works for me in IE and in FF. What browser are you using?

PLEASE: Include the URL to your problematic webpage that you want help with.

[matg]

The script is working, Im using FF or Safari, I cant link you to the pages I'm working on as its for a corporate intranet.

I have 5 panels similar to the demo page, a user can now select which ones they want open or closed and the cookie is set and retained for the whole site not just the current page - pefect

However when the page loads all the panels appear open, after the page is rendered the cookie is then read by the browser and the specified panels close up, this takes about 1 second, therefore the users sees the panels they closed as open then they shut.