Doesnot work in Internet explorer

sandy1028

This code works in firefox and doesnot work in Internet explorer.
Please tell me how to work in both IE and Firefox

<html>
<head>
    <title>Jobs Search </title>

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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


<table><tr>
                <td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate();             // This must be placed immediately after the menu in order to format it properly.
</script>
                <td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
 <script type="text/javascript">
initiate();             // This must be placed immediately after the menu in order to format it properly.
</script>

            </td>


            </tr></table>


  </body>
</html>

Piranha

What should the result be?
What result do you get in IE?
Can you remove part of the code and still get the error? If so you should remove as much as possible and post the smallest part of code that shows the problem.

sandy1028

The tree structure inside the table is not working
I works with firefox but with IE explorer the + and - image is placed in the first <td> of the table. I have attached the snap shot of the result when executed

NogDog

The first thing to do is to get IE out of "quirks mode" by starting your file out with a fully qualified doctype declaration as the very first line of the file (nothing before it, including empty lines):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

No guarantee this will fix your problem, but it might; and since it's required for your document to be valid HTML, it's a good idea anyway.

sandy1028

Hi,

How to solve this problem..... Can you please suggest me how to overcome this problem

nemonoman

IE does not like elements with duplicate name or the duplicate id.

Change the lower part of your page to avoid duplicate ids. Then pass the appropriate id to the script.

LOWER PART OF PAGE:

<td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate('containerul'); // This must be placed immediately after the menu in order to format it properly.
</script>
<td width=200 align=center bgcolor=fff789><ul id="containerul2"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate('containerul2'); // This must be placed immediately after the menu in order to format it properly.
</script>

change initiate function to accept a passed parameter (instead of hard-coding containerul)

function initiate(myid){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray.split("=")[0].replace(/ /g,"")]=cookieArray.split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById(myid);

sandy1028

Hi,

How do I use the parameters for the code

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

I am using inside the <td> the code works for firefox but it should support for IE.

nemonoman

Please note that I suggest changing your HTML code and associated scripts so that the changed script will work as you want. The code below and in my initial response now calls the initiate script with a specific element id.

Hollywood

sandy1028 wrote:

This code works in firefox and doesnot work in Internet explorer.
Please tell me how to work in both IE and Firefox

<html>
<head>
    <title>Jobs Search </title>

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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


<table><tr>
                <td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate();             // This must be placed immediately after the menu in order to format it properly.
</script>
                <td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
 <script type="text/javascript">
initiate();             // This must be placed immediately after the menu in order to format it properly.
</script>

            </td>


            </tr></table>


  </body>
</html>

You are also missing your body tag AND your end head tag (belong on top of your first table tag) also you can visit my homepage to see this exact script working in IE, only prob I have is trying to contain the expanded tree past my divs: ( good luck

PS my site is xentertainment.org

sandy1028

Sorry for the late reply.
Using of myid is not working

nemonoman wrote:
IE does not like elements with duplicate name or the duplicate id.

Change the lower part of your page to avoid duplicate ids. Then pass the appropriate id to the script.

LOWER PART OF PAGE:

<td width=200 align=center bgcolor=fff789><ul id="containerul"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate('containerul'); // This must be placed immediately after the menu in order to format it properly.
</script>
<td width=200 align=center bgcolor=fff789><ul id="containerul2"><li>View<ul><li>data[7]</li></ul></li></ul>
<script type="text/javascript">
initiate('containerul2'); // This must be placed immediately after the menu in order to format it properly.
</script>

change initiate function to accept a passed parameter (instead of hard-coding containerul)

function initiate(myid){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray.split("=")[0].replace(/ /g,"")]=cookieArray.split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById(myid);

sandy1028

Can anyone suggest cross-browser Compatibility of tree structure within the <td>.

If there are many rows and in php
if I use
echo "<td>$data[2]</td>";

Only one tree strucutre is founs in first row not in all.
How can I make IE Compatibility

JPnyc

Sorry but in this case IE is correct. Name and ID attributes must be unique. I'm surprised the pedantic Fx allows it. It's incorrect.