jQuery Position Element next to each other on mouse over - with fixing of scrollable div
Question
So I fiddled with this jsFiddle of mouseover together with absolute positioning divs
The outcome is undesired. The code is based on jquery how to position one element relative to another But the code is not working as expected. I can figure out how to reposition the offset depending on the absolute positioning (eg substract offset of header). But what I have trouble with is the scrolling positioning. As soon as you start scrolling the position is wrong. Does someone know a solution of it?
2 answers
solution1
1 2011-12-06 13:57:27
For some reason the offset().top value changes in jQuery when you scroll the document. Instead, simply use the standard HTML element properties offsetLeft and offsetTop :
Working example: http://jsfiddle.net/YpcSe/2/
Code:
$("#m1").mouseover( function(){
$("#o1").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
$("#o1").hide();
});
$("#m2").mouseover( function(){
$("#o2").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout( function(){
$("#o2").hide();
});
solution2
0 ACCPTED 2011-12-06 16:07:32
hate to answer my own questions but see here: working solution with jquery
basically the problem was that the element was inserted at the wrong location. The offset somehow did not relate correctly to the page with scrollbars. This can be fixed by adding the element on the parent form (in case you wanna make some buttons visible for example). Or the <body>
It fixes as well a problem with overlapping elements I had. Just imagine you have an fixed positioned element E1 and an absolute positioned element E2. One is the left menu, E2 is the content. When you want to make visible / show an element when you mouseover over a eg div in the E2 content and want it to overlap over the left menu E1 then you need to make sure that the div is not in the content, since it seems you cannot overlap into a sibling of E2 which is positioned fixed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.