Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: >How to totaly delete the code of a "tree" ???


Message #1 by "Gerald from Toulouse" <geraldp@w...> on Wed, 17 Jan 2001 11:11:16 -0000
I really would know how to delete the totality of the "tree" by clicking
on a button in order to replace the current "tree" by an other one in the
same document (coz I want to display different "trees" in the same layer).
I know the "outerHTML" method can be used, but I can't manage to set it in
the code.
Could you please tell me how to place the different "trees" in other file
and call them with a common function.
I know that I ask a lot, but you'll be really nice if you HELP ME!

Gérald from Toulouse [(France) > Excuse my English]
contact : geraldp@w...

THE code...

<HTML>
   <HEAD>
      <STYLE>
         SPAN {cursor: hand ; font-size: 8pt;
font-family:Verdana,Arial,Helvetica;}
         .bright {color: red ; font-size: 8pt;
font-family:Verdana,Arial,Helvetica;}
         .dark {color: black ; font-size: 8pt;
font-family:Verdana,Arial,Helvetica;}
      </STYLE>

 <SCRIPT LANGUAGE="JScript">
    var curLevel = 0;
    var prevElement = null;
    var prevLevel;
    var prevID;
    var builtHTML = "";

 function MakeTree() {
    var coll = document.all;
    var level;
    var id;
    var tagBegin;
    for (i=document.body.sourceIndex+1; i<coll.length; i++) {
       switch (coll[i].tagName.substring(0,3)) {
          case "LVL":        
             level = parseInt(coll[i].tagName.charAt(3));
             break;
          default:
             level = -1;
       }
       if (level!=-1) {
          id = i;
          addElem(coll[i], level, id);
       }
    }
    addElem(prevElement,0, prevID);
    divWrap();
    //   document.all.Debug.outerText = MyTree.innerHTML;
 }

 function addElem(el, level, id) {
    if (prevElement == null)
    {
       prevElement = el;
       prevLevel = level;
       prevID = id;
       return;
    }
    var s = " ";
    for (var j=0; j<prevLevel; j++)
       s = s + s;
 
    if (level > curLevel)
    {
       builtHTML += "<SPAN STYLE='cursor:default' CLASS='dark' IURL='" 
                 + prevElement.getAttribute('IURL') 
                 + "'>"               
		 + s 
                 + "<IMG STYLE='cursor:hand' SRC='expand.gif' ID='OUT" 
                 + prevID.toString() 
                 + "' CLASS='collapsible' > " 
                 + prevElement.getAttribute('ITEXT') 
                 + "<BR></SPAN>" 
                 + "<DIV ID='OUT" 
                 + prevID.toString() 
                 + "D' STYLE='display:none'  >"; 
       curLevel = level;
    }
    else
    {
       builtHTML += "<SPAN STYLE='cursor:hand'  CLASS='dark' IURL='" 
                 + prevElement.getAttribute('IURL') 
                 + "' FLASHER>" 
                 + s 
                 + "<IMG STYLE='cursor:default' SRC='leaf.gif'> " 
                 + prevElement.getAttribute('ITEXT') 
                 + "<BR></SPAN>";
       if (level < curLevel)
       {
          for (var tplev = level; tplev < curLevel; tplev++)
             builtHTML += "</DIV>";
          curLevel = level;
       }
    }   
  
    prevElement = el;
    prevLevel = level;
    prevID = id;
 }

 function divWrap() {
    while (curLevel > 0)
    {
       builtHTML +=      "</DIV>";
       curLevel--;
    }
    document.all.MyTree.innerHTML=builtHTML;
 }

 function clickHandler() {
    var colId, colElem ;
    var tpURL;
    gifElem = window.event.srcElement;
 
    if (gifElem.className == "collapsible") {
 
       colId = gifElem.id + "D";
       colElem = document.all(colId);
 
       if (colElem.style.display == "none") {
          colElem.style.display = "" ;
          gifElem.src = "fixed.gif" ;
       } else {
          colElem.style.display = "none" ;
          gifElem.src = "expand.gif" ;
       }
    }
    if (gifElem.className == "bright")
      {
window.open(gifElem.getAttribute("IURL"),"","top=100,left=400,height=400,width=200,menubars=no,toolbars=no,location=no,scrollbars=no
,resizable=yes");

       }
 }
 function MakeBright() {
    el = event.srcElement ;
    if (el.getAttribute("FLASHER") != null) {
       el.className = "bright" ;
    }
 }
 
 function MakeDark() {
    el = event.srcElement ;
    if (el.getAttribute("FLASHER") != null) {
       el.className = "dark";
    }
 }
</SCRIPT>
</HEAD>
 <BODY  ONLOAD="MakeTree()">
 
 <LVL0  ITEXT="Parent1"></LVL0>   
    <LVL1  ITEXT="Item1" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item2" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item3" IURL="" ITARGET=""></LVL1>
 <LVL0  ITEXT="Parent2"></LVL0>   
    <LVL1  ITEXT="Item1" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item2" IURL="" ITARGET=""></LVL1>
 <LVL0  ITEXT="Parent2"></LVL0>   
    <LVL1  ITEXT="Item1" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item2" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item3" IURL="" ITARGET=""></LVL1>
    <LVL1  ITEXT="Item4" IURL="" ITARGET=""></LVL1>

    <DIV ID=MyTree>
    </DIV>
    <DIV ID=Debug>
    </DIV>
    </TD></TR>
 </TABLE>
<SCRIPT LANUGAGE="JScript">
   document.onclick = clickHandler;
   document.onmouseover = MakeBright;
   document.onmouseout = MakeDark;
</SCRIPT>

</BODY>
</HTML>

  Return to Index