PDA

View Full Version : Switch Content II



codersteve
04-03-2006, 07:06 PM
Didn't want to cloud up ChasDevlin's SwitchContent II thread, even though my question might sound similar.

I simply want to be able to pull up the page, with all of the dynamic cells contracted by default, instead of them being Expanded.

I've read the javascript a couple of times, but just figured there'd be an easy way to do it.

Obviously, I could try Auto-Loading, upon page load, the "sweeptoggle" function,
as in:
sweeptoggle(contract), but there's got to be a better way of doing it.. like simply reversing the initial state through some variable.. ( that I can't find :D )

Thanks

jscheuer1
04-04-2006, 04:16 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Switch Content script II w/initial closed option &amp; Opera bug fixes</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: 95%;
font-weight: bold;
font-family:verdana, sans-serif;
border: 1px solid black;
background-color: lightyellow;
padding:3px;
margin-top:2px;
}

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

</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 by jscheuer1 in http://www.dynamicdrive.com/forums to
* be optionally initially closed and allow for persistence in Opera
***********************************************/

var initialstate=0 //0 for contracted, 1 for expanded
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 //////////////////////////

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

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

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

<table border="0" cellspacing="0" cellpadding="0" style="margin-top:2px;">
<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>

codersteve
04-04-2006, 04:21 AM
Thanks John. That works

RoliRazor
11-15-2006, 10:48 AM
It worked for me too, thanks. Great script!
I just have another request to this. I am using the unfold mechanism together with the title of that box, see script extract below. Its on a FAQ page and the users will most likely click on the question to see the answer and not on the plus icon.

It works fine but what happens is the plus doesn't change to minus, because expandcontent(this <- this is not the icon ressource of course. How would I need to change the script (probably add a similar function?) to make the state of the corresponding symbol change too?


<div class="title2">
<img src="minus.gif" class="showstate" onClick="expandcontent(this, 'se25')" /><a href="javascript:void(0)" onClick="expandcontent(this, 'se25')">I have a question that is not answered here.</a></div>
<div id="se25" class="switchcontent">Just send us a note with your question using the contact form. We will be happy to answer to the email address you provided.
</div>
Thanks for an answer,
Roli
&#176;&#191;&#176;

RoliRazor
11-16-2006, 03:25 PM
Wow, I am not THAT stupid :D - found it out myself. :)
So I wanna present the solution here, too. In case someone is interested, its fairly simple.
Just add an id='xxxi' to each src="minus.gif" where xxx is the same as the expression behind the 'this' parameter of expandcontent, see example here


<div class="title2">
<img id='se25i' src="minus.gif" class="showstate" onClick="expandcontent(this, 'se25')" />
<a href="javascript:void(0)" onClick="expandcontent(this, 'se25')">
I have a question that is not answered here.</a></div>
<div id="se25" class="switchcontent">Just send us a note with your question using the contact form. We will be happy to answer to the email address you provided.
</div>

and then add these two lines on the end of the expandcontent function:


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
var el1=document.getElementById(cid+'i')
el1.src=(el.style.display=="none")? expandsymbol : contractsymbol
}

Thats all. I guess it's fairly simple for someone who understands all these DOM features of a browser.
Thank you guys.
cu,
Roli
&#176;&#191;&#176;