Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Tree (subgroups, how to close)

    Hi, when you click on any link it will open a group of "sublinks" but i'm wondering how to do this:

    When a subgroup is open and you click another link (not in sub) the previous group will auto-close so you don't end up with hundereds of open groups, thanks.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>VJ DATA</title>
    <link rel="stylesheet" href="style/sortiment.css">
    <script>
    <!--
    
    var gEBI = (document.getElementById) ? true : false;
    var da = (document.all) ? true : false;
    var lay = (document.layers) ? true : false;
    
    function Meny(ID)
     {
     	var ktgID = "ktg_" + ID;
     	var imgID = "img_" + ID;
     	
     	if (gEBI)
     	{
     		ktgID = document.getElementById(ktgID);
     		imgID = document.getElementById(imgID);
     		//alert("gEBI");
     	}
     	else
     	{
     		if (da)
     		{
     			ktgID = document.all(ktgID);
     			imgID = document.all(imgID);
     			//alert("da");
     		}
     		else
     		{
     			if (lay)
     			{
     				//alert("lay");
     				//KtgID = document.layers(ktgID);
     				//imgID = document.layers(imgID);
     			}
     			else
     			{
     				alert("Sorry, your browser does not support this page!");
     			}
     		}
     	}
     	if (gEBI || da)
     	{
    		if (ktgID.style.display == "none")
     		{
     			ktgID.style.display = "block";
     			imgID.src = "images/minus.gif";
     		}
     		else
     		{
     			ktgID.style.display = "none";
     			imgID.src = "images/plus.gif";
     		} 	
     	}
     	else
     	{
     		if (document.layers["ktg_"+ID].visibility == "hide")
     		{
     			document.layers["ktg_"+ID].visibility = "show";
     		//	imgID.src = "images/minus.gif";
     		}
     		else
     		{
     			document.layers["ktg_"+ID].visibility = "hide";
     		//	imgID.src = "images/plus.gif"
     		}
     	}
    
     }
    
    var agt=navigator.userAgent.toLowerCase();
    var is_major = parseInt(navigator.appVersion);
    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                    && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                    && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var is_ie4up  = (is_ie && (is_major >= 4));
    if (!(is_nav6up || is_ie4up))
    {
    	document.location.href = "Meny_NS.asp";
    }
     //-->
    
    <!--
    
    
    function form_validator(theForm) {
    
      if(theForm.searchstring.value == "") {
    
        alert("Var snäll att ange sökterm!");
    
        theForm.searchstring.focus();
    
        return(false);
    
      }
    
      return (true);
    
    }
    
    //-->
    </script>
    </head>
    <body>
    <div id="produkt">
      
      <img id='img_1' src='images/plus.gif' border='0' onClick='javascript: Meny(1);'> <a href='#' class='Meny' onClick='javascript: Meny(1);'><B>BÄRBART/NOTEBOOK</B></a><br>
    
      <span id='ktg_1' style='display:none;'>
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=BÄRBART/NOTEBOOK&secondgroup=Laptop" target="main"> Laptop</a><br>
      
      </span>
      
      <img id='img_2' src='images/plus.gif' border='0' onClick='javascript: Meny(2);'> <a href='#' class='Meny' onClick='javascript: Meny(2);'><B>CDROM</B></a><br>
      <span id='ktg_2' style='display:none;'>
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=CDROM&secondgroup=CDROM" target="main"> CDROM</a><br>
    
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=CDROM&secondgroup=CDRW" target="main"> CDRW</a><br>
      
      </span>
      
      <img id='img_4' src='images/plus.gif' border='0' onClick='javascript: Meny(4);'> <a href='#' class='Meny' onClick='javascript: Meny(4);'><B>Chassin/Kabinett</B></a><br>
      <span id='ktg_4' style='display:none;'>
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=Chassin/Kabinett&secondgroup=Chassi" target="main"> Chassi</a><br>
    
      
      </span>
      
      <img id='img_5' src='images/plus.gif' border='0' onClick='javascript: Meny(5);'> <a href='#' class='Meny' onClick='javascript: Meny(5);'><B>CPU</B></a><br>
      <span id='ktg_5' style='display:none;'>
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=CPU&secondgroup=Socket-478" target="main"> Socket-478</a><br>
      
    &nbsp;&nbsp;&nbsp;<IMG SRC='images/blank.gif' border='0'> <a href="item_list.asp?maingroup=CPU&secondgroup=Socket-A" target="main"> Socket-A</a><br>
    
      
      </span>
      
      </div>
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You may wanna look at this thread: http://codingforums.com/showthread.php?t=57464

    Just say no to pointless loops...
    Thanks in advance!

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    in essence you should have a function which will always close all the correspondent groups (the groups which have the same parent) before opening a new group.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure, but how? would really appreciate if you'd post a codesample that'll work with mine.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    function closeAll(){
    var 
    allSpans document.getElementById('produkt').getElementsByTagName('span');
    for(var 
    i=0;i<allSpans.length;i++){
    allSpans[i].style.display='none';
    }

    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how and where should i put this? the other group dosen't seem to close when i open a new one...

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try

    function Meny(ID)
    {
    closeAll();
    var ktgID = "ktg_" + ID;
    var imgID = "img_" + ID;
    ....
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, thanks! it works now!!

    but the images (+ plus and - minus, which you couldn't see and problably didn't think about) that should be left of the groups don't change.

    When I open a group and then another, the previous group closes (as i wanted) but the image will not change (continues to be - "minus" when it should become a + "plus")..

    please help me with that too

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try:

    PHP Code:
    function closeAll(){
    var 
    allSpans document.getElementById('produkt').getElementsByTagName('span');
    for(var 
    i=0;i<allSpans.length;i++){
    allSpans[i].style.display='none';
    }
    var 
    allPics document.getElementById('produkt').getElementsByTagName('img');
    for(var 
    i=0;i<allPics.length;i++){
    if(
    allPics[i].getAttribute('id').indexOf('img')>-1){
    allPics[i].setAttribute('src','images/plus.gif');
    }
    }

    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, now the menu won't even open...

  • #11
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please help...

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>VJ DATA</title>
    <
    link rel="stylesheet" href="style/sortiment.css">
    <
    script>
    <!--

    var 
    gEBI = (document.getElementById) ? true false;
    var 
    da = (document.all) ? true false;
    var 
    lay = (document.layers) ? true false;
    var 
    ktgAry=new Array();
    var 
    imgAry=new Array();

    function 
    Meny(ID) {
     var 
    ktgID "ktg_" ID;
     var 
    imgID "img_" ID;
     if (
    gEBI){
      
    ktgID document.getElementById(ktgID);
      
    imgID document.getElementById(imgID);
     }
     else {
      if (
    da){
       
    ktgID document.all(ktgID);
       
    imgID document.all(imgID);
      }
      else     {
       
    alert("Sorry, your browser does not support this page!");
       return;
      }
     }
     for (
    i0=0;i0<ktgAry.length;i0++){
      
    ktgAry[i0].style.display "none";
      
    imgAry[i0].src "http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif";
     }
     
    Add=true;
     for (
    i=0;i<ktgAry.length;i++){
      if (
    ktgAry[i]==ktgID){
       
    Add=false;
      }
     }
     if (
    Add){
      
    ktgAry[ktgAry.length]=ktgID;
     }
     
    Add=true;
     for (
    i1=0;i1<imgAry.length;i1++){
      if (
    imgAry[i1]==imgID){
       
    Add=false;
      }
     }
     if (
    Add){
      
    imgAry[imgAry.length]=imgID;
     }
     if (
    gEBI || da) {
      if (
    ktgID.style.display == "none"){
       
    ktgID.style.display "block";
       
    imgID.src "http://www.vicsjavascripts.org.uk/StdImages/Cross1.gif";
      }
      else {
       
    ktgID.style.display "none";
       
    imgID.src "http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif";
      }
     }
    }

    var 
    agt=navigator.userAgent.toLowerCase();
    var 
    is_major parseInt(navigator.appVersion);
    var 
    is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                    && (
    agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                    && (
    agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var 
    is_nav6up = (is_nav && (is_major >= 5));
    var 
    is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var 
    is_ie4up  = (is_ie && (is_major >= 4));
    if (!(
    is_nav6up || is_ie4up))
    {
        
    document.location.href "Meny_NS.asp";
    }
     
    //-->

    <!--


    function 
    form_validator(theForm) {

      if(
    theForm.searchstring.value == "") {

        
    alert("Var snäll att ange sökterm!");

        
    theForm.searchstring.focus();

        return(
    false);

      }

      return (
    true);

    }

    //-->
    </script>
    </head>
    <body>
    <div id="produkt">

      <img width=20 height=20 id='img_1' src='http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif' border='0' onClick='javascript: Meny(1);'> <a href='#' class='Meny' onClick='javascript: Meny(1);'><B>BÄRBART/NOTEBOOK</B></a><br>

      <span id='ktg_1' style='display:none;'>

    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=BÄRBART/NOTEBOOK&secondgroup=Laptop" target="main"> Laptop</a><br>

      </span>

      <img width=20 height=20 id='img_2' src='http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif' border='0' onClick='javascript: Meny(2);'> <a href='#' class='Meny' onClick='javascript: Meny(2);'><B>CDROM</B></a><br>
      <span id='ktg_2' style='display:none;'>

    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=CDROM&secondgroup=CDROM" target="main"> CDROM</a><br>


    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=CDROM&secondgroup=CDRW" target="main"> CDRW</a><br>

      </span>

      <img width=20 height=20 id='img_4' src='http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif' border='0' onClick='javascript: Meny(4);'> <a href='#' class='Meny' onClick='javascript: Meny(4);'><B>Chassin/Kabinett</B></a><br>
      <span id='ktg_4' style='display:none;'>

    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=Chassin/Kabinett&secondgroup=Chassi" target="main"> Chassi</a><br>


      </span>

      <img width=20 height=20 id='img_5' src='http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif' border='0' onClick='javascript: Meny(5);'> <a href='#' class='Meny' onClick='javascript: Meny(5);'><B>CPU</B></a><br>
      <span id='ktg_5' style='display:none;'>

    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=CPU&secondgroup=Socket-478" target="main"> Socket-478</a><br>

    &nbsp;&nbsp;&nbsp;<img width=20 height=20 SRC='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif' border='0'> <a href="item_list.asp?maingroup=CPU&secondgroup=Socket-A" target="main"> Socket-A</a><br>


      </span>

      </div>

    </body>
    </html> 

  • #13
    New Coder
    Join Date
    Feb 2004
    Location
    Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •