Switch Content II

**twistedpixel** · 05-30-2006, 11:36 PM

I've adapted the script to work so that all the content areas are closed upon arriving at the page with the help of the script posted here.

The problem I am having is that the initial state of the plus / minus image is starting with the minus and only changing to the plus after opening and closing the content area for the first time.

I cannot find out how to enable the plus graphic to be the initial state and not the minus. Any help?

**jscheuer1** · 05-31-2006, 08:07 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.showstate{ /*Definition for state toggling image */
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}

.headers{
width: 400px;
font-size: 120%;
font-weight: bold;
border: 1px solid black;
background-color: lightyellow;
}

.switchcontent{
width: 400px;
border: 1px solid black;
border-top-width: 0;
}

</style>

<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
* Modified to start collapsed and collapse previous by
* jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

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.
var collapseprevious=1 //Set to 1 to collapse previous, 0 for previously opened items to remain open.

/////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, cid){
var inc=0
while (ccollect[inc]){
if (typeof cid=='undefined'||!(ccollect[inc].id==cid))
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}


function expandcontent(curobj, cid){
if (collapseprevious)
sweeptoggle('contract', 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=""
}

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(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

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

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
sweeptoggle('contract')
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && 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>
</head>
<body>
<!--Optional Expand/ Contact All links. Remove if desired-->
<div style="margin-bottom: 5px"><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>

<div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />What is JavaScript?</div>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<br />

<div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Difference betwen Java & JavaScript?</div>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>
<br />

<table border="0" cellspacing="0" cellpadding="0">
  <tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc3')" />What is DHTML? (table example)</td></tr>
  <tr><td id="sc3" class="switchcontent">DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.</td></tr>
</table>
</body>
</html>

**twistedpixel** · 06-01-2006, 01:53 AM

john,

thanks for the script. Its no quit what i was trying to do I don't think. I tried to impliment the pieces I assumed were the changes and it didn't work.

I am using the script your posted here a while back that keeps all the content areas collaposed upon arrival. The issue I am having is the image being shown is still the contractsymbol image and not the expandsymbol image upon arrival. I would think the user would want the image to indicate more and not indicate less which the minus does. Does this make sense? Here is the script I am using thus far. I am not using any of the stylesheet elements except the showsate style.

Code:

<!--

var initialstate=0 //0 for contracted, 1 for expanded
var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7" //persistence in # of days

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

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

if(!initialstate){
if(document.getElementById)
document.write('<style id="styletest" type="text/css">\
#nothing {\
}\
<\/style>')

if(typeof document.getElementById('styletest').disabled=='boolean')
document.write('<style id="added" type="text/css">\
.switchcontent{\
display:none;\
}\
<\/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, operaFlag){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=ec=="contract"? "none" : ""
inc++
}
revivestatus()
if (enablepersist=="on"&&window.opera&&!operaFlag)
saveswitchstate();
}

function expandcontent(curobj, cid){
if (ccollect.length>0){
var el=document.getElementById(cid)
el.style.display=el.style.display!="none"? "none" : ""
curobj.src=(el.style.display=="none")? expandsymbol : contractsymbol
}
if (enablepersist=="on"&&window.opera)
saveswitchstate();
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++){
document.getElementById(selectedComponents[i]).style.display=initialstate? "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(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

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

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(!initialstate){
sweeptoggle('contract', 1)
document.getElementById('added').disabled=true
}
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && 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

// -->

**jscheuer1** · 06-01-2006, 05:54 AM

What exactly didn't the page in my previous post in this thread do that you wanted done?

**twistedpixel** · 06-01-2006, 02:52 PM

the initial image shown is the minus image and not the plus image. So it looks like you can only make it smaller when in reality you are making it bigger.

The plus image only appears after you've opened and close the content area for the first time

**jscheuer1** · 06-01-2006, 06:50 PM

Not. Um, did you copy the entire code exactly as written in the post and test it as a complete page? And, had you previously renamed the images or something?

**twistedpixel** · 06-03-2006, 01:52 AM

I am using the javascript exaclty as posted. I am not using the stylesheet or the div areas. My entire page is tables and other than that everything is the same. I didn't think the stylesheet or using divs effected the way the script worked.

If it will help I can post the page and make it live so you can see

**twistedpixel** · 06-07-2006, 07:10 PM

Here is the link to the area in testing you can see what i mean about the image not being correct upon load.

Any help

http://vintageswank.com/roadtrip.html

Thread: Switch Content II

Thread Tools

Search Thread

Switch Content II

thanks

Bookmarks

Bookmarks

Posting Permissions