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 5 of 5

Thread: zindex

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Smile zindex

    Hi,
    The point is to make a box that pops out when an image is hovered. The JavaScript zIndex does not work for some reason. When the image is hovered, all the content below the box moves to a new position.

    What should be changed in the socialBlock() function?

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <style type="text/css">
    #pop_fb_trigger {
    }
    #pop_fb_box {
    	border: 1px solid #00FFFF;
    	position: relative;
    	z-index: 9999;
    	width: 250px;
    	height: 85px;
    	top: -5px;
    	display: none;
    }
    #socials .social {
    	float: left;
    }
    </style>
    
    <script type="text/javascript">
    <!--
    function socialBlock() {
    	document.getElementById('pop_fb_box').style.zindex = '9999';
    	document.getElementById('pop_fb_box').style.display = 'block';
    }
    //-->
    </script>
    
    </head>
    
    <body>
    
    <div id="socials">
    	<div class="social">
    		<div id="pop_fb_trigger"><img alt="" src="../images/fb-icon.png" onmouseover="socialBlock();" onmouseout="document.getElementById('pop_fb_box').style.display = 'none';" >
    			<div id="pop_fb_box" onmouseover="socialBlock();" onmouseout="document.getElementById('pop_fb_box').style.display = 'none';">
    			</div>
    		</div>
    	</div><!-- eo social -->
    </div><!-- eo socials -->
    
    <br />
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    
    </body>
    
    </html>
    Thanks.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    When javascript is used to set style, every hyphen in the style attribute is replaced by capitalizing the next letter.

    background-color == backgroundColor

    z-index == zIndex
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Thank you . It is still not working though...

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    The z-index property only defines the visibility of an element; a higher z-index does not mean it's a new layer that is independent from others. Try making your popout box absolutely positioned as a test, then the text will not be affected.

    By the way, the HTML comments in your Javascript code are completely unnecessary nowadays.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    A quick'n'dirty working version can be seen here: http://jsfiddle.net/w4MYS/1/

    However, this is something that CSS3 can do without any Javascript. If you search for "css tooltip", you will find plenty examples, for example this. A pure CSS solution is typically preferable to a Javascript solution.

  • Users who have thanked Airblader for this post:

    JonesJ (08-31-2013)


  •  

    Tags for this Thread

    Posting Permissions

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