11548 sujets

JavaScript, DOM et API Web HTML5

Probleme javascript de mise en forme CSS

Voila sur ma page : http://angersbouge.com/v7/essai.php
J'ai instauré un filtre pour afficher ou masquer tel ou tel type de soirées .

J'ai donc nommé chaque div de la presentation de soirée avec l'id du type.

Exemple :
<div id="agenda_soiree1">exposition picasso</div>
<div id="agenda_soiree2">soirée en boite metro</div>
<div id="agenda_soiree1">exposition dali</div>
<div id="agenda_soiree6">concert</div>



Avec un petit javascript j'affiche donc les soirées qui m'interresse ou pas :


function display(calque)
{
document.getElementById(calque).style.display=document.getElementById(calque).style.display=="none"?"block":"none";
}


Mais le probleme c'est que un ID de div est par définition unique, donc forcement il me cache qu'un seul type de soirée et pas tous .
J'ai donc regarder si getElementByClass existait , jai vu que non !

Alors comment je peux faire ?

MERCI Smiley biggrin
Modifié par Mathis (30 Apr 2005 - 18:56)
Administrateur
Salut Mathis,

Sans vouloir te froisser, voudrais-tu bien relire les règles du forum et notamment le passage qui explique comment mettre en forme les exemples et les codes afin de les rendre plus lisibles ?

Merci d'avance et bonne chance pour ton problème Smiley smile
Tu peux faire comme dis Raphaël pour le code Smiley smile
Pis pour ton truc, tu peux modifier la fonction JS et passer un array en paramètre qui contient tous les calques que tu veux masquer.

Ta fonction deviendrais donc un truc du style

function display(calques) {
for (var i = 0; i < calques.length; ++i) {
document.getElementById(calques[i ]).style.display=document.getElementById(calques[i ]).style.display=="none"?"block":"none";
}
}

Sans les esapces dans les [ i] c'est pour empecher le BBcode du forum de faire effet, faudra enlever l'espace.
Et ensuite, tu appelles ta fonction comme ceci

window.onload = function() {
display([agenda_soiree1,agenda_soiree3,agenda_soiree5]);
};

Et ça masquera ou montrera les calques ayant ces id.
Si tu veux ne cacher/montrer qu'un seul calque, tu dois quand même mettre un tableau parceque la fonction est faite comme ça, donc display([agenda_soiree1]); par exemple, avec les crochets)
oui mais le probleme reste que je vais avoir plusieurs meme id par calque, et ca W3C il aime pas.

exemple si jai 2 soirées spectacle + 1 soirée boite
ca fera par exemple 


<div id=agenda_soiree1"></div>
<div id=agenda_soiree1"></div>
<div id=agenda_soiree2"></div>


a moins quon lon puisse faire :


<div id=agenda_soiree1[1]"></div>
<div id=agenda_soiree1[2]"></div>
<div id=agenda_soiree2[3]"></div>


Mais je ne pense pas que ca marche.. Smiley decu
Ahh, bah oui là va falloir gérer ça par class.

Donc, une fonction du style

var soiree = new Array('agenda_soiree1', 'agenda_soirée2', ...);

display(class) {
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; ++i) {
if (divs[ i].getAttribute('class').inArray(soiree)) {
divs[ i].style.display=divs[i ]).style.display=="none"?"block":"none";
}
}
}

Array.prototype.inArray = function(val) {
	for(var a2 = 0; a2 < this.length; ++a2) {
		if(this[a2] == val){
		return true;
		}
	}
	return false;
};


Wala wala. Et faudra utiliser des class au lieu des id.
Et c'est pas parceque w3c il aime pas, c'est parceque un ID c'est unique et c'est tout, et que sinon, ça fout la merde.
Olivier a écrit :
Ahh, bah oui là va falloir gérer ça par class.

Donc, une fonction du style

var soiree = new Array('agenda_soiree1', 'agenda_soirée2', ...);

display(class) {
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; ++i) {
if (divs[ i].getAttribute('class').inArray(soiree)) {
divs[ i].style.display=divs[i ]).style.display=="none"?"block":"none";
}
}
}

Array.prototype.inArray = function(val) {
	for(var a2 = 0; a2 < this.length; ++a2) {
		if(this[a2] == val){
		return true;
		}
	}
	return false;
};


Wala wala. Et faudra utiliser des class au lieu des id.
Et c'est pas parceque w3c il aime pas, c'est parceque un ID c'est unique et c'est tout, et que sinon, ça fout la merde.


d'ou la phrase mon 1er post
a écrit :
"Mais le probleme c'est que un ID de div est par définition unique, donc forcement il me cache qu'un seul type de soirée et pas tous .
J'ai donc regarder si getElementByClass existait , jai vu que non !".
Mathis a écrit :

J'ai donc regarder si getElementByClass existait , jai vu que non !".

C'est la fonction que je t'ai faite justement Smiley cligne

(je déplace dans salon JS)
Merci !!
J'ai donc essayé de comprendre ton script (je suis nul en javascript) :


var soiree = new Array('agenda_soiree1', 'agenda_soirée2', ...); 
//tableau avec la liste de mes different calque

display(class) {
var divs = document.getElementsByTagName('div'); 
//liste de tout les calque de ma page
for(var i = 0; i < divs.length; ++i) {
 // de 0 jusquau nombre de calque
if (divs[ i].getAttribute('class').inArray(soiree)) { 
//on regarde si le calque correspond a celui que je cherche dans le tableau, jai enlevé lespace
divs[ i].style.display=divs[i ]).style.display=="none"?"block":"none"; 
//on affiche ou pas, jai enlevé lespace

}
}
}

Array.prototype.inArray = function(val) { //ca jai pas compris
for(var a2 = 0; a2 < this.length; ++a2) { //ca jai pas compris
if(this  == val){ //ca jai pas compris
return true; //ca jai pas compris
} //ca jai pas compris
} //ca jai pas compris
return false; //ca jai pas compris
}; //ca jai pas compris


Smiley lol

Enfin bon jai donc testé ton script et il me met l'erreur " objet attendu"[b]

j'ai donc raccourci ton script pour faire des tests :

 function display(class) 
{
var divs = document.getElementsByTagName('div');
	for(var i = 0; i < divs.length; i++) 
	{
	alert(divs[ i]);// jai enlevé lespace

	}
}


La il me met tjs [b]"objet attendu"

Pouvez vous m'aider encore une fois ?
Merci beaucoup Smiley lol [/b][/b]
Modifié par Mathis (01 May 2005 - 19:25)
Si t'avais un exemple en ligne de ce que tu as fais, ça m'arrangerai, j'ai pas trop le temps de tester là Smiley cligne
Sujet clos
Aller à