jquery image hover popup cant detect browser edge and change its direction
- by Salman
hi guys
i am trying to implement jquery image hover popup but facing a problem when the popup is closer to browser edge it goes beyond its edge i want it to change its direction when it finds that space is not enough to show that popup, i have see this effect in many plugins where popups, tooltips and drop down menus change their direction if they are close to browser window edge
can any one guide me in right direction
here is the screen shot for reference
http://img512.imageshack.us/img512/4990/browseredge.png
here is the jquery hover code
function imagePreview(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br>" + this.t : "";
var newName = this.name;
//console.log(this.name);
newName=newName.replace("/l/","/o/");
//console.log(newName);
$("body").append("<p id='preview'><img src='"+ this.name +"' alt='Image preview' style='margin-bottom:5px;'>"+ c +"</p>");
$("#preview img").error(function () {
$("#preview img").attr("src" ,newName).css({'width': '400px', 'height': 'auto'});
});
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
any help will be appriciated
Thanks
Salman
