[SRC] Savoir si un élément est visible à l'écran
Bonjour,
Voici un petit script qui permet de tester si un élément (repéré par son id) est visible à l'écran.
Désolé pour le manque de commentaires, je n'ai pas encore eu le temps !!! :aie:
Citation:
Fonction estVisible pour tester si un élément passé en paramètre est visible à l'écran.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| function estVisible(id_element){
var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
var source = document.getElementById(id_element), sourceParent = source.offsetParent;
var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
elementVisible.xMin = source.offsetLeft;
elementVisible.yMin = source.offsetTop;
while(sourceParent) {
elementVisible.xMin += sourceParent.offsetLeft;
elementVisible.yMin += sourceParent.offsetTop;
sourceParent = sourceParent.offsetParent;
}
elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
total.largeur = true;
}
else if(!(cadreVisible.xMax < elementVisible.xMin || cadreVisible.xMin > elementVisible.xMax)){
partiel.largeur = true;
}
if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
total.hauteur = true;
}
else if(!(cadreVisible.yMax < elementVisible.yMin || cadreVisible.yMin > elementVisible.yMax)){
partiel.hauteur = true;
}
if(total.largeur && total.hauteur){
return(id_element + ' est entièrement visible dans la page !');
}
else if(total.largeur && partiel.hauteur){
return(id_element + ' est entièrement visible en largeur mais tronqué en hauteur');
}
else if(total.hauteur && partiel.largeur){
return(id_element + ' est entièrement visible en hauteur mais tronqué en largeur');
}
else if(partiel.hauteur && partiel.largeur){
return(id_element + ' est tronqué en hauteur et en largeur');
}
else{
return(id_element + ' n\'est pas visible dans la page !');
}
} |
Utilisation
La fonction prend donc en paramètre l'id d'un élément HTML, calcule la portion visible de la page, la position de l'élément dans la page et teste si la position est dans la partie visible.
Elle renvoie une chaine de caractère indiquant si :
- L'élément est entièrement visible
- L'élément est visible partiellement (en hauteur et / ou largeur
- L'élément n'est pas visible.
Exemple d'intégration dans une page HTML
Une page complète de test (faites défiler la page en hauteur et largeur et cliquez sur la page pour afficher le résultat) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
body{
width: 5000px;
height: 2500px;
}
.test{
position: relative;
width: 500px;
height: 250px;
left: 1500px;
top: 1000px;
background-color: silver;
text-align: center;
border: 1px solid black;
}
-->
</style>
<script type="text/javascript">
<!--// [CDATA[
document.onclick=function(){alert(estVisible('test'))}
function estVisible(id_element){
var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
var source = document.getElementById(id_element), sourceParent = source.offsetParent;
var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
elementVisible.xMin = source.offsetLeft;
elementVisible.yMin = source.offsetTop;
while(sourceParent) {
elementVisible.xMin += sourceParent.offsetLeft;
elementVisible.yMin += sourceParent.offsetTop;
sourceParent = sourceParent.offsetParent;
}
elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
total.largeur = true;
}
else if(!(cadreVisible.xMax < elementVisible.xMin || cadreVisible.xMin > elementVisible.xMax)){
partiel.largeur = true;
}
if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
total.hauteur = true;
}
else if(!(cadreVisible.yMax < elementVisible.yMin || cadreVisible.yMin > elementVisible.yMax)){
partiel.hauteur = true;
}
if(total.largeur && total.hauteur){
return(id_element + ' est entièrement visible dans la page !');
}
else if(total.largeur && partiel.hauteur){
return(id_element + ' est entièrement visible en largeur mais tronqué en hauteur');
}
else if(total.hauteur && partiel.largeur){
return(id_element + ' est entièrement visible en hauteur mais tronqué en largeur');
}
else if(partiel.hauteur && partiel.largeur){
return(id_element + ' est tronqué en hauteur et en largeur');
}
else{
return(id_element + ' n\'est pas visible dans la page !');
}
}
// ]] -->
</script>
</head>
<body onload="document.getElementById('test').scrollIntoView(false)">
<div id="test" class="test">Div de test</div>
</body>
</html> |
Compatiblité
Testé sur FF2, IE6 et IE7
EDIT :
Tests complémentaires sur FF3, Opera, Chrome et Safari concluants.
