LiveWire Network Peer Answers Peer Support Teen Forums Tech Forums College Forums 313 users online 221739 members 304 active today Advertise Here Sign In
TeenCollegeTechPhotos | Quizzes | LiveSecret | Memberlist | Dictionary | News | FAQ
Member Spotlight
astro
Movies: i love...love actually and coraline
Mood: Flirty
You have 1 new message.
Emergency Help
Until you sign up you can't do much. Yes, it's free.

Sign Up Now
Membername:
Password:
Already have an account?
Invite Friends
Active Members
Groups
Contests
Moderators
2 online / 21 MPM
Fresh Topics
  LiveWire / Technical Forums / Web Design & Search Engine Optimization / Viewing Topic

javascript
need help with DHTML list script
Replies: 14Last Post Jan. 21, 2008 8:22am by Echo one
Welcome to LiveWire!
We're Stronger Together.
Join the Community
Single page for this topic Email Print Favorite
( Echo one )


Dairy Product Addict
Reply
hey, let's get this out of the way. I do not in any way consider myself good at javascript. As a web designer it has been my weakness. I don't know why, it just is. I can write php, but javascript gives me a headache.

alright, so this is a basic list-based DHTML drop down navigation menu. the old script I had was rather static in it's methods (it used names rather than dealing with the concept itself)
in other words it was built for a specific instance.

I'm getting to the point where I'm tired of it, so I'm trying to move to a dynamic script that will build whatever I want it to dynamically. so I'm trying to use nodes.

the problem is apparently not in the syntax (I'm not getting those little yellow error messages in the corner) it's somewhere in the script itself that is not applying itself to what I want it to. ie, nothing happens onMouseOver.

Code:
<script type='text/JavaScript'>
function list() {
  if (document.getElementsByTagName) {
      node="document.getElementsByTagName('LI')";
      listNode = "document.getElementsByTagName('UL')";
      node.onMouseOver = "node.childNodes.style.display = 'block'";
      }
      node.onMouseOut = "node.childNodes.style.display = 'none'; if (listNode.class == 'sub') { listNode.style.display = 'none'}";
      }
      if (node.childNodes.style.display == 'block') {
         node.style.display = 'block';
      }
  }
  else {
      alert("your browser does not support javascript. Either you have it turned off or do not have it, this page may not load correctly and you may not be able to access certain parts of the site.")
  }
}    
body.onLoad = list();
</script>

alright, so can anyone tell me why it's not doing anything on li.onMouseOver?

-------
I decided to be different from the rest of the world and be a
smart ass.


8:52 pm on Jan. 12, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
LiveWire Humor
rand0mguy


Wealthy Hobo
Reply
are you using xhtml or html.. and waht DTD

-------
aaaaaah im bored

5:13 pm on Jan. 13, 2008 | Joined: Jan. 2008 | Days Active: 247
Join to learn more about rand0mguy New Zealand | Straight Male | Posts: 1,372 | Points: 4,605
( Echo one )


Dairy Product Addict
Reply
xhtml, and it's been awhile, remind me what dtd is.

-------
I decided to be different from the rest of the world and be a
smart ass.

5:55 pm on Jan. 13, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
( Echo one )


Dairy Product Addict
Reply
that doesn't really matter does it?

-------
I decided to be different from the rest of the world and be a
smart ass.

5:55 pm on Jan. 13, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
pleaseremove


meh

Patron
Tech Support Leader
Reply
OK, I'm not actually sure what you want your code to do here. Is this just a drop-down menu?

Anyway, if it is you should be doing this with CSS, the last thing you want to do is make the core way people navigate with your site based on something that could be turned off.

-------
Anyone who isn't confused really doesn't understand the situation
http://craigk.org/pictures/
Can you work out the code?


6:11 am on Jan. 15, 2008 | Joined: Feb. 2005 | Days Active: 1,299
Join to learn more about pleaseremove England, United Kingdom | Straight Male | Posts: 5,945 | Points: 37,468
( Echo one )


Dairy Product Addict
Reply
Quote: from pleaseremove at 6:11 am on Jan. 15, 2008

OK, I'm not actually sure what you want your code to do here. Is this just a drop-down menu?

Anyway, if it is you should be doing this with CSS, the last thing you want to do is make the core way people navigate with your site based on something that could be turned off.


it's a mix of css and javascript. I'm aware that that poses problems but I'm not sure there's a way to do this without some javascript involved. At best I could store a lot of the info in the :hover attribute, but at the very least to my knowledge the display attribute has to be changed with javascript since the act of displaying involves the mouseover of a different object.

keep in mind that I have a script that works, but it deals only with specific instances ie. this is what happens when this. This one, I'm trying to make it apply to any instance of a drop down or otherwise onMouseOver display menu by saying that anyLi.onMouseOver = display sublist if one exists.

-------
I decided to be different from the rest of the world and be a
smart ass.


4:55 pm on Jan. 19, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
pleaseremove


meh

Patron
Tech Support Leader
Reply
Quote: from Echo one at 12:55 am on Jan. 20, 2008

Quote: from pleaseremove at 6:11 am on Jan. 15, 2008

OK, I'm not actually sure what you want your code to do here. Is this just a drop-down menu?  

 Anyway, if it is you should be doing this with CSS, the last thing you want to do is make the core way people navigate with your site based on something that could be turned off.


it's a mix of css and javascript. I'm aware that that poses problems but I'm not sure there's a way to do this without some javascript involved. At best I could store a lot of the info in the :hover attribute, but at the very least to my knowledge the display attribute has to be changed with javascript since the act of displaying involves the mouseover of a different object.

keep in mind that I have a script that works, but it deals only with specific instances ie. this is what happens when this. This one, I'm trying to make it apply to any instance of a drop down or otherwise onMouseOver display menu by saying that anyLi.onMouseOver = display sublist if one exists.


Sounds like you want to look into something like this:

http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp

-------
Anyone who isn't confused really doesn't understand the situation
http://craigk.org/pictures/
Can you work out the code?


6:31 am on Jan. 20, 2008 | Joined: Feb. 2005 | Days Active: 1,299
Join to learn more about pleaseremove England, United Kingdom | Straight Male | Posts: 5,945 | Points: 37,468
( Echo one )


Dairy Product Addict
Reply
Quote: from pleaseremove at 6:31 am on Jan. 20, 2008

Quote: from Echo one at 12:55 am on Jan. 20, 2008

Quote: from pleaseremove at 6:11 am on Jan. 15, 2008

OK, I'm not actually sure what you want your code to do here. Is this just a drop-down menu?

  Anyway, if it is you should be doing this with CSS, the last thing you want to do is make the core way people navigate with your site based on something that could be turned off.


 

 it's a mix of css and javascript. I'm aware that that poses problems but I'm not sure there's a way to do this without some javascript involved. At best I could store a lot of the info in the :hover attribute, but at the very least to my knowledge the display attribute has to be changed with javascript since the act of displaying involves the mouseover of a different object.  

 keep in mind that I have a script that works, but it deals only with specific instances ie. this is what happens when this. This one, I'm trying to make it apply to any instance of a drop down or otherwise onMouseOver display menu by saying that anyLi.onMouseOver = display sublist if one exists.


Sounds like you want to look into something like this:

http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp


that would be great, except that site had no information on how to do a pure css dropdown menu. I've heard of them, and attempted them. But it comes down to needing to be able to use ul li:hover and idk if other browsers support it, but my ie for some reason does not.

-------
I decided to be different from the rest of the world and be a
smart ass.


2:09 pm on Jan. 20, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
PiXiE


24.24.1.1358

Patron
Reply
Check out this article: http://alistapart.com/articles/hybrid

2:15 pm on Jan. 20, 2008 | Joined: July 2002 | Days Active: 1,663
Join to learn more about PiXiE Alberta, Canada | Straight Female | Posts: 4,837 | Points: 34,868
( Echo one )


