PDA

View Full Version : Contractible Headers Script Help



theishkid
01-30-2006, 05:14 PM
Hi there... This is my first javascript so I need a little help with these expandable menus. My test site works fine in Netscape, Safari, and Firefox, but for some reason will not work right in Internet Explorer. I'm wondering if there is a quick fix or something I just don't see. Here is the tutorial and code I used... http://dynamicdrive.com/dynamicindex1/navigate2.htm
And here is my test site on the server... http://www.dawsonsrejects.com/test/bradbenefield

I have to do this in two parts, it won't let me add the entire page so I am just putting in the code I got from dynamicdrive and then the code I did to actually do the menus. If you need the entire site please let me know.

Thank you so much in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //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){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

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

theishkid
01-30-2006, 05:19 PM
And here is some of my coding inside the page....



<th width="250" scope="col"><table width="250" height="100%" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th align="left" valign="top" scope="col">
<h onClick="expandcontent('video')" style="cursor:hand; cursor:pointer"><img src="images/video.gif" width="250" height="25"></h>
<div id="video" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('video/kansasvideo.mov','','status=yes,resizable=yes,width=480,height=390')" onMouseOver="MM_swapImage('kansas','','images/kansas2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/kansas1.gif" name="kansas" width="250" height="18" border="0" id="Image1"></a>
</div>

<h onClick="expandcontent('photo')" style="cursor:hand; cursor:pointer"><img src="images/photography.gif" width="250" height="25"></h>
<div id="photo" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('photography/okburning/index.htm','','status=yes,resizable=yes')" onMouseOver="MM_swapImage('burning','','images/okcburning2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/okcburning1.gif" name="burning" width="250" height="18" border="0" id="Image1"></a>
<a href="javascript:;"
</div>

<h onClick="expandcontent('web')" style="cursor:hand; cursor:pointer"><img src="images/webdesign.gif" width="250" height="25"></h>
<div id="web" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('http://band.dawsonsrejects.com','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')" onMouseOver="MM_swapImage('dawsons','','images/dawsons2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/dawsons1.gif" name="dawsons" width="250" height="18" border="0"></a>
</div>

<h onClick="expandcontent('print')" style="cursor:hand; cursor:pointer"><img src="images/print.gif" width="250" height="25"></h>
<div id="print" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('print/saltnovembercover.jpg','','status=yes,scrollbars=yes,resizable=yes,width=475,height=625')" onMouseOver="MM_swapImage('nov','','images/saltnov2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/saltnov1.gif" name="nov" width="250" height="18" border="0" id="nov"></a>
<a href="javascript:;" onClick="MM_openBrWindow('print/saltjanuarycover.jpg','','status=yes,scrollbars=yes,resizable=yes,width=475,height=625')" onMouseOver="MM_swapImage('jan','','images/saltjan2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/saltjan1.gif" name="jan" width="250" height="18" border="0" id="jan"></a>
</div>

<img src="images/illustrations.gif" width="250" height="25">


<h onClick="expandcontent('digital')" style="cursor:hand; cursor:pointer"><img src="images/digital.gif" width="250" height="18"></h>
<div id="digital" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('digital/dawsons.jpg','','status=yes,width=415,height=625')" onMouseOver="MM_swapImage('showposter','','images/showposter2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/showposter1.gif" name="showposter" width="250" height="18" border="0"></a>
</div>

<h onClick="expandcontent('airbrush')" style="cursor:hand; cursor:pointer"><img src="images/airbrush.gif" width="250" height="18"></h>
<div id="airbrush" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('airbrush/homer.jpg','','status=yes,width=400,height=625')" onMouseOver="MM_swapImage('homer','','images/homer2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/homer1.gif" name="homer" width="250" height="18" border="0"></a>
<a href="javascript:;" onClick="MM_openBrWindow('airbrush/deco.jpg','','status=yes,width=625,height=375')" onMouseOver="MM_swapImage('decoman','','images/decoman2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/decoman1.gif" name="decoman" width="250" height="18" border="0"></a>
</div>

<h onClick="expandcontent('mixed')" style="cursor:hand; cursor:pointer"><img src="images/mixedmedia.gif" width="250" height="18"></h>
<div id="mixed" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('illustrations/xbox.jpg','','status=yes,width=625,height=475')" onMouseOver="MM_swapImage('xbox','','images/videogame2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/videogame1.gif" name="xbox" width="250" height="18" border="0" id="xbox"></a>
<a href="javascript:;" onClick="MM_openBrWindow('illustrations/city.jpg','','status=yes,width=610,height=470')" onMouseOver="MM_swapImage('city','','images/city2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/city1.gif" name="city" width="250" height="18" border="0" id="city"></a>
</div>


<h onClick="expandcontent('other')" style="cursor:hand; cursor:pointer"><img src="images/otherbig.gif" width="250" height="25"></h>
<div id="other" class="switchcontent">
<a href="javascript:;" onClick="MM_openBrWindow('flash/oldsite1/index.html','','status=yes,resizable=yes,width=950,height=750')" onMouseOver="MM_swapImage('oldport1','','images/port12.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/port11.gif" name="oldport1" width="250" height="18" border="0"></a>
<a href="javascript:;" onClick="MM_openBrWindow('flash/oldsite2/index.html','','status=yes,resizable=yes,width=825,height=450')" onMouseOver="MM_swapImage('oldport2','','images/port22.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/port21.gif" name="oldport2" width="250" height="18" border="0"></a>
<a href="javascript:;" onClick="MM_openBrWindow('flash/draw/brad.html','','status=yes,resizable=yes,width=850,height=650')" onMouseOver="MM_swapImage('drawtest','','images/drawtest2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/drawtest1.gif" name="drawtest" width="250" height="18" border="0"></a>
<a href="javascript:;" onClick="MM_openBrWindow('flash/box.swf','','status=yes,resizable=yes,width=500,height=300')" onMouseOver="MM_swapImage('boxtest','','images/boxtest2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/boxtest1.gif" name="boxtest" width="250" height="18" border="0"></a>
<a href="javascript:;" onClick="MM_openBrWindow('flash/vacation.swf','','status=yes,resizable=yes,width=725,height=500')" onMouseOver="MM_swapImage('vacation','','images/vacation2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/vacation1.gif" name="vacation" width="250" height="18" border="0"></a></div>

Twey
01-30-2006, 05:48 PM
And the problem...?

theishkid
01-30-2006, 08:38 PM
the problem is that the site works in everything but Internet Explorer. What is wrong with my site/code that makes it work in everything except IE? (It will not work in IE for mac or windows)

theishkid
01-31-2006, 01:22 AM
nobody has any help they can offer?

jscheuer1
01-31-2006, 07:12 AM
I have no idea why this is but in IE6 PC all I needed to do was a global search and replace on two items:

search for:
<h

replace all with:
<h3

and search for:
</h>

replace all with:

</h3>

After that it worked fine. I have no idea why IE6 didn't like the <h> tag for this. OK, but this made the layout look crappy, so I added this to the style section:


h3 {
display:inline;
}

And one final adjustment, with the image 'digital.gif' in the HTML code:


<img src="images/digital.gif" width="250" height="18" style="margin-top:0!important;margin-top:-4px;">

After that it looked and worked fine in IE6 and FF. I didn't check Opera though.

Some serious advice though, you really should redesign the page so as to not use all those .gif's. It takes way too long to load and they all could be replaced by cleverly crafted css style and plain text. This would also eliminate the need for all the image rollovers (and the script for them), which could be css hovers.

Added Later: Turns out that, with the above modifications, it works in Opera, it didn't before.