Discussion :

[KosenHitatchi]

Bonjour tout le monde.

J'ai un petit soucis pour cacher certain div préalablement affiché.
L’idée est d'afficher une div correspondant a un lien sur un menu, et de masquer celle préalablement affiché.

Pour recuperer toute mes DIV (class="newsbox") contenues dans la DIV (id="news"), j'utilise:

Code :

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

document.getElementsByClassName('newsbox','news')

Par contre quand je veux modifier le style de toute ces balise, je n'ai aucun resultat. Le code fonctionne pour afficher mes DIV, par contre pas pour les masquer.

Voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function show(id)
			{
				if(undefined!= elm)
					{
					/* How to check if elm is undefined or not */
                                        /* Reset de toute les Class "newsbox" contenus dans id "news" a display ='none' */
			                document.getElementsByClassName('newsbox','news').style.display ='none';
 
					}
				var elm=document.getElementById(id);
				elm.style.display = "inline-block";
			}

Merci pour votre aide


Kosen

[Bovino]

Code :

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

document.getElementsByClassName('newsbox','news')

Cette syntaxe n'existe pas...

Code :

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

document.getElementById('news').getElementsByClassName('newsbox');

Code :

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

document.getElementsByClassName('newsbox','news').style.display ='none';

getElementsByClassName(), comme le s de elements l'indique, renvoie une collection. C'est quoi la propriété style d'une collection ?
Il faut faire une boucle sur les éléments pour leur affecter le style individuellement.

[SpaceFrog]

et encore ...getElementsByClassName ne fonctionne que sur les navigateurs récents.

[KosenHitatchi]

Merci pour vos reponsses.

Je teste ces nouveaux éléments tout de suite. ^^

et encore ...getElementsByClassName ne fonctionne que sur les navigateurs récents.

A l'exeption d'IE, toute les navigateur l'on implémenté depuis biens trois-quatre versions.
caniuse.com

[KosenHitatchi]

Ok a l'instar d'utiliser:

Code :

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

document.getElementsByClassName('newsbox','news')

Et t'il possible d'utiliser:

Code :

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

document.getElementById('news').getElementsByClassName('newsbox').style.display ='none';

@Bonivio
Tu me parlais d'une boucle, comment la construit tu pour juste modifier les class='newsbox', dans l'id='news'.

Merci

[SpaceFrog]

non getElementsByName retourne une collection
la collection n'a pas de propriété style
Et la propriété style n'est pas distribuée aux éléments de la collection.

il faut donc boucler sure les elements de la collection pour appliquer individuellement le style.

Sinon regarde du coté de JQuery qui à lui intégré la distributivité a chacun des elements de la collection retournée par les selecteurs

Code :

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

$('#news .newsbox').css({"display":"none"});

[KosenHitatchi]

J'ai pas particulierement le desir d'utiliser une librairie pour ce probleme.

Ton code de sur planet-languages me plait bien.

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
function changeOnglet(Num)
{
for (i=1; i<7; i++)
  {
   if(i!=Num){   			
   				 document.getElementById('Ong'+i).style.display='none';
   				 document.getElementById('Lang'+i).className='OnBack';
 
               }
   else       {             
				 document.getElementById('Ong'+i).style.display='block';
				 document.getElementById('Lang'+i).className='OnFront';
				 }               
   }
}

Par contre, a la place de renseigner le nombre de DIV y a t'il une possibilitée, de trouver leur nombre automatiquement, un truc du genre :

Code :

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

lenght(document.getElementById('news').getElementsByClassName('newsbox'))

Merci

[SpaceFrog]

Code :

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

document.getElementById('news').getElementsByClassName('newsbox').length

[KosenHitatchi]

Enfin une derniere question.

Quelle est le commande pour recuperer une classe particuliere dans cette colection.

Par exemple comment faire pour recuperer la seconde class='newsbox' dans id='news'.

Est-ce :

Code :

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

document.getElementById('news').getElementsByClassName('newsbox').2

Merci

[SpaceFrog]

Code :

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

document.getElementById('news').getElementsByClassName('newsbox')[1]

une collection en js commence à l'indexe 0
le second element à pour indice 1

[KosenHitatchi]

Ok merci.
Je vais tester tout ça et je vous tient au jus. ^^

[KosenHitatchi]

Une petite autre question.

Quelle est la commande pour récupérer la position d'une DIV (class='newsbox' id='sport') dans la collection

Code :

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

document.getElementById('news').getElementsByClassName('newsbox')

Par exemple DIV (class='newsbox' id='sport') dois me retourner 2 (sport= troisieme position dans ma liste). ^^

Je sais je dire le bousin par les cheveux, mais bon

Merci

[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
18
19
20
 
<script type="text/javascript">
function getIndex(objid, objclass){
tabobj=document.getElementsByClassName(objclass);
var i=-1;
while(tabobj[++i]){
if(tabobj[i].id===objid){return i;}
}
}
</script>
</head>
 
<body onload="alert(getIndex('foo3','bar'))">
<input id="foo1" class="bar" />
<input id="foo2" class="bar" />
<input id="foo3" class="bar" />
<input id="foo4" class="bar" />
<input id="foo5" class="bar" />
<input id="foo6" class="bar" />
</body>

[KosenHitatchi]

Merci tout fonctionne.
Je passe en résolut.