Jump to content

Parent node and child node

sandy1028

By sandy1028
in Javascript Help

Recommended Posts

sandy1028 Advanced Member

sandy1028

Posted
  • Author
Posted 

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

#containerul .borders {
border-left-color: blue;
border-right-width: 0px; border-left-width: 3px;
padding-right: 0px; padding-left: 0px;
}


</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("=")[0].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.className = "borders";
      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.className = "borders";
      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")?"line":"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>
<?
echo "<html>";
echo "<body bgcolor=\"#FFF0FF\" text=\"#000000\">";
$lines = file('phonedb.txt');
echo "<ul id=\"containerul\"><li>View Tree ";

echo "<ul><li>Name";

echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[0]</li>";
}
echo "</ul></li>";

echo "<li>Address";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[1]</li>";
}
echo "</ul></li>";



echo "<li>Age";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[2]</li>";
}
echo "</ul></li>";

echo "<li>Email";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[3]</li>";
}
echo "</ul></li>";
echo "<li>Mobile";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[4]</li>";
}
echo "</ul></li>";


echo "<li>Residence Number";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[5]</li>";
}
echo "</ul></li>";



echo "</li></ul>";

?>

<script type="text/javascript">
initiate();
</script>
<?php
echo "</body>";
echo "</html>";
?>

 

This code works fine. But how to include the horizontal and verticle as the attached image

 

[attachment deleted by admin]

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.