Sujet Précédent Sujet Suivant

Onclick : display=block et display=none d'un <div>

Résolu
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011 - 28 juil. 2006 à 09:58
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011 - 22 janv. 2007 à 14:34
Bonjour à tous!
Bientôt les vacances (je vous souhaite d'en avoir également) et une dernière petite prise de tête avant de quitter le taf ce soir... En fait j'ai quelque chose qui fonctionne mais j'aimerai l'optimiser car plus la liste va grandir plus ça va devenir chiant... alors si vous avez une idée n'hésitez pas à intervenir.

Pour résumer je travaille sur un site contenant une page "références". Dans cette page il y a des vignettes de différents clients et lorsque l'on clique sur l'une d'entre elle une balise
passe de display:
none
à display:
block
pour y laisser apparaitre des détails sur le client ainsi qu'une image plus grande du produit. Jusqu'à là rien de bien spécial, le problème c'est que je suis également obligé de lui préciser qu'au clic de cette vignette les autres
doivent passer en display:
none
afin de ne pas s'accumuler les unes en dessous des autres. Avec 2 ou 3 clients ça passe encore, mais comment lui dire la même chose plus rapidement lorsqu'il y aura 20 vignettes ?

Voici à quoi ressemble le ptit bout de javascript sur chaque vignette (pour le moment il y a seulement 2 vignettes : 'Studio8' et 'Revolucion') :

[#
revolucion
').style.display = '
block
'; document.getElementById('
studio8
').style.display = '
none
';">]

En gros si j'ai 10 vignettes à l'heure actuelle il faudrait que je remette ce bout de code :
document.getElementById('
studio8
').style.display = '
none
';
pour chacune des vignettes en changeant son ID ce qui est une bonne perte de temps...

ps: Dsl si je me suis trompé de rubrique mais je ne sais jamais où caller mes petits problèmes de JS, si vous pouvez m'en dire plus de ce côté là également ça serait cool et ça éviterait de futur boulette... ;)
A voir également:

16 réponses

Réponse 1 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
21 août 2006 à 15:54
J'ai oublié l'essentiel à mettre entre les balises SCRIPT la fonction qui cache les DIVs et qui donne une erreur si absente...

//-------------------
function Cache_DIV(){
  var Arg = arguments;
  var Obj;
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
      Obj.style.visibility = "hidden";
      //-- Ou autre méthode
      Obj.style.display = "none";
    }
  }
}

d'autre part comme tu as déclaré des style display:none dans une feuille de style mets plutôt
  Obj.style.display = " block ";

...dans la fonction


function Affiche_DIV() à la place de

  Obj.style.display = "";







I hope que cela fonctionne...



;0)
3
Réponse 2 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
28 juil. 2006 à 10:13
B

onjour...

Voir peut être du côté de AFFICHER CACHER PLUSIEURS OBJETS D'UN SEUL...



;0)
0
Réponse 3 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
28 juil. 2006 à 10:31
Héhé... merci pour le lien...
Je ne suis pas sur de réussir à adapter le script à ce que je veux en faire mais je vais essayer. En tout cas merci la rapidité de ta réponse PetoleTeam.

@+
0
Réponse 4 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
28 juil. 2006 à 10:41
B
onjour...

De rien j'ouvrais la page quand ton message devait arriver, juste un peu de C.L
tu peux aussi t'inspirer de ce qui à été échanger sur le FORUM c'est ICI rien de complexe...



;0)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
28 juil. 2006 à 11:23
Grrr...
Je dois vraiment être mauvais car je n'arrive pas à utiliser tes scripts pour le moment...
0
Réponse 6 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
28 juil. 2006 à 11:28
Voici ce que j'ai fait :


entre les balises <head> et </head>


<script language="JavaScript" type="text/JavaScript">
function Cache_ALL(){
  Cache_DIV('studio8','revolucion');
}
function Affiche_DIV(){
  var Arg = arguments;
  var Obj;
  Cache_ALL();
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
      Obj.style.visibility = "visible";
      //-- Ou autre méthode
      Obj.style.display = "";
    }
  }
}
</script>



Entre et :


[# ]

[# ]


Dans ma feuille de style :


#revolucion {
    display: none;
}
#studio8 {
    display: none;
}

Désolé, je fais mon boulet...
0
Réponse 7 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
28 juil. 2006 à 11:42
B

onjour...

SItu passes 1 en paramétre devant le nom de DIV il faut mettre le test sur le flag...




//-------------------------

function Affiche_DIV(flag_){ // flag_ est en fait arguments[0]
  var Arg = arguments; // Récup liste des arguments passée à la fonction
  var Obj;
  if( flag_==1)  // test si flag_ == 1, 1 est un nombre
    Cache_ALL(); // On execute la fonction

  for( var i =0; i< Arg.length; i++){ // On parcours la liste
    Obj = document.getElementById( Arg[i]); // Récup Objet correspondant
    if( Obj){
      Obj.style.visibility = "visible";
      //-- Ou autre méthode
      Obj.style.display = "";        




// Nota : tu peux supprimer cette ligne






    }
  }
}
SINON

il faut faire l'appel sans rien





FINSI





;0)
0
Réponse 8 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
21 août 2006 à 11:34
Arrrffff...
Je vais finir par m'arracher les cheveux..., je reviens de vacances et je n'ai toujours pas solutionné le problème.
Serait-il possible de me le reexpliquer de manière à ce que mon petit cerveau assimile le truc ?
Le mieux étant surment de me dire ce qu'il faut mettre entre les balises head et body :)))
Ouais je sais, ça serai me macher le boulot mais je viens de faire une multitudes de tests et ça ne fonctionne pas alors je commence à croire que le code ne marche pas lol...

Merki d'avance
0
Réponse 9 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
21 août 2006 à 12:17
B
onjour...

Essayes avec ce qui suit...




<HTML>
<HEAD>





<script language="JavaScript" type="text/JavaScript">



function Cache_ALL(){
  Cache_DIV('studio8','revolucion');
}
function Affiche_DIV(){
  var Arg = arguments;
  var Obj;
  Cache_ALL();
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
      Obj.style.visibility = "visible";
      //-- Ou autre méthode
      Obj.style.display = "";
    }
  }
}
</script>


</HEAD>










[#
]

[#
]






</HTML>





B
onne reprise quand même...










;0)
0
Réponse 10 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
21 août 2006 à 14:39
Hello PetoleTeam et merki encore de te pencher sur mon problème...
Jte remercie également pour le "bonne reprise" mais comme tu dois t'en douter je ne suis pas spécialement fou de joie aujourd'hui :))))

En tout cas je viens d'essayer le code que tu m'as passé mais il ne fonctionne pas. Dans la barre d'état je remarque qu'il y a une erreur dans le script lorsque je clic sur un des 2 liens. Si tu as encore la patience et le temps de te pencher sur ce problème ça serait sympa. De mon côté je ne sais aps trop comment corriger le problème...

@++
0
Réponse 11 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
21 août 2006 à 16:44
:)




Merki infiniment pour ton coup de pouce, le script fonctionne enfin...
Je valide ta réponse et je te remercie encore, c'est vraiment sympa de t'être pris la tête pour moi, c'est sur que sans la variable cache_DIV ça ne risquait pas de marcher.

Je remets le script en entier si ça peut aider quelqu'un d'autre :

entre <head> et </head>

<script language= "JavaScript" type="text/JavaScript">
function Cache_ALL(){
  Cache_DIV('exemple1','exemple2','exemple3');
}
function Affiche_DIV(){
  var Arg = arguments;
  var Obj;
  Cache_ALL();
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
Obj.style.display = "block";
    }
  }
}
function Cache_DIV(){
  var Arg = arguments;
  var Obj;
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
Obj.style.display = "none";
    }
  }
}
</script>

