...

View Full Version : "this" keyword help



Antoniohawk
03-15-2004, 12:43 AM
I'm working on a dhtml tree menu and was wondering how i can best achieve this. Could i possibly get some pseudocode or something? I have written a very bad script that works, but i need to write one using dom so as to make it more robust. Below is the original script that needs a total makeover. Also, does anyone know a good reference for learning about the this keyword, i believe that i will need it for this project, but i don't really understand it in its entirety.

http://www.graphics-forum.com/manicpyro/MadMenuTree.html

shlagish
03-15-2004, 01:35 AM
Isn't it already using dom?
document.getElementById('wtv')
That's dom isn't it?

Antoniohawk
03-15-2004, 03:08 AM
Yes, but i meant designing it to work when there are no ids and just finding the children of the li's and setting their display to none.

shlagish
03-15-2004, 03:10 AM
ohhhhhhhhhhhhhh, well that's harder.

Maybe you could use classes instead of ids.
Otherwise I think you will need to go in the innerHTML of the ul and find all the <li>s and change them to <li style="display: none;"> or something like that, but I'm really not good at that, so I can't help you..

DHTML Kitchen
03-15-2004, 04:59 AM
Hey bro,

Check my tree out. It does just what you want -- finding child nodes, etc.


http://dhtmlkitchen.com/scripts/animtree/

You can d/l and look at the source to get some ideas.

Basically, a menu a has:
items - childnodes with class menuNode
allItems - descendants with class menuNode

This allows for unlimited nesting. It's naively simple approach and allows me to do other fancy stuff with it.

It's not free, so if you're gonna deploy it, please purchase a license. I may soon offer up an OSD license (open-source developers).

Antoniohawk
03-15-2004, 10:27 PM
Thanks Dhtml Kitchen. I don't want to pay for the menu, yet I want to learn from it, so what should I do?

whammy
03-16-2004, 02:38 AM
I think your question answers itself... :)

If in the meantime (while you're figuring out how he did it), you need to use his menu, then pay for it. Pretty simple logic in my book. At least that's my logic, I could be wrong... :p

Most of the code that people provide here is free, but if they ask for a paypal donation, or a fee for using it, it's a good gesture to shoot the creator what they require for you to reuse their code.

It might just keep them alive to code even more useful stuff. :p

DHTML Kitchen
03-16-2004, 03:19 AM
Originally posted by whammy

It might just keep them alive to code even more useful stuff. :p

Yep. Ramen soup gets old fast, hehe.

Antoniohawk
03-16-2004, 05:53 PM
Thanks for all of your help Dhtml Kitchen, but I can't afford your menu tree. I'm only 15 and currently don't even have a job. I'm pretty sure that if I work at it, I can get it to work.

Antoniohawk
03-17-2004, 02:34 AM
As I started working on my tree, I came across a problem. If I have the following code, how do I tell the function that what I clicked is the thing that I want to do something with. I really don't want to make an id for every single occurence. In other words, what goes where there is a "?",


function door(obj) {
...do stuff to whatever was clicked...
}

<ul id="menuTree">
<li class="parent"><a href="#" onClick="door( ? )">Fish</a>
<ul class="item">
<li><a href="#">Salmon</a></li>
<li><a href="#">Bass</a></li>
<li><a href="#">Trout</a></li>
<li><a href="#">Catfish</a></li>
<li><a href="#">Cod</a></li>
</ul>
</li>
<li class="parent"><a href="#" onClick="door( ? )">Birds</a>
<ul class="item">
<li><a href="#">Sparrow</a></li>
<li><a href="#">Finch</a></li>
<li><a href="#">Blue Jay</a></li>
<li><a href="#">Chickadee</a></li>
</ul>
</li>
</ul>

shlagish
03-17-2004, 02:36 AM
I beleive it goes something like this.object but I'm not sure.

door(this.object)

glenngv
03-17-2004, 02:54 AM
<a href="#" onClick="door( this )">Fish</a>

function door(obj) {
alert(obj.parentNode); //alerts parent node of the link
//...do stuff to whatever was clicked...
}

Antoniohawk
03-17-2004, 02:59 AM
Exactly what I needed, thank you Glenn.

whammy
03-17-2004, 03:06 AM
GlennGV to the rescue!!!

glenngv
03-17-2004, 03:21 AM
:cool:

Antoniohawk
03-17-2004, 04:09 AM
Wanted to show you fellas what I have whipped up, so that you might critique or commend. Before I head over to html/css forum for some styling help, does anyone here know how I can use the background approach to apply the plus/minus signs. when I attempt this, it puts the background image half-way down the list. Example of faulty list stylage found here (http://www.graphics-forum.com/manicpyro/newGenMenuTree.html).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Tree Menu - the new generation</title>
<script type="text/javascript">

function door(obj){
obj = obj.parentNode;
alert(obj.className);

if (obj.className == "open"){
obj.childNodes[2].style.display = 'none';
obj.className = 'closed';
}
else {
obj.childNodes[2].style.display = 'block';
obj.className = 'open';
}
}

</script>
<style type="text/css">
#menuTree {
background: #EEE;
border: 1px solid #424242;
}

#menuTree li a {
color: #424242;
text-decoration: none;
}

