Drop down bug? [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Drop down bug?

mawood

04-18-2003, 11:10 AM

Anyone familiar with the Microsoft Internet Explorer bug with drop down forms? THe one where dynamic actions such as cascading menus and hide/visable activities that cause drop downs to act odd. If someone is familiar with this, where can I find some documentation on it? I need to show something to my boss so its not just me saying its an issue.

Nevermore

04-18-2003, 11:40 AM

Microsoft Internet Explorer doesn't have a bug with this (that a know of), it just has less support for CSS 2 than other browsers. Perhaps you should look for documentation on this? However, it is unlikely to come from Microsoft, who still claim that they support the exact CSS 2 standards.

mawood

04-18-2003, 11:53 AM

I mean the one where dynamic content shows behind a select field and the one you hide and show content which sometimes causes the drop down menu to appear dozens of pixels above where it is supposed to be.

khalidali63

04-18-2003, 11:56 AM

your best bet will be to post a url to the page of concern or post the code here so that its easy for some one to actually see what going on rather guessing.
:D

Nevermore

04-18-2003, 11:56 AM

hmmm... never encountered that...

mawood

04-18-2003, 12:05 PM

I cant post the code, internal. No one has ever seen a cascading menu created in Javascript that expands on to a page but is behind any select fields that may be on the main page??

khalidali63

04-18-2003, 12:08 PM

Originally posted by mawood
I cant post the code, internal. No one has ever seen a cascading menu ...........

Good Luck......

:p

DrDaMour

04-18-2003, 12:44 PM

sounds like z-index to me.

most of the time it's your fault not MS.

mawood

04-18-2003, 01:59 PM

My fault? I can give it a z-index of 100000000000000000000000000000 and it STILL will be behind it. I can't believe no one here has ever seen this - ESPECIALLY in a javascript generated cascading menu.

Here, I slapped a demo together in the code below. Notice the menu does not cover the drop down.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>

</style>

</head>

<body>

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
<div class="menuitems" url="http://dynamicdrive.com">Dynamicdrive.com</div>
<div class="menuitems" url="http://dynamicdrive.com/new.htm" target="newwin">What's New?</div>
<div class="menuitems" url="http://dynamicdrive.com/hot.htm">What's Hot?</div>
<div class="menuitems" url="http://wsabstract.com/cgi-bin/Ultimate.cgi">Message Forum</div>
<div class="menuitems" url="http://dynamicdrive.com/faqs.htm">FAQs</div>
<div class="menuitems" url="http://dynamicdrive.com/submitscript.htm">Submit</div>
<hr>
<div class="menuitems" url="mailto:dynamicdrive@yahoo.com">Email Us</div>
</div>

<script language="JavaScript1.2">

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")

function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

menuobj.style.visibility="visible"
return false
}

function hidemenuie5(e){
menuobj.style.visibility="hidden"
}

function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}

function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}

</script>
<form action="" name="booyaa" id="booyaa">
<select>
<option>Can't cover me.
</select>
</form>
</body>
</html>

DrDaMour

04-18-2003, 02:34 PM

hm, that is pecular. i stand corrected

khalidali63

04-18-2003, 06:49 PM

Well I guess there are some known html limitations, this is one of them.

I came accross this problem some time ago when some one asked that why menu would hide behind a frame.

Anyway see a work around this crap,until w3c takes care of this or may be not who knows.

http://68.145.35.86/skills/javascripts/CSSMenuSelectBoxWorkAround.html

I had this work around for frames,but editied for SELECT element.

Hope this helps....

DrDaMour

04-18-2003, 08:18 PM

did you just hide it then? That's some nice code, i thought about something like that, but i was thinking bigger where it knew where you were at, and hid objects in that area, but i got real confused and frusturated. I see you prevailed!

mawood

04-18-2003, 09:45 PM

I was really begining to think this would be unresolved. Much of thanks - very imressive. I am now able to show a solution come Monday instead of documentation on why we can't. Thanks a lot khalidali63.

khalidali63

04-19-2003, 01:09 AM

My pleasure guys..

Glad to be of any help

:D