Syntaxe : réduire une répétition de fonctions
Bonjour à tous,
J'ai mis en place une fonction javascript destinée à déclencher un changement de classe de mon menu principal lorsque certains éléments de ma page sont affichés dans une zone bien précise de la fenêtre du navigateur. Or, n'y connaissant pas grand chose en javascript, j'ai rédigé cette fonction 7 fois de suite puisqu'elle est appliquée à 7 éléments différents et provoque 7 changements distincts.
Je me demandais s'il existait une façon condensée d'écrire tout cela.
Ci-dessous un exemple, mais avec seulement 2 duplications de cette fonction puisque c'est suffisant pour exposer mon problème.
Si une bonne âme pouvait me montrer comment il est possible de condenser ces deux éléments, je lui en serait très reconnaissant :-)
Comme je le disais précédemment, je n'y connais pas grand chose en javascript. Les messages du type "tu déclares une valeur de fonction hypoglycémique sur l'abscisse du concentrateur périgalactique et tu l'affectes à l'élément parent du gluon du trou" ne devraient malheureusement pas trop pouvoir m'aider... Merci d'avance pour vos réponses concrètes ! :-)
Exemple :
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
| window.onscroll=function()
{
{estVisible01('scroll01')}
function estVisible01(id_element){
var cadreVisible = {yMin: 0, yMax: 0}, elementVisible = {yMin: 0, yMax: 0};
var source = document.getElementById(id_element), sourceParent = source.offsetParent;
var total = {hauteur: false}, partiel = {hauteur: false};
cadreVisible.yMin = (window.pageYOffset - 100) || (document.documentElement.scrollTop - 100) || (document.body.scrollTop - 100);
cadreVisible.yMax = (window.pageYOffset + 247) || (document.documentElement.scrollTop + 247) || (document.body.scrollTop + 247);
while(sourceParent) {
elementVisible.yMin += sourceParent.offsetTop;
sourceParent = sourceParent.offsetParent;}
elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
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.hauteur){document.getElementById('mymenu').className='menu01'; return true;}
else{return false;};
};
{estVisible02('scroll02')}
function estVisible02(id_element){
var cadreVisible = {yMin: 0, yMax: 0}, elementVisible = {yMin: 0, yMax: 0};
var source = document.getElementById(id_element), sourceParent = source.offsetParent;
var total = {hauteur: false}, partiel = {hauteur: false};
cadreVisible.yMin = (window.pageYOffset - 100) || (document.documentElement.scrollTop - 100) || (document.body.scrollTop - 100);
cadreVisible.yMax = (window.pageYOffset + 247) || (document.documentElement.scrollTop + 247) || (document.body.scrollTop + 247);
while(sourceParent) {
elementVisible.yMin += sourceParent.offsetTop;
sourceParent = sourceParent.offsetParent;}
elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
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.hauteur){document.getElementById('mymenu').className='menu02'; return true;}
else{return false;};
};
}; |
