I have a popup div, its working fine and gets popped up when i click a image, now when i zoom in or out, the popup div stays where it is as its position is absolute, when i am changing it to relative, its popping out at different place, the css and javascript are below:
css
.set_pop{
position:absolute;
margin-right: 50px;
margin-top:10px;
width:100px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
background-color: #ffffff;
color:#000;
}
js
$('.settings img').live('click', function(event){
event.stopPropagation();
var popup_div = $('.set_pop');
var obj = $(this);
var offset = obj.offset();
var new_top = offset.top + 30;
var new_left = offset.left;
new_left = new_left - ( popup_div.width() / 2);
new_left = new_left + ( obj.width() / 2);
popup_div.css('left', new_left + 'px');
popup_div.css('top', new_top + 'px');
popup_div.show();
});
what i need is this div to reposition it self with the source of popup in my case its image, when i am zooming in/out
thanks and regards
This is the problem of window resizing, so you need to run the function on each time window is resized. Sample code...
$('.settings img').live('click', function(event){
$('#hidid').attr('value', $(this).attr('id'));
showDiv(this.id);
});
window.onresize = function() {
var id = $('#hidid').attr('value');
showDiv(id);
};
function showDiv(id) {
var popup_div = $('.set_pop');
var obj = $('#'+id);
var offset = obj.offset();
var new_top = offset.top + 30;
var new_left = offset.left;
new_left = new_left - ( popup_div.width() / 2);
new_left = new_left + ( obj.width() / 2);
popup_div.css('left', new_left + 'px');
popup_div.css('top', new_top + 'px');
popup_div.show();
}
And html part I have take a hidden field to store the id on clicking the image... you can store it in your own way. and btw I have also use id for each image. May be it will help you :)
try with position:fixed;
instead of position:absolute;
. fixed position will keep the box in same. If you are using absolute that box will go up when you scroll-down the page. When using position fixed use left and right to margin. Like this
.set_pop{
position:fixed;
right: 50px;
top:10px;
width:100px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
background-color: #ffffff;
color:#000;
}
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.