Dairy Product Addict
Reply
Quote: from PiXiE at 2:15 pm on Jan. 20, 2008

Check out this article: http://alistapart.com/articles/hybrid

lol I actually tried that one once. Just I'm trying to learn how to develop my own. I just need to know the specific css way to make something pop out on a hover. It's not working in my browser for some reason, and I can't test it in others. I'm trying to make it all css since, as Pleaseremove pointed out, javascript can be turned off, and that is my main navigation.

-------
I decided to be different from the rest of the world and be a
smart ass.


8:04 pm on Jan. 20, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
PiXiE


24.24.1.1358

Patron
Reply
Hmm. This works on my Firefox and IE7: http://www.grc.com/menu2/invitro.htm


10:43 pm on Jan. 20, 2008 | Joined: July 2002 | Days Active: 1,663
Join to learn more about PiXiE Alberta, Canada | Straight Female | Posts: 4,837 | Points: 34,868
( Echo one )


Dairy Product Addict
Reply
it works amazingly. I just can't figure out from their source how they did it. I know it's pathetic. Coding has never come all that easily to me.

-------
I decided to be different from the rest of the world and be a
smart ass.

11:01 pm on Jan. 20, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
( Echo one )


Dairy Product Addict
Reply
Code:
* html ul li { float: left; }
* html ul li a { height: 1%; }
ul {
margin: 0;
       padding-right: 15px;
  list-style: none;
}
ul li {
       position: relative;
       font-color: #0000ff;
       list-style: none;
       background-color:blue;
}
li ul {
       display:none;
       list-style:none;
position: absolute;
padding: 20px;
top: 45px;
left: 0px;
       width: 60px;
       font-color: #0000ff;
}
li:hover ul {
       display:block;
}
li a:hover ul {
       display:block;
}
li ul:hover, li a ul:hover {
       display:block;
}

that's basically what I have (without putting in all of the rest of the just aesthetic things to change the menu.

-------
I decided to be different from the rest of the world and be a
smart ass.

11:04 pm on Jan. 20, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
pleaseremove


meh

Patron
Tech Support Leader
Reply
Quote: from Echo one at 7:04 am on Jan. 21, 2008

Code:
* html ul li { float: left; }
* html ul li a { height: 1%; }
ul {
margin: 0;
        padding-right: 15px;
   list-style: none;
}
ul li {
        position: relative;
        font-color: #0000ff;
        list-style: none;
        background-color:blue;
}
li ul {
        display:none;
        list-style:none;
position: absolute;
padding: 20px;
top: 45px;
left: 0px;
        width: 60px;
        font-color: #0000ff;
}
li:hover ul {
        display:block;
}
li a:hover ul {
        display:block;
}
li ul:hover, li a ul:hover {
        display:block;
}

that's basically what I have (without putting in all of the rest of the just aesthetic things to change the menu.

It works by using the display element in css. You will notice that some points use display:none and then later in the same parts hover it uses display:block. So basically your menu exists in full on your page and then it uses the css hover element to make certain parts of it show-up.

-------
Anyone who isn't confused really doesn't understand the situation
http://craigk.org/pictures/
Can you work out the code?


3:05 am on Jan. 21, 2008 | Joined: Feb. 2005 | Days Active: 1,299
Join to learn more about pleaseremove England, United Kingdom | Straight Male | Posts: 5,945 | Points: 37,468
( Echo one )


Dairy Product Addict
Reply
that's the code that I wrote, that's the one that's not working. Do you see anything wrong with it?

-------
I decided to be different from the rest of the world and be a
smart ass.

8:22 am on Jan. 21, 2008 | Joined: Mar. 2007 | Days Active: 197
Join to learn more about Echo one United States | Posts: 178 | Points: 2,153
Single page for this topic Email Print Favorite

Quick Reply

You are signed in as our guest.

Looking for something else?
 

  LiveWire / Technical Forums / Web Design & Search Engine Optimization / Viewing Topic