...

View Full Version : Hiding Div! (driving me nutz)



allon
07-09-2007, 08:45 PM
Hi,

I have a small problem with the behavior of the following code. When you click the link (run the code in your browser to see), a small div appears (the hover div). I need this div to appear in *front* of the scrolling area, not within it. In IE, that is possible if you remove the "position:relative;" from the first div. However, if I do that, another bug is produced (in IE only) on my site, so I need to keep that there. But either way, I can't get it to appear in front of the scrolling area in FF.

Any help would be extremely appreciated! Thanks!

Here's the complete code, from <html> to </html>:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hover div bug test</title>
</head>
<body style="FONT-FAMILY:Arial; color:#000; font-size:10pt;">

<script type="text/javascript">
function toggleHover()
{
var h = document.getElementById("hover");
var w = document.getElementById("wrapper");
if(h.style.display == "none")
{
h.style.top = w.clientHeight + 5 + "px";
h.style.display = "";
}
else h.style.display = "none";
}
</script>


<div style="width:150px; height:150px; border:solid 5px #ccc; overflow-y:auto; overflow-x:hidden; padding:10px; margin:10px; z-index:0; position:relative;">

<div id="wrapper" style="float:left; position:relative;">

<a href="javascript:toggleHover()">Click Me</a>

<div id="hover" style="background-color:#eee; border:solid 2px #000; position:absolute; top:0; left:0; z-index:9999; width:275px; padding:10px; FONT-FAMILY: Arial, Helvetica, Verdana sans; display:none;">
Hover div with a set width and a long string of text.
</div>

</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>


<br /><br /><br /><br /><br />

</html>

koyama
07-10-2007, 04:18 AM
When you click the link (run the code in your browser to see), a small div appears (the hover div). I need this div to appear in *front* of the scrolling area, not within it.
Just to be sure we know what you are trying to achieve: What should happen when one starts scrolling vertically in the box?

In other words, when the link is clicked, should the div that appears move or not as one scrolls vertically?

allon
07-10-2007, 05:12 AM
...should the div that appears move or not as one scrolls vertically?

The div's behavior when scrolling is of secondary importance. Ideally, it should scroll as it does now (no need to change that behavior unless you have to). The most important thing is to get to appear in front of the scrolling div so that it's not hidden. If achieving this may affect whether the div that appears moves or not when scrolling, is of less importance.

I already tried playing with the z-index and positioning of the elements quite extensively, to no avail.

koyama
07-10-2007, 11:19 AM
The div's behavior when scrolling is of secondary importance.
In that case why can you not move #hover out of the div having the scrollbar? That should prevent the clipping.

allon
07-10-2007, 11:57 AM
Since the #hover must be relative to #wrapper, it must be within the #wrapper div.

koyama
07-10-2007, 12:28 PM
Since the #hover must be relative to #wrapper, it must be within the #wrapper div.
This means that you do want #hover to move as one scrolls? If #hover is positioned relative to #wrapper and #wrapper should move when one scrolls, then #hover will be moving too. Or am I missing something?

allon
07-10-2007, 12:31 PM
That's correct. #hover should move as you scroll. Sorry if my previous answer wasn't clear on this point.

koyama
07-10-2007, 12:38 PM
That's correct. #hover should move as you scroll. Sorry if my previous answer wasn't clear on this point.
But then there is the question what should happen when one starts scrolling downwards and #wrapper disappears out of the box at the top. Should #hover still be visible outside the box at this point and keep on moving upwards as one scrolls down? Wouldn't that look kind of funny?

allon
07-10-2007, 01:12 PM
Yes, it may actually look somewhat awkward.

However, the only real requirement for the behavior of #hover is that it appear in front of the scrollable div. Whether this can be achieved with #hover's position fixed or relative is of secondary importance. Either would work fine.

Ideally, though, it should scroll since it should always be in a position relative to the link that was clicked in #wrapper which triggered the #hover.

koyama
07-10-2007, 02:33 PM
I'm beginning to think that there is no pure CSS solution to this problem. I think you may need to look for a solution that involves JavaScript.

allon
07-10-2007, 03:01 PM
Koyama,
Thanks for your help anyway. Your effort was very appreciated :-)
Allon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum