jquery image hover popup ne peut pas détecter le bord du navigateur et changer de direction - jquery, html, width

Je suis en train de mettre en œuvre jquery image hover popupmais face à un problème lorsque le popup est plus proche du bord du navigateur, il dépasse son bord. Je veux qu'il change de direction lorsqu'il trouve que l'espace n'est pas suffisant pour montrer ce popup, j'ai vu cet effet dans de nombreux plugins où des popups, des info-bulles et les menus déroulants changent de direction s'ils sont proches du bord de la fenêtre du navigateur

quelqu'un peut-il me guider dans la bonne direction voici la capture d'écran pour référence http://img512.imageshack.us/img512/4990/browseredge.png

voici le code hover jquery

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="/images/"+ 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");
});
};

toute aide sera appréciée

Merci

Salman

Réponses:

Votre extrait est un peu gonflé par d'autresCode non lié / longue attente pour moi de passer trop de temps à le regarder, mais comprendre votre problème Je pense que cet extrait de code que j'ai écrit pour traiter une navigation méga-déroulante et en s'assurant qu'il ne soit jamais sorti de l'écran vous aidera probablement.

function resize() {
var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();

if (jQuery.browser.msie) {
if(parseInt(jQuery.browser.version) == 7) {
viewportWidth -= 3;
}
}

$("ul#nav .sub").each(function() {
$(this).css({"display": "block", "left": ""});
var offset = $(this).offset().left + $(this).outerWidth(true) + 10;

if(offset > viewportWidth) {
ie6offset = $.browser.msie && $.browser.version.substr(0,1)<7 ? 30 : 0;
$(this).css({
"left": -(offset + 10 - viewportWidth) - ie6offset
});
}
});
}

En résumé, la fonction calcule le décalage réel du bord droit de .sub. Et puis vérifie ce décalage contre la largeurde la fenêtre en prenant en compte les incohérences du navigateur. Si le décalage est supérieur à la largeur de la fenêtre, il est nécessaire de définir une valeur négative à gauche pour que l'élément reste à l'écran.