PDA

View Full Version : (HTML/CSS) onMouseOver = visible & overflow:auto problem.



msimmons
May 8th, 2003, 03:48 PM
More cross compatibility fun
in this code (line brakes added for readability):




<div id="customDropDown_inDay" class="dropDown"
style="position:absolute;width:40px;height:180px;
overflow:auto;padding-left:5px;display:none;"
onMouseOver="document.getElementById('customDropDown_inDay').style.display = 'block';"
onMouseOut="document.getElementById('customDropDown_inDay').style.display = 'none';">

when I mouse over the scrollbar all is good but when I mouseover the contents of the div it dissapears... this is not good. If i take out "overflow:auto;" then it doesn't dissapear but obviously it is going to just keep going once it overflows rather than being scrolling...
why can people just use a working browser? is there a way to make this work?
thanks
Michael

Roy Sinclair
May 8th, 2003, 04:18 PM
How do you expect to mouseover an object that's not being displayed in the first place (display: none; in the style)?

If it's not displayed then the onmouseover event will never occur because it's nowhere you can get your mouse to.

msimmons
May 8th, 2003, 04:31 PM
this is a "dropdown menu" so the element above is shown by a mouseover function on an element right above it. (if that made any sense)
Michael

Roy Sinclair
May 8th, 2003, 06:20 PM
Are you saying some other item on the page has the ability to cause this element to be displayed?

What I see in this element is that you've got a useless onmouseover event, the element is defined as not being shown initially so the onmouseover event can never occur (unless some other event on the page also causes this element to be displayed) and since the onmouseover event for this element only causes the element to be displayed it's effectively useless.

Also the onmouseout event is more complicated than necessary, instead of onMouseOut="document.getElementById('customDropDown_inDay').style.display = 'none';" you could use onMouseOut="this.style.display = 'none';".

Now the way you've got it set up, something else on the page must be making it visible and anytime you mouse over that element and then mouse out of the element the element will be hidden. If you don't want the element to be hidden when the mouse leaves it you should remove the onmouseout event entirely (instead of editing it as suggested above).

msimmons
May 8th, 2003, 07:09 PM
Originally posted by Roy Sinclair
you could use [b]onMouseOut="this.style.display = 'none';".

Is this cross browser compliant?


Originally posted by Roy Sinclair
Are you saying some other item on the page has the ability to cause this element to be displayed?

Now the way you've got it set up, something else on the page must be making it visible and anytime you mouse over that element and then mouse out of the element the element will be hidden. If you don't want the element to be hidden when the mouse leaves it you should remove the onmouseout event entirely (instead of editing it as suggested above).
item one has an onMouseDown that displays element 2 (the one in question) and that is all... element one never hides element 2 (my fault for the confusion as I said it was onMouseOver when it is actualy onMouseDown. This works flawlessly in IE5.5+ and also works if I don't include the "overflow:auto;"... I do need to keep the onMouseOut for when the mouse leaves the element cos it functions like a dropdown... I guess I could change it to an <body onMouseDown> to hide the element.

Roy Sinclair
May 9th, 2003, 04:07 PM
Yes, it's cross-browser compliant. The special keyword "this" is a useful reference to the current object which all browsers support.

You don't need the onmouseover event on the item itself for displaying it since you say that's done by another object. I'm not sure now that I really understand what the actual problem is though, the only code change I've suggested so far just cleans up the page a bit but doesn't change then functionality.