Any javascript experts here? NS alignment problem

WorldBuilder · 11-07-2003, 09:57 AM

Hi all,

I have asked this question in several other html/css/javascript specific forums throughout the web to no avail. Can LQ help with a non-LQ question?! I hope so! At http://www.bartlett-family.net/sokhan I have found a JS drop-down menu I like and have implemented it (I got the script from Dynamic Drive). Unfortunately, I know very little about javascript. In IE and Opera, the page looks great and works perfectly. In NS7, there is a problem with the drop-down menus, which is this:

The 4 links towards the top (My Obnoxious Husband, My Beautiful Son, My Family, My Extended Family) are supposed to generate drop-down menus when clicked. This DOES happen, but in NS7, you'll notice that the drop-down menus pop up all the way in the top-left corner of the screen. Can anyone help me fix that so they pop up where they're supposed to (right below the link)? I'd appreciate it. You'll see it, but looking at the html, you'll notice that there actually 14 seperate JS files being called regarding this script, but the main one is menu2.js which is this:

Code:

var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18

hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}

if (ie4||ns6)
document.onclick=hidemenu

Everything else about this page works fine, it's just the lack of proper functionality in NS. Can anyone help me out? Thanks a million!

Chris

dave bean · 11-07-2003, 12:52 PM

Have u tried to view it independently of the CSS ? I had a simialar problem with a fireworks navbar i embedded into a CSS span. If the problem is CSS related then you will have to rereference the starting position of the menus. Is it CSS related ?

WorldBuilder · 11-07-2003, 02:20 PM

I'm 99% certain that it's not css related. This javascript is not being called in a class of any kind. It has something to do with relative or absolute positioning ( I THINK) in this section of the html file:

Code:

<div id="dropmenu0" class="clsMenuTitle" style="position:absolute;left:0;top:0;background-color:#039;width:120px;visibility:hidden;border:0px;padding:0px">
<script type="text/javascript" src="drop0a.js"></script>
</div>
<script type="text/javascript" src="drop0b.js"></script>

<div id="dropmenu1" class="clsMenuTitle"
style="position:absolute;left:0;top:0;background-color:#039;width:120px;visibility:hidden;border:0px;padding:0px">
<script type="text/javascript" src="drop1a.js"></script>
</div>
<script type="text/javascript" src="drop1b.js"></script>

<div id="dropmenu2" class="clsMenuTitle" style="position:absolute;left:0;top:0;background-color:#039;width:120px;visibility:hidden;border:0px;padding:0px">
<script type="text/javascript" src="drop2a.js"></script>
</div>
<script type="text/javascript" src="drop2b.js"></script>

<div id="dropmenu3" class="clsMenuTitle" style="position:absolute;left:0;top:0;background-color:#039;width:120px;visibility:hidden;border:0px;padding:0px">
<script type="text/javascript" src="drop3a.js"></script>
</div>
<script type="text/javascript" src="drop3b.js"></script>

That MIGHT be where the problem is (so in a way it is a css problem), but I have fiddled with these settings to no avail. To be honest, I don't know where the problem is: the script, the style, the html... I just don't know.

Chris

raguy31 · 12-11-2003, 11:54 PM

I am invoking dropit using the following code, and it positions correctly on both NS7 and Mozilla1.4. I left the

Code:

<div ... style="position:absolute;left:0;top:0; ...">

menu definitions just as you have it.

Code:

<span style="position:relative" onclick="dropit(event,'dm1');event.cancelBubble=true;return false">

<a style="text-decoration:none" onclick="if(ns4) return dropit(event,'document.dm1')" href="http://whatever">tagtext</a>

</span>

WorldBuilder · 12-12-2003, 07:46 AM

Thanks guys,

I found yet another pre-made drop-down menu last week, implemented it, and completey rewrote the code. All's well now! Thanks!

Chris