begin process at 2012 05 29 19:11:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

vendredi 28 juillet 2006 à 09:58:05 | Onclick : display=block et display=none d'un <div>

skullo
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 <div> 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 <div> 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') :

<div class="ref"><a href="#" onclick="document.getElementById(' revolucion ').style.display = ' block '; document.getElementById(' studio8 ').style.display = ' none ';"><img src="img/ref_revolucionSmall.jpg" title="Adobe : Viva la Revolucion !" alt="Adobe : Viva la Revolucion !" border="0" /></a></div>

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... ;)
vendredi 28 juillet 2006 à 10:13:25 | Re : Onclick : display=block et display=none d'un <div>

PetoleTeam

Membre Club


B onjour...

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


 ;0)
vendredi 28 juillet 2006 à 10:31:33 | Re : Onclick : display=block et display=none d'un <div>

skullo
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.

@+
vendredi 28 juillet 2006 à 10:41:24 | Re : Onclick : display=block et display=none d'un <div>

PetoleTeam

Membre Club


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)
vendredi 28 juillet 2006 à 11:23:43 | Re : Onclick : display=block et display=none d'un <div>

skullo
Grrr...
Je dois vraiment être mauvais car je n'arrive pas à utiliser tes scripts pour le moment...
vendredi 28 juillet 2006 à 11:28:13 | Re : Onclick : display=block et display=none d'un <div>

skullo
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 <body> et </body> :
<div class="ref"><a href="#" onclick="Affiche_DIV( 1, 'revolucion');"><img src="img/ref_revolucionSmall.jpg" title="Adobe : Viva la Revolucion !" alt="Adobe : Viva la Revolucion !" border="0" /></a></div>

<div class="ref"><a href="#" onclick="Affiche_DIV( 1, 'studio8');"><img src="img/ref_studio8Small.jpg" alt="Adobe : Studio 8" border="0" /></a></div>

 Dans ma feuille de style :
#revolucion {
    display: none;
}
#studio8 {
    display: none;
}

Désolé, je fais mon boulet...
vendredi 28 juillet 2006 à 11:42:58 | Re : Onclick : display=block et display=none d'un <div>

PetoleTeam

Membre Club


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
 <div class="ref"><a href="#" onclick="Affiche_DIV( 'revolucion');">
 FINSI
;0)
lundi 21 août 2006 à 11:34:44 | Re : Onclick : display=block et display=none d'un <div>

skullo
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
lundi 21 août 2006 à 12:17:10 | Re : Onclick : display=block et display=none d'un <div>

PetoleTeam

Membre Club


Bonjour...

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>
<BODY>
<div class="ref">
<a href="#" onclick="Affiche_DIV( 'revolucion');">
<img src="img/ref_revolucionSmall.jpg" alt="Adobe : Viva la Revolucion !" border="0" /></a>
</div>
<div class="ref">
<a href="#" onclick="Affiche_DIV( 'studio8');">
<img src="img/ref_studio8Small.jpg" alt="Adobe : Studio 8" border="0" /></a>
</div>
</BODY>
</HTML>

 B onne reprise quand même...

;0)
lundi 21 août 2006 à 14:39:18 | Re : Onclick : display=block et display=none d'un <div>

skullo
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...

@++

1 2

Cette discussion est classée dans : display, none, également, vignettes, block

Répondre à ce message

Sujets en rapport avec ce message

Pb Compatibilité d'un script sous FireFox [ par Kommius ] Salut à tous! Voilà, je cours à votre aide car j'ai trouvé un petit script sympa sur le site (http://www.javascriptfr.com/code.aspx?ID=22007)Le Code e test de condition problématique [ par kylling ] Salut,J'aimerais que ce script récupère la valeur 'display' d'un style css attaché à mon document.Après avoir testé si la valeur correspond à '<font f block/none de div [ par kishkaya ] voila j'ai des contenu et j'essaye de creer une fonction pour cacher ou afficher ces div en m'inspirant d'une fonction trouver sur ce site . Moi j'ai Retardement pour style.display [ par mageonyme ] salut,voilà mon pb : je voudrais que la partie "else{ }" de cette fonction ne fonctionne qu'après un certain temps genre 2 secondes (en gros c'est pôu Variables... [ par shadow1779 ] Bonjour,je suis en train de créer une gestion de produits pour mon site, ayant quelques notions (faibles ^^) en javascript je désire le faire comme su Propriété display avec IE [ par initnocsib ] Bonjour,Voici un petit script qui fonctionne nickel sous Firefox, mais pas du tout sous IE function active(n){        document.getElementByI Menu deroulant vertical, fonctions non compatibles avec internet explorer [ par maripaun2003 ] Bonjour, Je suis debutante en javascript. Pour mon site personnel j'ai crée un menu vertical deroulant avec le javascript. Voila mon probleme: quand o Emplacement du menu deroulant javascript en fonction de la taille de la fenetre ouverte [ par maripaun2003 ] Bonjour, Je suis débutante en java script. pour mon site personnel j'ai réalisé un menu déroulant(qui marche enfin:)). Le problème c'est que il se dé


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,170 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)