PDA

View Full Version : Contractible Headers Script & swap image???



fizzyfozzy
06-14-2005, 03:44 PM
Script: Contractible Headers Script
http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

Hi,

I am using the contractible headers script with no problems at all.
However I was wondering whether it is possible to combine it with a swap image behaviour?
I would like to have a plus next to my header which changes to a minus once expanded - like a menu tree - however I would prefer to use this script rather than the smart folding menu tree one.

I attempted this using a swap image behaviour in dreamweaver but I can only get it to change once with that & not back again when clicked again.

Can anyone help me out with this?

Thanks a lot

Michelle :)

jscheuer1
06-15-2005, 08:16 AM
You can do that without using images. Try these modifications to the original demo:

Below the line that says:
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)add this variable:
var nbs=(document.getElementById&&!document.all)? ' ' : ''Replace 'function contractcontent' with this version:
function contractcontent(omit,omitspan){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
var spans=document.getElementsByTagName('span')
for (i = 0; i < spans.length; i++){
if (spans[i].id.indexOf('sp')!==-1&&spans[i].id!==omitspan)
spans[i].innerHTML='+'
}
}Replace 'function expandcontent' with this one:
function expandcontent(cid,sid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid,sid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'
}
}Replace 'function revivecontent' with:
function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++){
document.getElementById(selectedComponents[i]).style.display="block"
var spansId='sp'+document.getElementById(selectedComponents[i]).id.substr(2)
document.getElementById(spansId).innerHTML=nbs+'-'
}
}Finally, add this to your html markup:
<span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center">+</span> Make sure that the id="sp1" uses the same number as the id="sc#" that follows it. And be sure to include the new span id in the call for expandcontent(). Ex:
<h3 onClick="expandcontent('sc1','sp1')" style="cursor:hand; cursor:pointer"><span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center">+</span> What is JavaScript?</h3>
<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>

fizzyfozzy
06-15-2005, 01:49 PM
Thanks for that, it works really well.

One more question though - what if I wanted to use images? Say if I wanted arrows instead of plous & minus? Is that also possible?

jscheuer1
06-15-2005, 07:18 PM
You are better off using characters rather than images due to load time problems with dial-up users and the possibility that a user may have images turned off. There are arrow characters you can use:

&#x2192; an arrow that looks something like this but, much better: ->

and:

&#x2193; an arrow that points down.

You can substitute the &#x2192; for all the plus (+) characters we inserted in the script and html, and the &#x2193; for all the minus (-) characters but, it gets a little more complicated. This line in the script:
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'must be replaced with these two lines:
var itemChar=escape(document.getElementById(sid).innerHTML)
document.getElementById(sid).innerHTML=(itemChar.indexOf('%u2193')!==-1) ? '&#x2192;' : nbs+'&#x2193;'owing to the way javascript reads innerHTML using number entities.

If you must, images can be used in place of characters. For example, plus can be replaced by <img src="closed.gif"> and minus by <img src="open.gif">. If you go that route, the line:
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'needs to be replaced by:
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML.indexOf('open.gif')!==-1)? '<img src="closed.gif">' : '<img src="open.gif">'and get rid of all the occurrences of:
nbs+and this line:
var nbs=(document.getElementById&&!document.all)? '&nbsp;' : ''

fizzyfozzy
06-16-2005, 08:35 AM
Thanks very much for all your help. It is very much appreciated!

button1
03-10-2006, 01:05 PM
Thank you jscheuer1 for all this help! You are amazing!!

I am able to get the Contractible Headers script to function perfectly without images. And, there is no problem with the + and – signs. And again no problem with the &#x2192; &#x2193; arrows.

However when applying your solution (images can be used in place of characters) I run into a little difficulty.

I replaced the + with <img src="closed.gif"> and the - with <img src="open.gif">. I also replaced the document.getElementById(sid).innerHTML with the new one. Got rid of all the occurrences of nbs+. And removed the var nbs=… line

What I get:

1. Everything loads OK – all headers display the <img src="closed.gif"> image – Perfect.
2. When I click on a header the div opens and the <img src="open.gif"> image is displayed – Perfect.
3. When I click on that same header the div closes but the image does not swap back to the <img src="closed.gif"> image – NOT Perfect.
4. The image only swaps to the <img src="closed.gif"> image when I select a different header – Perfect.

Any ideas what I'm missing? :confused:

jscheuer1
03-10-2006, 03:04 PM
Sounds like you did everything correctly but, perhaps not. Here is a working demo with images:


<!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">
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
* Modified by jscheuer1 to use images with the header elements in
* http://www.dynamicdrive.com/forums
***********************************************/

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)


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

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit,omitspan){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
var spans=document.getElementsByTagName('span')
for (i = 0; i < spans.length; i++){
if (spans[i].id.indexOf('sp')!==-1&&spans[i].id!==omitspan)
spans[i].innerHTML='<img src="closed.gif">'
}
}

function expandcontent(cid,sid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid,sid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML.indexOf('open.gif')!==-1)? '<img src="closed.gif">' : '<img src="open.gif">'

}
}

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

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=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
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 (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>
<h3 onClick="expandcontent('sc1','sp1')" style="cursor:hand; cursor:pointer"><span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> What is JavaScript?</h3>
<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>

<h3 onClick="expandcontent('sc2','sp2')" style="cursor:hand; cursor:pointer"><span id="sp2" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> Difference betwen Java & JavaScript?</h3>
<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>

<h3 onClick="expandcontent('sc3','sp3')" style="cursor:hand; cursor:pointer"><span id="sp3" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> What is DHTML?</h3>
<div 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.
</div>
</body>
</html>

button1
03-10-2006, 04:24 PM
Still can’t get it. I even copied and pasted your working demo into my include

A few of things however:

1. I am currently using your modified cookie code to function for the site not just the page (http://www.dynamicdrive.com/forums/showthread.php?t=6253). Will this effect the script?

2. Re: your working demo. You show var collapseprevious="no" – I am using “yes”. Will this effect the script?

3. I also noticed in the code you provided - the function revivecontent() still shows .innerHTML='-' . Is this OK?

jscheuer1
03-10-2006, 04:51 PM
1 ) No.
2 ) No.
3 ) Problem, it should read:


document.getElementById(spansId).innerHTML='<img src="open.gif">'

However, I'm a bit concerned about your saying:


I even copied and pasted your working demo into my include

None of this has been tested out as an include. That can often throw off a script.

button1
03-10-2006, 07:42 PM
Thanks again jscheuer1 you’ve been such a great help but no matter what I try I always get the same result. I tried:

1. Removing the include and add the script to my navigation page.
2. Change the function revivecontent() to read .innerHTML='<img src="open.gif">'
3. Copied and pasted your revised script to my page

When the page firsts loads the image is correct (<img src="closed.gif">). When I click on the header the div opens and the image swaps perfectly (<img src="open.gif">). But when I click on that same header again to close the div the image does not swap to its original state – it stays the same (<img src="open.gif">). The only way it swaps to its original state (<img src="closed.gif">) is when I click on a different header.

I’m getting very frustrated. I think I’ve tried everything. If I cannot get the script to work I will use the script without images. Both of your other solutions (+ and – signs OR arrows) work great! Too bad though…

Thanks Bill

jscheuer1
03-10-2006, 08:30 PM
One thing that sometimes happens with pages that depend upon cookies to decide how to display is that an older cookie is hanging around. Also, with any page that you are updating frequently, an older cached copy may be displayed by the browser. Clear your browser's cache and cookies if you haven't already. If that doesn't get it, provide a link to the problem page and I will see if I can find the trouble.

button1
03-10-2006, 10:14 PM
OK OK OK OK I finally got it. Sometimes I'm a real dummy.

At function expandcontent(cid,sid), LINE: document.getElementById(sid).innerHTML...

In lieu of showing ('open.gif') I was showing the actual path to the image('../assets/open.gif')

Thanks again jscheuer1. You're a genius! :)