#menuTree li {
list-style-type: none;
}

#menuTree ul.item li {
padding-left: 16px;
background: url(images/item.gif) no-repeat 0 50%;
}

.open {
}

.closed {
}
</style>
</head>
<body>

<ul id="menuTree">
<li class="open"><a href="#" onClick="door(this)">Animals</a>
<ul>
<li class="open"><a href="#" onClick="door(this)">Fish</a>
<ul class="item">
<li><a href="#">Salmon</a></li>
<li><a href="#">Bass</a></li>
<li><a href="#">Trout</a></li>
<li><a href="#">Catfish</a></li>
<li><a href="#">Cod</a></li>
</ul>
</li>
<li class="open"><a href="#" onClick="door(this)">Birds</a>
<ul class="item">
<li><a href="#">Sparrow</a></li>
<li><a href="#">Finch</a></li>
<li><a href="#">Blue Jay</a></li>
<li><a href="#">Chickadee</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</body>
</html>

Antoniohawk
03-20-2004, 07:37 AM
Worked up the following code for my javascript, and was wondering if there was any way to make it more efficient/robust/shorter code (any form of efficient such in "further efficient___"?). Also, how cross-browser compatible is this?


<script type="text/javascript">
function door(obj){
obj = obj.parentNode;

if (obj.className == "open"){
obj.childNodes[2].style.display = 'none';
obj.className = 'closed';
}
else {
obj.childNodes[2].style.display = 'block';
obj.className = 'open';
}
}
</script>


Learned how to use these kewl if-statement thingies and shortened the code. Is there a way to combine both of them together?


<script type="text/javascript">
function door(obj){
obj = obj.parentNode;

obj.childNodes[2].style.display = (obj.className == 'open') ? 'none' : 'block';
obj.className = (obj.className == 'open') ? 'closed' : 'open';
}
</script>

Antoniohawk
03-21-2004, 09:01 AM
[stylage problems resolved] Still in search of constructive criticism and suggestions on code clean up or whatever else comes to mind. Updated script:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Tree Menu - the new generation</title>
<script type="text/javascript">
function door(obj){
obj = obj.parentNode;

obj.childNodes[2].style.display = (obj.className == 'open') ? 'none' : 'block';
obj.className = (obj.className == 'open') ? 'closed' : 'open';
}
</script>
<style type="text/css">
#menuTree {
background: #EEE;
border: 1px solid #424242;
padding: 5px 10px;
}

#menuTree li a {
color: #424242;
text-decoration: none;
}

#menuTree li {
list-style-type: none;
}

#menuTree ul.item li {
padding-left: 16px;
background: url(images/item.gif) no-repeat 0 50%;
}

.open { }

.open a#parent {
background: url(images/minus.gif) no-repeat 0 50%;
padding-left: 16px;
}

.closed { }

.closed a#parent {
background: url(images/plus.gif) no-repeat 0 50%;
padding-left: 16px;
}
</style>
</head>
<body>

<ul id="menuTree">
<li class="open"><a href="#" id="parent" onClick="door(this); return false">Animals</a>

<ul>
<li class="open"><a href="#" id="parent" onClick="door(this); return false">Fish</a>
<ul class="item">
<li><a href="#">Salmon</a></li>
<li><a href="#">Bass</a></li>
<li><a href="#">Trout</a></li>
<li><a href="#">Catfish</a></li>

<li><a href="#">Cod</a></li>
</ul>
</li>
<li class="open"><a href="#" id="parent" onClick="door(this); return false">Birds</a>
<ul class="item">
<li><a href="#">Sparrow</a></li>
<li><a href="#">Finch</a></li>

<li><a href="#">Blue Jay</a></li>
<li><a href="#">Chickadee</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</body>

</html>

shlagish
03-22-2004, 03:19 AM
Looking good. I can't think of a way to make the coding any shorter or more efficient...

Antoniohawk
03-22-2004, 04:13 AM
Thanks shlagish for the reply. Here's a link to some styling issues have with a list similar to this one.

http://www.codingforums.com/showthread.php?s=&postid=184180#post184180

whammy
03-22-2004, 04:16 AM
It looks like you're using redundant id's for no reason. Can you lose those in the HTML code?

Antoniohawk
03-22-2004, 05:36 AM
Those are now classes instead of ids. The reason that they have to be there is that IE doesn't support the '>' css selector.

shlagish
03-23-2004, 01:37 AM
So now it wont work in IE?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum