Smart Folding Menu tree issue with IE9

**arepato** · 04-29-2013, 06:19 PM

1) Script Title: Smart Folding Menu Tree - old (replaced by Simple Tree Menu - new)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem:

The smart folding menu won't work in IE9 anymore (expand/close). Probably affected by windows update (on the server) yet it still works on other browsers such as new versions of Chrome and Firefox. I just found out that this very old script has been replaced by Simple Tree menu script which is why I can't find anything related to this version and for a possible fix. If possible, I would prefer to fix the old version as it would require a lot of manual coding/re-writing to use the new version.

Here's a shortened version of the html page.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title></title>
<!-- <meta content="IE=edge" http-equiv="X-UA-Compatible"> -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/Department_Resources.css" />
<base target="content" />

<!-- ============================================================================================================================================================ -->
<!-- ========================= SCRIPT COURTESY OF http://www.dynamicdrive.com =================================================================================== -->
<!-- ============================================================================================================================================================ -->

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(images/fold.gif)}
#foldinglistlink{list-style-image:url(images/link.gif)}
#foldinglistdoc{list-style-image:url(images/pdf.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/2002)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var head="display:''"
img1=new Image()
img1.src="url(images/fold.gif)"
img2=new Image()
img2.src="url(images/open.gif)"

var ns6=(document.getElementById&&!document.all||window.opera)
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglistlink"||cur.id=="foldinglistdoc") {
iscontained=(cur.id=="foldheader")? 1 : 0

break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(images/open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(images/fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>
</head>
<body>

<ul>

<hr/>
<li id="foldheader" class="bodyrollupH3">Reports and Links </li>

	<ul id="foldinglist" style="display:none" style=&{head};>
	<li id="foldheader" class="bodyrollup"> Academic Programs </li>

		<ul id="foldinglist" style="display:none" style=&{head};>
		<li id="foldheader" class="bodyrollup"> Degree, Diploma, Certificate (DDCP) Programs </li>
		</ul>
	</ul>
<hr/>

</ul>


</body>

</html>

Any help is appreciated. Thank you

AR

**jscheuer1** · 05-03-2013, 01:24 AM

Updating to the newer version might not be as difficult as you think. You should be able to use your old markup. Change the id(s) and class name(s) in the simpletree.css to reflect the ones you're using. In the on page init, use your existing id(s).

But there might be a way to fix what you're using. Try this version of the older script:

Code:

<!-- ============================================================================================================================================================ -->
<!-- ========================= SCRIPT COURTESY OF http://www.dynamicdrive.com =================================================================================== -->
<!-- ============================================================================================================================================================ -->

<style type="text/css">

#foldheader{cursor:pointer; font-weight:bold ;
list-style-image:url(images/fold.gif)}
#foldinglistlink{list-style-image:url(images/link.gif)}
#foldinglistdoc{list-style-image:url(images/pdf.gif)}

</style>
<!--[if lt IE 6]>
<style type="text/css">
#foldheader{cursor: hand;}
</style>
<![endif]-->
<script type="text/javascript">

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/2002)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
//Updated for IE May 3rd, 2013 http://www.dynamicdrive.com/forums/showthread.php?73741&p=294192#post294192

var head="display:''";

;(function(){
	
var img1=new Image(),
img2=new Image();
img1.src="images/fold.gif"
img2.src="images/open.gif"
var ieversion = /MSIE (\d+)/.exec(navigator.userAgent);
ieversion = ieversion? ieversion[1] : false;
var ns6=(document.getElementById&&!document.all||window.opera||(ieversion && ieversion > 8))
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
e = e || event;
var iscontained=0,
cur = e.target || event.srcElement;
if (cur.id=="foldheader")
iscontained=1
else
while (cur.parentNode){
if (cur.id=="foldheader"||cur.id=="foldinglistlink"||cur.id=="foldinglistdoc") {
iscontained=(cur.id=="foldheader")? 1 : 0

break
}
cur=cur.parentNode
}

if (iscontained){
var foldercontent=ns6&&cur.nextSibling? cur.nextSibling.nextSibling : (cur.nextSibling || cur.all.tags("UL")[0]);
if (foldercontent && foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(images/open.gif)"
}
else if (foldercontent){
foldercontent.style.display="none"
cur.style.listStyleImage="url(images/fold.gif)"
}
}
}

if (document.addEventListener){
	document.addEventListener('click', checkcontained, false);
}
else if (document.attachEvent){
	document.attachEvent('onclick', checkcontained);
}
})();
</script>

I think the real problem was updating the pages from quirks mode to standards mode. This breaks the script in all modern IE, including 8. This version (above) works in IE 5.5, 6, 7, 8, 9 and 10, as well as other modern browsers, regardless of the DOCTYPE (quirks or standard mode).

But that's just with the very limited menu from your post. There might be problems with a more extensive menu.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thread: Smart Folding Menu tree issue with IE9

Thread Tools

Search Thread

Smart Folding Menu tree issue with IE9

Similar Threads

Smart Menu Folding Tree

Smart Folding Menu tree

Smart Folding Tree Menu

Smart Folding Menu tree

Smart Folding Menu Tree in Tables

Bookmarks

Bookmarks

Posting Permissions