Web Analytics Made Easy -
StatCounter z-index issue (javascript) need help please! - CodingForum

Announcement

Collapse
No announcement yet.

z-index issue (javascript) need help please!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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; Aug 22, 2011, 04:06 PM.

  • #2
    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/

    Comment


    • #3
      Oh, thank you very much Vic. That makes sense. Thank you for your help.!

      Comment

      Working...
      X