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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    z-index issue (javascript) need help please!

    I am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code below.....
    -------------------------------------------------------------------

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <script language="javascript" type="text/javascript">
    <!-- Hide script from older browsers
    function MM_findObj(n, d) { //v4.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    function MM_showHideLayers() { //v3.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
    }
    //-->
    </script>
    
    <!------------------------------------------------------------->
    <style type="text/css">
    #wrapper{
    width:800px;
    }
    #left_top{
    background-color:#66FFFF;
    width:270px;
    padding-top:60px;
    padding-left:30px;
    float:left;
    }
    #right_top{
    background-color:#66FF33;
    padding-top:60px;
    width:480px;
    padding-left:20px;
    float:left;
    }
    
    #first_div{
    position:relative;
    width:450px;
    height:300px;
    z-index:1;
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    #second_div{
    position:relative;
    font-size:16px;
    width:450px;
    height:300px;
    z-index:2;
    top: -320px; 
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    #third_div{
    position:relative;
    font-size:16px;
    width:450px;
    height:300px;
    z-index:3;
    top: -640px; 
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    </style>
    </head>
      <body> 
      <div id="wrapper">                    
    <div id="left_top">
    			<table width="210" height="483">
                <tr><td width="210" height="477" valign="top">
    						
    						<div><a title="first div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div>	
                    
                    		<div><a title="second div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div>	
                    
     						<div><a title="third div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div>	                       </td></tr>
    			           </table>
    
    </div><!-- end of left_top --> 
                            
       <div id="right_top"> 
    
    <div id="first_div"> 
    <p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div>
    
    <div id="second_div"> 
    <p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div>
    
    <div id="third_div"> 
    <p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div>
    
    
       </div><!-- end of right_top div -->                   
    </div><!-- end of wrapper -->                  
    </body>
    </html>
    Last edited by Buffmin; 08-22-2011 at 10:06 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <script language="javascript" type="text/javascript">
    <!-- Hide script from older browsers
    function MM_findObj(n, d) { //v4.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    function MM_showHideLayers() { //v3.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
    }
    //-->
    </script>
    
    <!------------------------------------------------------------->
    <style type="text/css">
    #wrapper{
    width:800px;
    }
    #left_top{
    background-color:#66FFFF;
    width:270px;
    padding-top:60px;
    padding-left:30px;
    float:left;
    }
    #right_top{
    position:relative;
    background-color:#66FF33;
    padding-top:60px;
    width:480px;
    padding-left:20px;
    float:left;
    }
    
    #first_div{
    position:absolute;
    width:450px;
    height:300px;
    z-index:1;
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    #second_div{
    position:absolute;
    font-size:16px;
    width:450px;
    height:300px;
    z-index:2;
    top: 0px;
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    #third_div{
    position:relative;
    font-size:16px;
    width:450px;
    height:300px;
    z-index:3;
    top: 0px;
    visibility: hidden;
    left:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:italic; color:#FFFFFF;
    }
    </style>
    </head>
      <body>
      <div id="wrapper">
    <div id="left_top">
    			<table width="210" height="483">
                <tr><td width="210" height="477" valign="top">
    
    						<div><a title="first div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div>
    
                    		<div><a title="second div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div>
    
     						<div><a title="third div" href="#" class="style1"
    						onClick="return false"
    						onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')"
    						onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div>	                       </td></tr>
    			           </table>
    
    </div><!-- end of left_top -->
    
       <div id="right_top">
    
    <div id="first_div">
    <p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div>
    
    <div id="second_div">
    <p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div>
    
    <div id="third_div">
    <p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div>
    
    
       </div><!-- end of right_top div -->
    </div><!-- end of wrapper -->
    </body>
    </html>
    althought the divs are positioned off screen they take up the same space with position absolute they are positioned on top of each other
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Buffmin (08-23-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Oh, thank you very much Vic. That makes sense. Thank you for your help.!


  •  

    Posting Permissions

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