entre et
       

        [#
        ]
       

       

        [#
       


exemple2




Small.jpg" alt ="" border="0" />]
       





       


        [#

       

exemple3




Small.jpg" alt="" border="0" />]

       
0
Réponse 12 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
17 janv. 2007 à 15:43
C'est encore moi :)
Je rencontre un nouveau petit problème avec ce bout de code.

J'aimerai l'appliquer à des class dans le cadre d'un filtre de travaux (tous les travaux, multimedia, webdesign et print) cependant la fonction

document.getElementByClass ne semble pas exister.

Après quelques recherches sur le net j'ai pu constater qu'il y avait des alternatives de type

getElementByClassName ou encore document.getElementsByTagName("*")... Cependant, n'étant qu'un très piètre développeur je ne sais pas comment adapter l'une de ces nouvelles fonctions au code précédent. Est ce que quelq'un pourrait me donner un petit coup de main ?

Merci par avance
0
Réponse 13 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 janv. 2007 à 18:51
B
onjour...
effectivement ces fonctions ne sont pas implémentées en javascript, ce qui est bien dommage...
Plusieurs approches peuvent être faite que tu as du lire sur la toile.
La plus simple si tu recherches des mêmes balises ayant la même class alors une conjugaison de getElementsByTagName et de test sur la class peut suffire

On peut imaginer la fonction de la manière suivante...

//--------------------------------------------
function getElementsByClassName( tag_, class_){
  var i, k;
  var T_Result = new Array(); // tableau des Objets en retour
  //-- Recup le tableau d'objets correspondant au tag
  var O_Tab = document.getElementsByTagName( tag_);
  //-- Pour chacun on test la class
  for( i=0, k=0; i < O_Tab.length; i++){
    if( O_Tab[i].className == class_){
      T_Result[k++] = O_Tab[i]; // stock l'objet
    }
  }
  return( T_Result); // on retourne le tableau d'objet
}

son appel serait de la sorte...
//-----------------------------------
function Cache_ByClass( tag_, class_){
  var Obj = getElementsByClassName( tag_, class_);
  for( i=0; i < Obj.length; i++){
    Obj[i].style.display = "none";
  } 
}

avec comme commade de départ...
[# Cache les DIVs Menu]

voila en espérant avoir été clair...

Attention : la fonction est sensible à la casse, BTN différent de Btn

Nota : il me semble qu'il eut été préférable d'ouvrir un autre POST pour traiter de ce sujet...

;0)
0
Réponse 14 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
18 janv. 2007 à 11:33
Slt PetoleTeam,
merci de te pencher sur mon cas depuis Août

je viens d'essayer d'intégrer ta solution mais ça ne fonctionne toujours pas.
Où peut être que je fais mal la chose... je n'ai pas su déterminer ce que tu entendais par
tag_
par exemple...
Ca correspond à quoi ?

Sinon j'ai mis une page Test en ligne pour que l'on cerne mieux le problème...
Je veux fairer la même chose qu'ici : http://wayoforient1.free.fr/portfolio/test/test.html
mais avec des class ...

Penses tu qu'il faut que j'ouvre un nouveau post pour ce problème ?
0
Réponse 15 / 16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
18 janv. 2007 à 12:16
Exemple d'intégration...

un fichier exemple à partir du tien...

<html>
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body{
 font-family: Verdana;
 font-size: 13px;
}
.media{
 display: inline;
  background-color:#f0c0c0;
}
.webdesign{
 display: inline;
  background-color:#c0f0c0;
}
.print{
 display: inline;
 background-color:#c0c0f0;
}
</style>
<script language="JavaScript" type="text/JavaScript">
//--------------------------------------------
function getElementsByClassName( tag_, class_){
  var i, k;
  var T_Result = new Array(); // tableau des Objets en retour
  //-- Recup le tableau d'objets correspondant au tag
  var O_Tab = document.getElementsByTagName( tag_);
  //-- Pour chacun on test la class
  for( i=0, k=0; i < O_Tab.length; i++){
    if( O_Tab[i].className == class_){
      T_Result[k++] = O_Tab[i]; // stock l'objet
    }
  }
  return( T_Result); // on retourne le tableau d'objet
}
//-----------------------------------
function Cache_ByClass( tag_, class_){
  var Obj = getElementsByClassName( tag_, class_);
  for( i=0; i < Obj.length; i++){
    Obj[i].style.display = "none";
  }
}
//-----------------------------------
function Voir_ByClass( tag_, class_){
  var Obj = getElementsByClassName( tag_, class_);
  for( i=0; i < Obj.length; i++){
    Obj[i].style.display = "inline";
  }
}
</script>
</head>

Filtre :

Cache Tous les PRINTs

Voir Tous les PRINTs

<ol>
< li id ="multimedia" class= "media">MEDIA</ li >
<li id ="print_1"    class= " print ">PRINT_1</li>
<li id ="webdesign"  class= "webdesign">WEB</ li >
<li id ="print_2"    class= " print ">PRINT_2</li>
<li id ="print_3"    class="print">PRINT_3</li>
</ol>

</html>

Si tu rencontres d'autres problèmes il sera peut être intérréssant d'ouvrir un autre POST mais testes d'abord cela pour voir le fonctionnement...



;0)
0
Réponse 16 / 16
skullo Messages postés 73 Date d'inscription mardi 6 juillet 2004 Statut Membre Dernière intervention 18 septembre 2011
22 janv. 2007 à 14:34
J'allais oublier :)
Si vous voulez un aperçu de ce que ça peut donner dans le cadre de mon utilisation :
http://wayoforient1.free.fr/_temp/divers/portfolio_test/index.html

(biensur la mise en page est nulle, c'est juste un test)
Merci encore
0

Discussions similaires

Créer un input type Button avec une onClick !
hAdEsS -
bultez -

5 réponses
setAttribute onclick
sapakus -
sapakus -

2 réponses
actualiser une page php sur l'evenement onclick d'un bouton
kprime17 -
kprime17 -

4 réponses
[PHP] Onclick et Javascript
Slyders -
Slyders -

5 réponses
Agrandissement et reduction d'une div onclick
davidcian -
davidcian -

4 réponses
Rejoignez-nous