How to display a div next to the floating element with jQuery?
source link: https://www.codesd.com/item/how-to-display-a-div-next-to-the-floating-element-with-jquery.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to display a div next to the floating element with jQuery?
Let's say i have several div's like these:
EDIT:
<div class="ProfilePic">
<a href="#">
<img src="lib/css/img/profile_pic1.png" alt="" class="ProfilePicImg"/>
</a>
<div class="PopupBox" style="display:none;"> ... </div>
</div>
I want to be able to hover over the image .ProfilePicImg
and show a another div relatively to it.
The box to popup on hover is set to position:absolute
. And the .ProfilePic
's position is relative. Just like it should be.
I have tried different solutions, but in vain... And I have also searched around here on StackOverflow...
Does anyone have a trick for this?
P.S. I don't want the popup box to show on each of the .ProfilePic
div's I have...
EDIT2: It seems jQuery's .find()
traversal function was the key to fetch the specific .PopupBox i wanted to show, instead of the all.
I haven't tested the code but is this what you are looking for?
$(".ProfilePicImg").hover(function(){
var divToShow = $(this).parent("a").siblings("div.PopupBox");
divToShow.css({
display: "block",
position: "absolute",
left: ($(this).offset().left + $(this).width()) + "px",
top: $(this).offset().top + "px"
});
},
function(){
$("div.PopupBox").hide();
});
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK