Discussion :

[Harlock999]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;};
};
 
};

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function estvisible01(){
alert('01')
}
function estvisible02(){
alert('02')
}
 
estvisible01 ()
estvisible02()

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function estvisible(element){
alert(element)
}
 
estvisible ('01')
estvisible ('02')

est ce que celà repond à ton interrogation ?

[Harlock999]

Merci Spacefrog.

Je pense comprendre le principe pour quelque chose de simple de ce type (appliquer une action identique à plusieurs éléments).

Mais dans mon cas, même si toute la partie centrale du calcul est la même pour chaque fonction, la sortie est différente (classe menu02, menu03, etc.).

Donc je ne sais pas trop comment rédiger tout ça...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function estvisible(element){
if(element=='01'){
  alert("la j'ai trouvé "+element)
 }
else{
  alert("cette fsoi ci c'est "+element)
 }
}
 
estvisible ('01')
estvisible ('02')

voire aussi un switch

[Harlock999]

Ça veut dire que mon calcul "récurrent" se situe juste avant le if ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function estvisible(element){
 
//partie commune
alert("j'ai reçu un parmètre !")
 
 
//action différente selon le paramètre  
if(element=='01'){
  alert("la j'ai trouvé "+element)
 }
else{
  alert("cette fois ci c'est "+element)
 }
}
 
estvisible ('01')
estvisible ('02')