阻止js图片从屏幕上弹出

Question

Using the code below, how can I stop it from going off the screen? If you have an image on the far right of the browser window, the code expands the image to the right, so now the expanded image will be off the screen. I would like it to load to the left if it wants to load off the screen (to the right). I hope that makes sense. I would like to 'contain' the popup inside the browser window -- more specifically it needs to be contained to #page_container (which wraps the entire page)

I'm not sure where the original code came from, but im trying to modify it.

any help is appreciated.

this.screenshotPreview = function(){    

    xOffset = 10;
    yOffset = -10;

$("a.screenshot").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='preview'/>"+ c +"</p>");                                 
    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#screenshot").remove();
}); 
$("a.screenshot").mousemove(function(e){
    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         
};

here is the fiddle

http://jsfiddle.net/63HA4/

Answer 1

First of all you are mixing the "x" property with the "yOffset" that probably not what you intend. Triple check that.

Change your mousemove method for something like this, please note the check I'm adding to see if the future position is becoming negative (out of the parent container)

$("a.screenshot").mousemove(function(e){
    var x = (e.pageY - xOffset < 0)? 0: e.pageY - xOffset,
        y = (e.pageY + yOffset < 0)? 0: e.pageX + yOffset;
    $("#screenshot")
    .css("top",y + "px")
    .css("left",x + "px");

Then again, check the math, this is not a final code but it will give you an idea of what you need to do

Answer 2

Here is the solution that I implemented, it works for me.

this.screenshotPreview = function(){    

xOffset = -10;
yOffset = -10;

$("a.screenshot").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='preview'/>"+ c +"</p>");                                 
    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#screenshot").remove();
}); 
$("a.screenshot").mousemove(function(e){
    var _width = jQuery('#screenshot').outerWidth(),
    _outerWidth = document.body.offsetWidth;

    var x = e.pageX + yOffset;
    if(x >(_outerWidth - _width)){
        x = _outerWidth - _width;
    }

    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(x) + "px");
});         
};