HELP - with Javascript on website

[MrNutz]

I'm using some javascript menu code from one of those free scripting sites and I would like to add some extra functionality to it. Currently, it parses each url as a menu item with the affiliated description text as you can see in the simple template I built here:
link

My Dilemma: I would like to add a small linked image after the menu item text (on the same line) that links to a different location. The problem is that the current code parses the image link as a new menu item.

I've attached the orginal code:

 

[MrNutz]

Here's what I would like to have parse as a single menu item (with two separate url anchors - the text and the image):

 

[MrNutz]

I guess I need a javascript guru...

 

[MrNutz]

Ahh... my thread's dying... can't anyone help?

 

[statik213]

OK I think I know what you want done... you don't need to change your javascript, you need to change your CSS.

You have this:

#kewlmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: white;
text-decoration: none;
border-bottom: 0px solid black;
}

you should change that to:

#kewlmenu div {
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
border-bottom: 0px solid black;
}

#kewlmenu div a{
font: bold 13px Verdana;
color: white;
display: inline;
text-decoration: none;
width: 80px;
}


So now your menu will look like:

<div id="kewlmenu">
<div><a href ...>menu 1</a><div>
<div><a href ...>menu 2</a><div>
<div><a href ...>menu 3</a><div>
<div><a href ...>menu 4</a><div>
</div>

And this allows you to do this:
<div id="kewlmenu">
<div><a href ...>menu 1</a><div>
<div><a href ...>menu 2</a><a href ...><img .... ></a><div>
<div><a href ...>menu 3</a><div>
<div><a href ...>menu 4</a><div>
</div>

But it has a (nasty) side-effect. When you mouse over the menu item the whole menu item does not highlight. Only the individual <a href>'s do. You can fix this by adding this code:

#kewlmenu div:hover{
background-color: AAA3CD;
color: white;
}

But since IE does such a bad job at implementing CSS it does not work in IE. Works great in firefox/mozilla though.

There are ways to get this to work like you want it but it's just too many little tricks.... and I don't have the time to experiment, sorry

 

[statik213]

BTW I don't think your javascript does not do any parsing to `make` the menu (I did a quick look, so I could be wrong)

It's a CSS menu and not a JS..
If you want to see some *neat* CSS menu:
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/example/

and some CSS fun:
http://csszengarden.com/?

 

[MrNutz]

ThankS!!! I'll test it out when I get home tonight and let you know how it works.

 

[MrNutz]

Ok, I finally got around to testing it out... busy weekend.... Looks awesome! But it really sucks that I can't get it working in IE. I wonder if I need some special code specific to IE???

 

[statik213]

Originally posted by: MrNutz
Ok, I finally got around to testing it out... busy weekend.... Looks awesome! But it really sucks that I can't get it working in IE. I wonder if I need some special code specific to IE???

Well you'll need to write some javascript to get the same effect in IE. Why? 'cos IE sucks .

You can attach events to each div menu item that's like this:

<div onMouseOver="highlight(this);" onMouseOut="unhighlight(this);">

Where highlight changes the class of the div that has a highlighted background or whatever CSS effect you want, and the unhighlight just clears the CSS class for the div on the mouse out.
This page describes how to change the CSS style of an element:

http://css.somepeople.net/dynamic


So if you pass the div as an argument instead of creating unique ids for each one, you could write the change function like so:

function change(theDiv, newClassName) {

theDiv.className=newClassName;

}

highlight(theDiv){

change(theDiv, 'myHilitedDivClass');

}

unhighlight(theDiv){

change(theDiv, '');


}

Good luck!

 

[MrNutz]

Yeah, I know IE sucks. I can't stand it, but I also know that most ppl that will view this page will be using IE. Thanks for the help though.

Is there some way that I can separate the code so that IE uses a certain part and Firefox will use a different part?

 

[statik213]

Yeah well -- I use IE more than firefox as well... it's more convenient at times

Well you could leave the code for the div:hover in there and could do a simple browser detect like so:

var ie4 = document.all;
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;


and then have the highlight/unhighlight function check if ie4 is true or false and then do the CSS change.

You'll need a more sophisticated browser detection script to handle all browsers in general -- safari, opera etc.

But if you're gonna do it with JavaScript anyway i'd say do it in JS for all browsers so that you are consistent.

 

[MrNutz]

How do I tell it not to do the div:hover & a:hover if it is IE? I'm getting close...

Actually, what are all the parts that are making it skip to the next line? Is it the "document.getElementById" commands?

 

[statik213]

Originally posted by: MrNutz
How do I tell it not to do the div:hover if it is IE? I'm getting close...

Well you leave the div:hover code in the CSS anyway (for Mozilla/CSS complient browsers) and IE will simply ignore it. IE reacts only to a:hover, a:link, a:visited and a:active.

So the JS would give the same efect in IE thru the onmouseover on mouseout events.

I would say that you leave the div:hover out completly and stick to onmouseover/onmouseout without having seperate sets of rules for each browser.

 

[MrNutz]

I did that and it looked fine, but when I put the text within the

<div id="kewlmenu">
...
</div>

so I could set the css formatting, it made the image skip to the next line.

 

[MrNutz]

Ok, I got it! I removed the width: 80px in the block:

#kewlmenu div a{
font: bold 13px Verdana;
color: white;
display: inline;
text-decoration: none;
width: 80px;
}

And now it works fine. Everything is on one line.

THANKS! - Do you know what that line did?

 

[statik213]

Originally posted by: MrNutz
Ok, I got it! I removed the width: 80px in the block:

#kewlmenu div a{
font: bold 13px Verdana;
color: white;
display: inline;
text-decoration: none;
width: 80px;
}

And now it works fine. Everything is on one line.

THANKS! - Do you know what that line did?

Yeah, it made each hyperlink ('a' tag) 80px wide. Since your column was not 160px wide it could fit only one 80px wide hyperlink.

:thumbsup:

 

[MrNutz]

So I'm guessing it shouldn't matter that I removed it... I got everything working great now. I used the div mouseover script for IE and the div hover script for firefox. The mouseover script made the highlight line too long in firefox.

Thanks for all the help!

 

[statik213]

Cool. glad i could help.