...

View Full Version : please need help



romang
12-25-2005, 10:35 AM
hello people!
i have a problem with my menu tree
when i click on one of menus , i want that another menus to be closed

<script type="text/javascript">
if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;
actuator.parentNode.style.backgroundImage = "url(/test/close.gif)";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url(/test/close.gif)" : "url(/test/open.gif)";
menu.style.display = (display == "block") ? "none" : "block";

return false;
}
}
</script>
<script type="text/javascript">
window.onload = function() {
initializeMenu("testMenu", "testActuator");
initializeMenu("test1Menu", "test1Actuator");
initializeMenu("test2Menu", "test2Actuator");

}
</script>


please help

vwphillips
12-25-2005, 11:20 AM
welcome



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

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">
var MenuAry=new Array;

if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (!menu.set){
menu.style.display = "none";
menu.set=true;
MenuAry.push(menu);
actuator.menu=menu;
}
if (menu == null || actuator == null) return;
actuator.parentNode.style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/Zero.gif)";
actuator.onclick = function() {
for (var zxc0=0;zxc0<MenuAry.length;zxc0++){
if (MenuAry[zxc0]!=this.menu){
MenuAry[zxc0].style.display = "none";
}
}
var display = this.menu.style.display;
this.parentNode.style.backgroundImage = (display == "block") ? "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)" : "url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif)";
this.menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
</script>
<script type="text/javascript">
window.onload = function() {
initializeMenu("testMenu", "testActuator");
initializeMenu("test1Menu", "test1Actuator");
initializeMenu("test2Menu", "test2Actuator");

}
</script>
<div style="position:relative;height:200px;width:100px;background-color:red;" >
<div id="testActuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
<div id="testMenu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
<br>
<div id="test1Actuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
<div id="test1Menu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
<br>
<div id="test2Actuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
<div id="test2Menu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
</div>
</body>

</html>

romang
12-25-2005, 12:33 PM
thank you very very match
but something not work properly. i have only 2 picture(+ and -) and many sub levels .i see that you script support only two levels or no?
when i click on menus1(+) sub menu need to open and picture change to (-) and than i click on another menu ,picture of menu1 need to return(+)
thank you for help

romang
12-25-2005, 12:35 PM
this is example of my menu
<body bgcolor="#CFD5E7" dir="rtl">
<div id="mainMenu">
<ul id="menuList">
<li class="menubar"><a href="#" id="testActuator" class="actuator">menu1</a>
<ul id="testMenu" class="menu">
<li><a href="#" name="#">sub1</a></li>
<li><a href="#" name="#">sub2</a></li>
<li><a href="#" id="test1Actuator" class="actuator">submenu1</a>
<ul id="test1Menu" class="submenu">
<li><a href="#" name="#">sub1</a></li>
<li><a href="#" name="#">sub2</a></li>
</ul>
</li>
</ul>
</li>
<li class="menubar"><a href="#" id="test2Actuator" class="actuator">menu2</a>
<ul id="test2Menu" class="menu">
<li><a href="#" name="#">sub1</a></li>
</ul>
</li>
</ul>
</div>
</body>[/LEFT][/LEFT]

romang
12-25-2005, 12:51 PM
to be more accurate i have 3 leveles. father->child ->grandchild

vwphillips
12-25-2005, 04:32 PM
It is useful if you define the requirement on your first post

romang
12-25-2005, 07:15 PM
I apologize next time such will not repeat.

vwphillips
12-26-2005, 12:23 AM
Had problems with event bubbleing and cant figure the images but


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

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (26-12-2005) http://www.vicsjavascripts.org.uk

var zxcTO,zxcObj;

function zxcMenuInit(zxcid){
var zxcmobj=document.getElementById(zxcid);
zxcmobj.level1=[];
zxcmobj.level2=[];
var zxcli=zxcmobj.getElementsByTagName('LI');
for (var zxc0=0;zxc0<zxcli.length;zxc0++){
if (zxcli[zxc0].className.match('level1')){
zxcli[zxc0].ary=zxcli[zxc0].getElementsByTagName('UL');
zxcli[zxc0].pobj=zxcmobj;
zxcmobj.level1[zxcmobj.level1.length]=zxcli[zxc0];
zxcli[zxc0].onclick=function(){ zxcDisplay(this,1); }
zxcli2=zxcli[zxc0].getElementsByTagName('LI');
for (var zxc1=0;zxc1<zxcli2.length;zxc1++){
if (zxcli2[zxc1].className.match('level2')){
zxcli2[zxc1].onclick=function(){ zxcDisplay(this,2); }
zxcli2[zxc1].ary=zxcli2[zxc1].getElementsByTagName('UL');
zxcmobj.level2[zxcmobj.level2.length]=zxcli2[zxc1];
zxcli2[zxc1].pobj=zxcmobj;
}
}
}
}
zxcHideLevel2(zxcmobj,zxcmobj);
zxcHideLevel1(zxcmobj,zxcmobj);
}

function zxcHideLevel2(zxcobj,zxctobj){
for (var zxc2=0;zxc2<zxcobj.level2.length;zxc2++){
if (zxcobj.level2[zxc2]!=zxctobj){
zxcobj.level2[zxc2].display='none';
}
for (var zxc2A=0;zxc2A<zxcobj.level2[zxc2].ary.length;zxc2A++){
zxcobj.level2[zxc2].ary[zxc2A].style.display='none';
}
}
}
function zxcHideLevel1(zxcobj,zxctobj){
for (var zxc3=0;zxc3<zxcobj.level1.length;zxc3++){
if (zxcobj.level1[zxc3]!=zxctobj){
zxcobj.level1[zxc3].display='none';
}
for (var zxc3A=0;zxc3A<zxcobj.level1[zxc3].ary.length;zxc3A++){
zxcobj.level1[zxc3].ary[zxc3A].style.display='none';
}
}
}

function zxcDisplay(zxcobj,zxcl){
if (zxcl==2){ setTimeout('clearTimeout(zxcTO)',100); zxcDisplay2(zxcobj); return; }
zxcObj=zxcobj
zxcTO=setTimeout('zxcDisplay1(zxcObj)',200);
}

function zxcDisplay1(zxcobj){
zxcHideLevel1(zxcobj.pobj,zxcobj);
if (zxcobj.display=='none'){
zxcobj.display='';
}
else {
zxcobj.display='none';
}
for (var zxc1=0;zxc1<zxcobj.ary.length;zxc1++){
zxcobj.ary[zxc1].style.display=zxcobj.display;
}
zxcHideLevel2(zxcobj.pobj,zxcobj.pobj);
}

function zxcDisplay2(zxcobj){
zxcHideLevel2(zxcobj.pobj,zxcobj);
if (zxcobj.display=='none'){
zxcobj.display='';
}
else {
zxcobj.display='none';
}
for (var zxc1=0;zxc1<zxcobj.ary.length;zxc1++){
zxcobj.ary[zxc1].style.display=zxcobj.display;
}
}

//-->
</script>
</head>

<body bgcolor="#CFD5E7" onload="zxcMenuInit('mainMenu');">
<div id="mainMenu">

<ul id="menuList">
<li class="level1" ><a href="javascript:void('')" >menu1</a>
<ul id="">
<li><a href="#" name="#">sub1</a></li>
<li><a href="#" name="#">sub2</a></li>
<li class="level2" ><a href="javascript:void('')" >submenu1</a>
<ul>
<li><a href="#" name="#">sub1</a></li>
<li><a href="#" name="#">sub2</a></li>
</ul>
</li>
</ul>
</li>
<li class="level1"><a href="javascript:void('')">menu2</a>
<ul id="testMenu" >
<li><a href="#" name="#">sub1</a></li>
</ul>
</li>

</ul>

</div>
</body>

</html>

romang
12-26-2005, 06:49 AM
thank you very match :thumbsup: :)

romang
12-26-2005, 07:30 AM
And last question as I can turn the menu that looked on the right on left
Thanks

vwphillips
12-26-2005, 05:41 PM
using display no.

try posing on a CSS forum, may be some clever tricks

romang
12-27-2005, 08:27 AM
thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum