Onclick : display=block et display=none d'un <div> [Résolu]

skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 28 juil. 2006 à 09:58 - Dernière réponse : skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention
- 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... ;)
Afficher la suite 

16 réponses

Répondre au sujet
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 21 août 2006 à 15:54
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 28 juil. 2006 à 10:13
0
Utile
B

onjour...

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



;0)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 28 juil. 2006 à 10:31
0
Utile
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.

@+
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 28 juil. 2006 à 10:41
0
Utile
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 28 juil. 2006 à 11:23
0
Utile
Grrr...
Je dois vraiment être mauvais car je n'arrive pas à utiliser tes scripts pour le moment...
Commenter la réponse de skullo
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 28 juil. 2006 à 11:28
0
Utile
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...
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 28 juil. 2006 à 11:42
0
Utile
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 21 août 2006 à 11:34
0
Utile
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
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 21 août 2006 à 12:17
0
Utile
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 21 août 2006 à 14:39
0
Utile
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...

@++
Commenter la réponse de skullo
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 21 août 2006 à 16:44
0
Utile
:)




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" />]

       
Commenter la réponse de skullo
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 17 janv. 2007 à 15:43
0
Utile
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
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 janv. 2007 à 18:51
0
Utile
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 18 janv. 2007 à 11:33
0
Utile
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 ?
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 18 janv. 2007 à 12:16
0
Utile
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 22 janv. 2007 à 14:34
0
Utile
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
Commenter la réponse de skullo

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.