tree not compactible

[sandy1028]

Hi,

This code works in mozilla but not in IE. How can I make both mozilla and IE compactible.


<style type="text/css">
#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}

</style>


<script type="text/javascript">

var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}
cookieCount++;
}
else{
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(page.png)";
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
}
}
}
function showhide(el){
el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
}

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
cookieArray=new Array()
for(var q=0;q<temp.getElementsByTagName("li").length;q++){
if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
}
}
}
document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
</script>


<?
$records=array('4937#Hi aaa ccc bbb','34#hello aaa bbb ccc');

for($i=0; $i<count($records); $i++){
$data = split("#", $records[$i]);
if($i%2 == 0){ $color = '#ffffff'; }else{ $color = '#C5C7C8'; }

echo "<td width=140 align=center bgcolor=$color><ul id=\"containerul\"><li>View<ul><li>$data[1]</li></ul></li></ul>";
?>
<script type="text/javascript">
initiate();
</script>
<?
}
?>

[leatherback]

what specifically fails?

[sandy1028]

what specifically fails?

I have attached the snap shot how it looks in IE and firefox.

In IE it is not working

[cahva]

I dont know if its relevant but you are using the same id's many times which you should'nt do. Id's should only be used once. Now for example when you do this:

temp=document.getElementById("containerul");

..which "containerul" id should temp variable refer to? :)

For fix you should modify the script so that you give unique id to to ul's(for example containerul_1, containerul_2 etc.) and then use that as a parameter in the initiate script.

[sandy1028]

But it works in mozilla. How to make IE compatible. Due to passing of id it is creatng a problem is it. How to resolve it

[cahva]

I just told you how to resolve it. Do you want us to do the code for you? :) The problem why it does'nt work in IE is the id problem that I told you about. IE assigns the plus and minus pictures to the first id called "containerul".

It does not matter that it works in firefox because id's are supposed to be used only once and there4 your script is not good as it is.