Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hiding Div! (driving me nutz)

    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>:

    Code:
    <!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>

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by allon View Post
    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?

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...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.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by allon View Post
    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.

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since the #hover must be relative to #wrapper, it must be within the #wrapper div.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by allon View Post
    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?

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's correct. #hover should move as you scroll. Sorry if my previous answer wasn't clear on this point.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by allon View Post
    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?

  • #9
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Koyama,
    Thanks for your help anyway. Your effort was very appreciated :-)
    Allon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •