I'm having a strange problem with FFox crashing and IE not reading the script correctly. Can somebody help me out with this, or provide me with a better layout?
Thanks.
<html>
<head>
<script type="text/javascript">
CLOSED_IMAGE='images/plus.gif';
OPEN_IMAGE='images/minus.gif';
function makeCollapsible(listElement){
listElement.style.listStyle='none';
listElement.style.marginLeft='0';
listElement.style.paddingLeft='0';
var child=listElement.firstChild;
while (child!=null){
if (child.nodeType==1){
var list=new Array();
var grandchild=child.firstChild;
while (grandchild!=null){
if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
grandchild.style.display='none';
list.push(grandchild);
}
grandchild=grandchild.nextSibling;
}
var node=document.createElement('img');
node.setAttribute('src',CLOSED_IMAGE);
node.setAttribute('class','collapsibleClosed');
node.onclick=createToggleFunction(node,list);
child.insertBefore(node,child.firstChild);
}
child=child.nextSibling;
}
}
function createToggleFunction(toggleElement,sublistElements){
return function(){
if (toggleElement.getAttribute('class')=='collapsibleClosed'){
toggleElement.setAttribute('class','collapsibleOpen');
toggleElement.setAttribute('src',OPEN_IMAGE);
}else{
toggleElement.setAttribute('class','collapsibleClosed');
toggleElement.setAttribute('src',CLOSED_IMAGE);
}
for (var i=0;i<sublistElements.length;i++){
sublistElements[i].style.display=
(sublistElements[i].style.display=='block')?'none':'block';
}
}
}
</script>
</head>
<body bgcolor="#000000" onLoad="makeCollapsible(document.getElementById('D2Litems'));">
<font face="Verdana, Geneva, sans-serif">
<ul id="D2Litems">
<li> <strong>Basics</strong>
<ul>
<li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/role_switching.pdf" target="frame">Switching Roles</a> </li>
<li><img src="images/video.gif"> <a href="walkthroughs/videos/vidchangerole.html" target="frame">Switching Roles</a> </li>
<li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/activate_course.pdf" target="frame">Activating a Course</a> </li>
</ul>
</li>
</ul>
**I snipped all the additional menus here, to save some room. In doing so, I might have snipped some other stuff too, but if it's like, "hey this font tag isn't closed" don't worry about it :)
</font>
</center>
</body>
</html>
Question
TheTempestSonata
I'm having a strange problem with FFox crashing and IE not reading the script correctly. Can somebody help me out with this, or provide me with a better layout?
Thanks.
<html> <head> <script type="text/javascript"> CLOSED_IMAGE='images/plus.gif'; OPEN_IMAGE='images/minus.gif'; function makeCollapsible(listElement){ listElement.style.listStyle='none'; listElement.style.marginLeft='0'; listElement.style.paddingLeft='0'; var child=listElement.firstChild; while (child!=null){ if (child.nodeType==1){ var list=new Array(); var grandchild=child.firstChild; while (grandchild!=null){ if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){ grandchild.style.display='none'; list.push(grandchild); } grandchild=grandchild.nextSibling; } var node=document.createElement('img'); node.setAttribute('src',CLOSED_IMAGE); node.setAttribute('class','collapsibleClosed'); node.onclick=createToggleFunction(node,list); child.insertBefore(node,child.firstChild); } child=child.nextSibling; } } function createToggleFunction(toggleElement,sublistElements){ return function(){ if (toggleElement.getAttribute('class')=='collapsibleClosed'){ toggleElement.setAttribute('class','collapsibleOpen'); toggleElement.setAttribute('src',OPEN_IMAGE); }else{ toggleElement.setAttribute('class','collapsibleClosed'); toggleElement.setAttribute('src',CLOSED_IMAGE); } for (var i=0;i<sublistElements.length;i++){ sublistElements[i].style.display= (sublistElements[i].style.display=='block')?'none':'block'; } } } </script> </head> <body bgcolor="#000000" onLoad="makeCollapsible(document.getElementById('D2Litems'));"> <font face="Verdana, Geneva, sans-serif"> <ul id="D2Litems"> <li> <strong>Basics</strong> <ul> <li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/role_switching.pdf" target="frame">Switching Roles</a> </li> <li><img src="images/video.gif"> <a href="walkthroughs/videos/vidchangerole.html" target="frame">Switching Roles</a> </li> <li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/activate_course.pdf" target="frame">Activating a Course</a> </li> </ul> </li> </ul> **I snipped all the additional menus here, to save some room. In doing so, I might have snipped some other stuff too, but if it's like, "hey this font tag isn't closed" don't worry about it :) </font> </center> </body> </html>Link to comment
Share on other sites
10 answers to this question
Recommended Posts