Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop Down Menu not Work in IE but not in Netscape, Firefox. Help

Status
Not open for further replies.
sheed

sheed

Programmer
Jun 14, 2005
38
US
I have the following menu. It works fine in IE only but it doesn't doesn't work in Firefox, Netscape I didn't try it in Opera but I assume that it wouldn't work in that either. Can someone please tell how can I make it work in all the browsers. Is there something wrong with code or how I can fix this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
<!--
a:hover{color:blue}
a{text-decoration:none}
.look{font:bold 16pt Garamond,Arial;}
.look2{font:bold 12pt Garamond,Arial;}
.folding{cursor:hand}
a:active{color:red}
ul {
list-style: none; /*gets rid of list markers*/
margin: 0; /*removes margins*/
padding: 0px; /*sets indent across browsers*/
}

//-->
</style>

<script language="JavaScript">
<!--
//By George Chiang ( JavaScript site.
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
ns6_index=0

function change(e)
{
if(!document.all&&!document.getElementById)
return

if (!document.all&&document.getElementById)
ns6_index=1

var source=document.getElementById&&!document.all? e.target:event.srcElement
if (source.className=="folding")
{
var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
if (source2[2+ns6_index].style.display=="none")
{
source2[0].src="open.gif"
source2[2+ns6_index].style.display=''
}
else
{
source2[0].src="fold.gif"
source2[2+ns6_index].style.display="none"
}
}
}
document.onclick=change
//-->
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<div class="look"><img src="fold.gif" class="folding">&nbsp;<a href=" 3</a>
<ul class="look2" style="list-style-image:url(list.gif);display:show">
<li><a href="fdddf">Link 3a</a></li>
<li><a href="fdddf">Link 3b</a></li>
<li><div class="look"><img src="fold.gif" class="folding">&nbsp;<a href="#">Menu 2</a>
<ul class="look2" style="list-style-image:url(list.gif);display:none">
<li><a href="fdddf">Link 2a</a></li>
<li><a href="fdddf">Link 2b</a></li>
<li><a href="fdddf">Link 2c</a></li>
</ul>
</div>
</li>
</ul>
</div>
</BODY>
</HTML>
[/code]

Any help is appreciated. Thanks
 
Sort by date Sort by votes
>I have the following menu. It works fine in IE only but it doesn't doesn't work in Firefox, Netscape
The function change is not tightly and formulated in generic terms as long as the attributing class is consistently done. Try this big scale revision of change which is then cross-browser and a bit more general to my taste.
[tt]
function change(e)
{
if(!document.all&&!document.getElementById)
return

var source=document.getElementById&&!document.all? e.target:event.srcElement
if (source.className=="folding")
{
var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
source.src=(source.src.indexOf("open.gif")!=-1)?"fold.gif":"open.gif";
for (var i=0;i<source2.length;i++) {
if (source2.className && source2.className.indexOf("look2")!=-1) {
var sdisplay=source2.style.display;
source2.style.display=(sdisplay=="none")?"":"none";
}
}
}
}
[/tt]
The only consistent naming is that img of the menu is having the class "folding" and the list the class "look2" (or containing it as part). These seem to be reflected in the orginal script.

A part from the above, the page initation seems to have a minor mixed up in the first img setting
>[tt]<div class="look"><img src="fold.gif" class="folding">&nbsp;<a href=" 3</a>
[/tt]
should be read
[tt]<div class="look"><img src="[red]open[/red].gif" class="folding">&nbsp;<a href=" 3</a>
[/tt]
 
Upvote 0 Downvote
Thanks it does work in IE,Netscape,FireFox, AOL and Opera. But can you please tell me why the behavior is different when I have the following values i.e.

In my above sample have following for both <ul...> e.g.

Code: 
<ul class="look2" style="list-style-image:url(list.gif);display:show">

<ul class="look2" style="list-style-image:url(list.gif);display:none">

The menu looks sample in all browsers. Now if having the following:

Code: 
<ul class="look2" style="list-style-image:url(list.gif);display:none">

<ul class="look2" style="list-style-image:url(list.gif);display:none">

The menu looks different. I think the inner sub-menu <ul.... behaves differently. I played arround the values and came-up with the following values which provided for display menu looks same.

Code: 
IE & OPERA & AOL:  none block
Netscape & FireFox: none & none

Is there some way to handle this consistently as there are more browsers that I don't know how the menu comes-out. Any help is really appreciated.

Thanks
 
Upvote 0 Downvote
As far as I know, "display:show" is not valid. Valid values for the display style are "block", "none", and "inline".

There are a few more, but these aren't fully supported by all browsers, and some may be IE-specific:

"inline-block", "list-item", "table-header-group", "table-footer-group".

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Don't forget "table-row".

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Any idea why the following following expands the content in IE while in Netscape it only shows the one expanded:

Code: 
<ul class="look2" style="list-style-image:url(list.gif);display:none">
    <li><a href="fdddf">Link 3a</a></li>
    <li><a href="fdddf">Link 3b</a></li>
    <li><div class="look"><img src="fold.gif" class="folding">&nbsp;<a href="#">Menu 2</a>
<ul class="look2" style="list-style-image:url(list.gif);display:none">
    <li><a href="fdddf">Link 2a</a></li>
    <li><a href="fdddf">Link 2b</a></li>
    <li><a href="fdddf">Link 2c</a></li>
</ul>

I have 2nd <ul> nested in 1st <ul> and the display property is set to none for both. No if I click the 1st <ul> in IE it shows me everything expanded even though the send <ul> display is set none. As in Netscape it only shows the 1st <ul> content. Thanks
 
Upvote 0 Downvote
If you are using my revision or variation of it, add a break.
[tt]
if (source2.className && source2.className.indexOf("look2")!=-1) {
var sdisplay=source2.style.display;
source2.style.display=(sdisplay=="none")?"":"none";
[blue]break;[/blue]
}
[/tt]
If you're on the original script, ask the author. (The main thing is I get rid of the ns6_index which is very restrictive to the design.)
 
Upvote 0 Downvote
Might I suggest it's a problem to do with your markup? The example you gave requires the following to be added to the end to makie it valid HTML:
Code: 
</div></li></ul>
Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
263
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
247
nanbread
nanbread
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
330
xwb
xwb
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
214
waubain
waubain
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
82
HansMaulwurf
HansMaulwurf

Part and Inventory Search

Sponsor

Back
Top