Jump to content

Tree Menu

Chocolate570

By Chocolate570
in JavaScript

 Share

Recommended Posts

Chocolate570 Dedicated Member

Chocolate570

Posted
Posted

I am currently trying to make a tree menu. Unfortunately, my simple code right now (I just started) refuses to work, and I have absolutely no clue why.Could anyone help me with this please? :)

<html><head><script type="text/javascript">function tre_men() {  alert("here");}</script></head><body><div class="parent"><div class="header">Testing Stuff Here</div><div class="header">Testing Stuff Here</div><div class="header">Testing Stuff Here</div></div><script type="text/javascript">/////////////////////////////////	 Organic.Tree.Menu	 ////   Made by Chocolate570	//// Current Version Details   ////		[0.1 Beta]		 ///////////////////////////////////Start Menu//////////Attribute Setter//////////divHl=document.getElementsByTagName("div");for(i=0;i<divHl.length;i++) {  if(divHl[i].className=="parent") { 	inDiv=divHl[i].getElementsByTagName("div");	  for(j=0;j<inDiv.length;j++) {		if(inDiv[j].className=="header") {		  heHl=inDiv[j];		  heHl.onclick="alert('lol')";} } } }////////////////////////////////////</script></body></html>

It's supposed to loop through all of the div elements, find a parent div, then loop through that div's elements and check for a menu header div. If it's found it, the function should set the div's onclick to alert, and then go through again.My function works fine, except for the fact that when the div is clicked, nothing happens. :|Thanks.ChocoP.S.: Here's a link to the tryit editor:Tryit EditorThanks.

Link to comment
Share on other sites
adservio Newbie

adservio

Posted
Posted (edited)

With aspnetguy's help below(next post):

<div id="p" class="parent"><div id="a" class="header">Testing Stuff Here</div><div id="b" class="header">Testing Stuff Here</div><div id="c" class="header">Testing Stuff Here</div></div><script type="text/javascript">///////////////////////////////// Organic.Tree.Menu //// Made by Chocolate570 //// Current Version Details //// [0.1 Beta] ///////////////////////////////////Start Menufunction testThis(e) {  var targ;	if (!e) var e = window.event;	if (e.target) targ = e.target;	else if (e.srcElement) targ = e.srcElement;		if (targ.nodeType == 3) // defeat Safari bug			targ = targ.parentNode;alert(targ.id); }//////////Attribute Setter//////////divHl=document.getElementsByTagName("div");for(i=0;i<divHl.length;i++) {if(divHl[i].className=="parent") {inDiv=divHl[i].getElementsByTagName("div");for(j=0;j<inDiv.length;j++) {if(inDiv[j].className=="header") {heHl=inDiv[j];heHl.onclick = testThis;} } } }////////////////////////////////////</script>

Tested in IE, FF O

Edited by adservio
Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

this is your problem

heHl.onclick="alert('lol')";

you must set onclick to a function not a string.like so

heHl.onclick=functionName; //use if not passing variables to function

or

heHl.onclick=function(){functionName(var1)};//use if passing variables to function

Link to comment
Share on other sites
Chocolate570 Dedicated Member

Chocolate570

Posted
  • Author
Posted
After studying these 2 sources:add onclick eventtarget of event
<div id="p" class="parent"><div id="a" class="header">Testing Stuff Here</div><div id="b" class="header">Testing Stuff Here</div><div id="c" class="header">Testing Stuff Here</div></div><script type="text/javascript">/////////////////////////////////     Organic.Tree.Menu     ////   Made by Chocolate570    //// Current Version Details   ////        [0.1 Beta]         ///////////////////////////////////Start Menufunction testThis(e) {	var targ;	if (!e) var e = window.event;	if (e.target) targ = e.target;	else if (e.srcElement) targ = e.srcElement;	if (targ.nodeType == 3) // defeat Safari bug		targ = targ.parentNode;	alert(targ.id);}//////////Attribute Setter//////////divHl=document.getElementsByTagName("div");for(i=0;i<divHl.length;i++) {  if(divHl[i].className=="parent") {    inDiv=divHl[i].getElementsByTagName("div");      for(j=0;j<inDiv.length;j++) {        if(inDiv[j].className=="header") {          heHl=inDiv[j];	if(heHl.attachEvent)       heHl.attachEvent('onclick', testThis);	else        heHl.setAttribute('onclick', 'testThis()');} } } }////////////////////////////////////</script>

Tested in IE, FF O

Thank you for your effort, but it seems to me that it doesn't work in FireFox. Wierd. I'll investigate that, but the cross browser code is very helpful. Thanks for pointing that out.And Justin, your fix fixed it all up :) Thanks.
Link to comment
Share on other sites
Beta Newbie

Beta

Posted
Posted

Wouldn't something like this work also?

divHl=document.getElementsByTagName("div");for(i=0;i<divHl.length;i++) {  if(divHl[i].className=="parent") {   inDiv=divHl[i].getElementsByTagName("div");	for(j=0;j<inDiv.length;j++) {	  if(inDiv[j].className=="header") {		inDiv[j].onclick=function() {		alert("lol");		}	  }	}  }}

Also, the whole onclick = function; never works for me=/

Link to comment
Share on other sites
Chocolate570 Dedicated Member

Chocolate570

Posted
  • Author
Posted
Also, the whole onclick = function; never works for me=/
Yea, but you can do the whole iframe thing, so it doesn't matter. :) :)I've almost got the thing working. I'll post it up when I'm done. :)
Link to comment
Share on other sites
Chocolate570 Dedicated Member

Chocolate570

Posted
  • Author
Posted

Guys, I've got it working pretty well so far. I just need a couple more things.1) When the tree menu page is first opened, you have to double click the links to get them to work. Why!?!?2) How do I make it so that the tree menu doesn't close if the even parent is an a element?For #2, I tried using the script you gave me, Adservio, but that requires the event object to be passed to the function. I have no clue how to do that right now, as the javascript onclick= property doesn't accept function(argument) for some reason, even if it's not text. :|Thanks.Code and treemenu can be found here:seekond.com/treemen.html

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...