Quelle est la taille réelle de la fenêtre que je surfe?

Par Olivier, le mercredi 18 février 2009 à 10:00 | Développement

Capturer la position de la souris

A l'aide de jQuery, c'est un jeux d'enfant:

$().mousemove(function(e){
x = e.pageX;
y = e.pageY;
}

x et y étant respectivement les valeurs de l'abcisse et de l'ordonnée (quelques souvenir de géométrie?)

Capturer la taille de l'écran

Javascript nous propose l'objet "screen" pour capturer ces valeurs: screen.width et screen.height, ou encore, screen.availWidth et screen.availHeight

Je vous renvoie vers W3Schools pour obtenir des détails sur ces 2 méthodes, car en fait, elles ne nous conviennent pas.

Ce n'est pas l'écran mais la fenêtre

Effectivement, la taille de l'écran nous importe peu, c'est surtout la taille de la fenêtre de navigation qui nous intéresse.

Javascript nous propose l'objet "window" avec les méthodes "outerWidth" et "outerHeight".
Ici également, je vous renvoie vers W3Schools pour les infos car ce n'est pas encore exactement ce dont nous avons besoin.

Pourquoi? Parceque ces deux méthodes nous retournent les dimensions du browser dans son entièreté, c'est à dire, barres de navigation, barre d'états, panneux latéraux, etc, inclus!

La zone surfable

Voilà ce qui nous intéresse, la zone "réelle" de notre écran, celle qui est contenu "à l'intérieur" du navigateur, sans se soucier de tous les arficices qui l'encadrent. De plus, si le surfeur redimensionne son navigateur, il faut que ces valeurs s'adaptent directement.

Si je vous ai parlé des différentes méthodes, c'est pour mieux comprendre celles-ci

Firefox et associés
window.innerWidth: Returns the physical width of the browser screen
window.innerHeight: Returns the physical height of the browser screen

équivalants IE4+
document.body.clientWidth: Returns the physical width of the browser screen
document.body.clientHeight: Returns the physical height of the browser screen

Attention donc au client qui surfe la page!

Maintenant que vous pouvez capturer la position de la souris et que vous connaissez précisément la dimension de l'écran surfable, voici une fonction qui place un DIV à la place du tooltip lors du survol d'un TD d'un tableau.

Le tooltip se positionnera de l'autre côté de la souris lorsque vous vous approcherez du bord de la fenêtre (vers la droite et vers le bas)

CSS

#tooltip {
display: none;
position: absolute;
width: 200px;
height: 100px;
background: #FFFFAE;
}

HTML

<div id="tooltip"></div>

Javascript

$(document).ready(function() {
$("td").mouseover(function(){
$(this).mousemove(function(e){
// the tooltip position offset
offsetX = 20;
offsetY = 20;
// the tooltip dimensions
boxWidth = 200;
boxHeight = 100;
// the mouse position
x = e.pageX;
y = e.pageY;
// calculation of the screen limit before the tool tip position change
if (window.innerWidth) { //if browser supports window.innerWidth
xLim = window.innerWidth - boxWidth - offsetX - 20;
yLim = window.innerHeight - boxHeight - offsetY - 10;
} else if (document.all) { //else if browser supports document.all
xLim = document.body.clientWidth - boxWidth - offsetX - 20;
yLim = document.body.clientHeight - boxHeight - offsetY - 10;
}
// change to tooltip position if the mouse is out of limit
if (x>xLim)
x = x - boxWidth - offsetX;
else
x = x + offsetX;
if (y>yLim)
y = y - boxHeight - offsetY;
else
y = y + offsetY;
// positioning the tooltip div and show
$("#tooltip").css({top:y, left:x}).show();
});
}).mouseout(function(){
// hide the tooltip div
$("#tooltip).hide();
});
})

Remarquez au passage que je gère également le type de browser et donc j'adapte la méthode en fonction.

Tout est évidemment gérable dans le CSS, n'oubliez pas d'adapter les boxWidth et boxHeight qui sont les dimensions du tooltip.

Si jamais vous transformiez ce code pour en faire quelquechose qui pourrait intéresser les autres, faites-moi signe, j'apporterai les modifications ici aussi!

Bon amusement!