...

View Full Version : Tree (subgroups, how to close)



Matt_Helvey
05-23-2005, 10:52 PM
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.





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

enumerator
05-24-2005, 12:44 AM
You may wanna look at this thread: http://codingforums.com/showthread.php?t=57464

Just say no to pointless loops...

Kor
05-24-2005, 10:22 AM
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.

Matt_Helvey
05-24-2005, 03:53 PM
sure, but how? would really appreciate if you'd post a codesample that'll work with mine.

Kor
05-24-2005, 03:59 PM
function closeAll(){
var allSpans = document.getElementById('produkt').getElementsByTagName('span');
for(var i=0;i<allSpans.length;i++){
allSpans[i].style.display='none';
}
}

Matt_Helvey
05-25-2005, 11:20 AM
how and where should i put this? the other group dosen't seem to close when i open a new one... :confused:

Kor
05-25-2005, 11:42 AM
Try

function Meny(ID)
{
closeAll();
var ktgID = "ktg_" + ID;
var imgID = "img_" + ID;
....

Matt_Helvey
05-25-2005, 05:40 PM
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 :rolleyes:

Kor
05-26-2005, 08:55 AM
Try:



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

Matt_Helvey
05-26-2005, 03:51 PM
well, now the menu won't even open... :confused:

Matt_Helvey
05-29-2005, 03:26 PM
please help... :o

vwphillips
05-29-2005, 05:23 PM
<!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>

Matt_Helvey
05-31-2005, 08:49 PM
thank you very much! :D :D :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum