I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
+2
A:
Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
- In your
.producthover event handler, get the offset of the product. This will give you the position of your product in relation to the document. - Next create your overlay product information div and append it directly to the
<body>. - Set the overlay div to position: absolute and use the values returned from the offset call to position it.
- Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.
Pat
2010-08-18 15:36:27