jquery image hover popup cant detect browser edge and change its direction

Question

J'essaie d'implémenter le popup de survol d'image de jquery mais je rencontre un problème lorsque le popup est plus proche du bord du navigateur, il va au-delà de son bord. Je veux qu'il change de direction lorsqu'il constate que l'espace n'est pas suffisant pour afficher ce popup, j'ai vu cet effet dans de nombreux plugins où les popups, tooltips et 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 de survol de 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='"+ 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

Answer 1

Votre extrait est un peu gonflé par d'autres codes sans rapport avec lui pour que je passe trop de temps à le regarder, mais en comprenant votre problème, je pense que ce bout de code que j'ai écrit pour gérer une navigation méga-drop-down et m'assurer qu'elle ne sort jamais 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 véritable décalage de l'arête de droite de .sub . Il vérifie ensuite ce décalage par rapport à la largeur de la fenêtre d'affichage en tenant compte des incohérences du navigateur. Dans le cas où le décalage est supérieur à la largeur de la fenêtre d'affichage, il est nécessaire de définir une valeur négative à gauche pour que l'élément reste à l'écran.