jQuery hover effect image preview going out of the

Question

I'm using a jquery effect.it's an image preview on mouse hover.The problem is when i hover on the left images it displays well but when i hover the right ones,the image preview go out of the browser's window and vertical/horizontal scroll bars appears.I want to display the image on the cursor's right side so that they remain inside the browser's window.What should i do with this code?

this.imagePreview = function(){ 
/* 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 : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
    $("#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");
    });         
};      

Answer 1

You are going to need to do some calculations to compare your e.pageX and e.pageY to window width/height and width/height of your preview element to see if it will fit the window or not.

You can get the window dimensions using $(window).width() & $(window).height()

Based on the calculations you would then set your position to compensate

Answer 2

A quick example of needed calculations. I only made the math for width (X). Height (Y) is up to you.

http://jsfiddle.net/teae5/3/

If your preview is on the same Y coordinates as a.preview, at some point you will hover over preview itself and not the link, and preview will close. At least with this approach.