tidalik

Unfortunately L2c your fix doesn't work. It shifts the canvas down the page and I still have the first div sliding out when I hover on the second div.

An image disappeared so you didn't realise the div was there. Try: http://jsfiddle.net/Xb2q9/4/

I have 2 menu div's floating to the right of a canvas. They menus are designed to slide out on hover and slide back to normal afterwards. The problem is that when I hover on the second div, the location (position) of the first div shifts with it. Example of it in action is at: http://jsfiddle.net/Xb2q9/ I know it has to do with the order that the divs are listed and position: relative but haven't managed a work around. My HTML <table class="unpadded-table"> <tr> <td> <div id="screen"> <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas> <div id="firstmenu"> <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div> </div> <div id="secondmenu"> <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div> </div> </div> </td> </tr> </table> My CSS: #firstmenu { float:right; background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top; padding-left: 10px; ; margin-top: 15px; padding-top: 0px; width: 10px; height: 180px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; display: inline-block; } #secondmenu { float:right; background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top; padding-left: 10px; margin-left: 0px; padding-top: 0px; width: 10px; height: 250px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; margin-top: 250px; display: inline-block; } #firstmenucontents{ background: #ffffff; margin-right: 15px; margin-top: 0px; margin-left:0px; width: 135px; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; opacity:0.0; border:1px solid black; float:left; } #firstmenu:hover{ width: 150px; opacity:1.0; } #secondmenu:hover{ width: 150px; opacity:1.0; } #firstmenucontents:hover, #secondmenucontents:hover { opacity:1.0; width: 135px; } .example { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px #000 solid; float: left; width: 655px; margin-left: 100px; width: }

Hi all, I have a dynamic list that is refreshed regularly from the server using AJAX. When one of the listed items is in use, I highlight it and have an "In use" tag added. I'd like to be able hover over the "In use" tag and get details of the usage. I have written the php script that outputs the details of a usage when passed an ID, now I want to get the hover pop working. I've searched google a bit over the last couple of days but keep finding tutorials that use divs for the content (which doesn't work so well as I am already loading the list into a div). I'd appreciate some pointers Code currently in use: index.php <script> $(document).ready(function() { $("#list").load("current.php"); var refreshId = setInterval(function() { $("#list").load('current.php'); }, 3000); $.ajaxSetup({ cache: false }); }); </script> <!------Snip----------------> <h3>Current Usage</h3> <div id="list"> </div> current.php outputs a html table ie: <table id="registrations"> <tr><td>Number</td><td>In Use</td></tr><tr class="inuse"><td>5001</td><td><a href="../detaileduse.php?ref=5001" class="onhover" target=new>Yes</a></td></tr> <tr><td>5002</td><td></td></tr> </table> At present the link I've set up in the "In Use" doesn't work, but does if I choose to open in new window or tab.