javascript - How to set div using Z-index and fix css -
area of concern -
- my blue div overlapping on green div. (i want have green div @ side blue div)
- on
mouseoverloaded content making blue div fall down im trying set "mydatatoshow" div on "rightsideblock" using jqueryz-indexproperty.
kindly have @ , let me know possible solution.
my working 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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .container{width:999px;} .leftsideblock{float:left; border:1px solid green;width:674px;} .rightsideblock{border:5px solid blue;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.mydivdata').mouseover(function(){ $('.mydatatoshow').css('z-index', '9999'); $('.mydatatoshow').show(); var mydata = $(this).text(); $('.mydatatoshow').html(mydata); }); $('.mydivdata').mouseout(function(){ $('.mydatatoshow').hide(); }); }); </script> <title>test test</title> </head> <body> <div class="container"> <div class="leftsideblock"> <div class="mydivdata"> <table width="650" border="0"> <tbody> <tr> <td width="90" valign="top" rowspan="2" class="myimageclass"> </td> <td width="193" valign="top">monday 07 july 2012</td> <td width="424"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td> </tr> </tbody> </table> </div> <div class="mydivdata"> <table width="650" border="0"> <tbody> <tr> <td width="90" valign="top" rowspan="2" class="myimageclass"> </td> <td width="193" valign="top">friday 06 july 2012 8:00am</td> <td width="424"> duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </td> </tr> </tbody> </table> </div> </div> <div class="mydatatoshow"> </div> <div class="rightsideblock"> <p> right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data. </p> </div> </div> </body> </html>
try this
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> .container{width:999px;} .leftsideblock{float:left; border:1px solid green;width:674px;} .rightsideblock{border:5px solid blue;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <title>test test</title> </head> <body> <div class="container"> <table> <tbody><tr> <td> <div class="leftsideblock"> <div class="mydivdata"> <table width="650" border="0"> <tbody> <tr> <td width="90" valign="top" rowspan="2" class="myimageclass"> </td> <td width="193" valign="top">monday 07 july 2012</td> <td width="424"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td> </tr> </tbody> </table> </div> <div class="mydivdata"> <table width="650" border="0"> <tbody> <tr> <td width="90" valign="top" rowspan="2" class="myimageclass"> </td> <td width="193" valign="top">friday 06 july 2012 8:00am</td> <td width="424"> duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </td> </tr> </tbody> </table> </div> </div> </td> <td> <div class="rightsideblock" style="top: 0;position: absolute;width: 300px;float: right;"> <p style="z-index:-1"> right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data.this right sidebar data. </p> <div class="mydatatoshow" style="top: 0px; left: 0px; z-index: 9999; float: right; position: absolute; display: none; "> friday 06 july 2012 8:00am duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></div> </td> </tr> </tbody></table> </div> <script type="text/javascript"> $(document).ready(function(){ $('.mydivdata').mouseover(function(){ $('.mydatatoshow').css('z-index', '9999'); $('.mydatatoshow').show(); // document.getelementbyid('to_hide').style.display='none'; var mydata = $(this).text(); $('.mydatatoshow').html(mydata); }); $('.mydivdata').mouseout(function(){ $('.mydatatoshow').hide(); //document.getelementbyid('to_hide').style.display='block'; }); }); </script> </body></html>
Comments
Post a Comment