Comment savoir quand un élément sera hors écran?

Question

J'écris un script simple qui affiche une boîte de dialogue quand un utilisateur survole une image de profil. Il détermine dynamiquement l'emplacement des photos de profil sur la page et se place ensuite à gauche de celui-ci et à environ 100px au-dessus. Cette partie fonctionne bien.

Mon problème survient lorsqu'une photo de profil est en haut de l'écran et qu'un utilisateur la survole. La boîte de dialogue apparaîtra, mais la partie supérieure de celle-ci sera au-dessus du pli (c'est-à-dire pas dans la fenêtre du navigateur en cours). Naturellement, ce n'est pas une bonne convivialité et je voudrais qu'il apparaisse sur l'écran.

Ma question est comment puis-je savoir quand une boîte de dialogue sera hors écran afin que je puisse recalculer sa position sur la page?

J'ai vu this question ce qui semble être le même que le mien, mais malheureusement, aucune solution réelle n'a été fournie autre chose que de lier un plugin jQuery. J'utilise Prototype.

Answer 1

Prototype fournit déjà des positions avec Element.viewportOffset().

Modifier, comme Mathew indique document.viewport donne le reste de l'information. Par exemple,

var dialogtop = dialog.viewportOffset().top; 
if (dialogtop < 0) { 
    // above top of screen 
} 
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) { 
    // below bottom of screen 
} 

Answer 2

Vous voulez trouver la position de pic de profil par rapport au document (voici a good article on how, bien que je soupçonne Prototype de Element.Offset gère déjà), comparez-le à scrollTop la propriété du corps pour voir si elle est assez près du sommet que il doit avoir son dialogue repositionné.

Answer 3

Je suis familiarisé avec ce problème, mais la dernière fois, j'ai été en mesure d'utiliser une bibliothèque (Seadragon) pour obtenir les dimensions de l'écran et la position de la souris. Je travaillais également avec une superposition de taille fixe donc pas de code à partager avec vous autre que l'approche générale.

Pour ma boîte de pop-up, j'ai décidé d'utiliser la position de la souris de l'événement plutôt que l'emplacement de la div sur la page. J'ai ensuite comparé la position de la souris à la taille d'écran connue, que j'ai déterminée au démarrage ou au redimensionnement.

De How do I get the size of the browser window using Prototype.js?

var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal 
var width = viewport.width; // Usable window width 
var height = viewport.height; // Usable window height 

Dans Prototype vous pouvez également obtenir les coordonnées souris:

function getcords(e){ 
mouseX = Event.pointerX(e); 
mouseY = Event.pointerY(e); 
//for testing put the mouse cords in a div for testing purposes 
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY; 
} 

Source: http://remorse.nl/2008/06/mouse_coordinates_with_prototype/