begin process at 2012 05 28 23:32:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Afficher / cacher plusieurs div en même temps à différents endroits.

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

Afficher / cacher plusieurs div en même temps à différents endroits.

jeudi 26 août 2010 à 20:14:44 | Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
Bonjour,
je me suis renseigné sur le forum sans trouvé une réponse corrigeant mon problème. N'étant qu'un débutant j'ai assez peu d'idées pour mon problème.

Voici le code pour afficher cacher que j'utilise. à noter que j'utilise ce script pour plusieurs page, donc j'utilise le OnlyOne et ToogleVisibility avec ce même code.

Code Javascript :
// Méthode pour changer la visiblité d'une balise dont l'ID est passée en paramètre
function toggleVisibility(tagId) {
if (!document.getElementById) {
msg = 'Votre navigateur est trop ancien pour ce site';
msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
return false;
}
var tagToToggle;
try { // On tente de récupérer la balise cible dont on doit changer la visibilité
tagToToggle = document.getElementById(tagId);
} catch (e) { // Si échec de la récupération de la balise cible
alert('la balise cible reste introuvée');
}
try { // Seulement pour les non IE
if (tagToToggle.style.display == 'none') {
tagToToggle.style.display = 'inline';
} else {
tagToToggle.style.display = 'none';
}
} catch (e) {
}
// Pour IE
if (tagToToggle.style.visibility == 'hidden') {
tagToToggle.style.visibility = 'visible';
} else {
tagToToggle.style.visibility = 'hidden';
}
}

var onlyOne = (function(){
  var precedentId = null;
  return function(tagId) {
    if(precedentId != null){
      toggleVisibility(precedentId); // dans le cas où il y avait un précédent élément qui a été affiché, on ne l'affiche plus
    }
    if(precedentId != tagId){
      toggleVisibility(tagId); //on affiche le nouvel élément
      precedentId = tagId;
    }else{
      precedentId = null; //il s'agit du méme élément qui est sélectionné, on considére donc qu'il n'y a plus d'élément affiché
    }
  };
})();


Le code avec lequel on clique sur le chapitre souhaité pour afficher le div.
Code Javascript :
Chapitres : 
<a href="javascript:onlyOne('1')">1 </a>
<a href="javascript:onlyOne('2')">2 </a>
<a href="javascript:onlyOne('3')">3 </a>
<a href="javascript:onlyOne('4')">4 </a>
<a href="javascript:onlyOne('5')">5 </a>
<a href="javascript:onlyOne('6')">6 </a>
<a href="javascript:onlyOne('7')">7 </a>
<a href="javascript:onlyOne('8')">8 </a>
<a href="javascript:onlyOne('9')">9 </a>



Le code qui cache et affiche à la demande.
Code Javascript :
<div id="1" style="visibility: hidden; display: none;">texte</div>
<div id="2" style="visibility: hidden; display: none;">texte</div>
<div id="3" style="visibility: hidden; display: none;">texte</div>
<div id="4" style="visibility: hidden; display: none;">texte</div>
<div id="5" style="visibility: hidden; display: none;">texte</div>
<div id="6" style="visibility: hidden; display: none;">texte</div>
<div id="7" style="visibility: hidden; display: none;">texte</div>
<div id="8" style="visibility: hidden; display: none;">texte</div>
<div id="9" style="visibility: hidden; display: none;">texte</div>


voila mon problème : je souhaite que quand je clique sur la selection du chapitre 2 :
Code Javascript :
<a href="javascript:onlyOne('2')">2 </a>


je puisse afficher plusieurs div avec ça. soit :

Code Javascript :
<div id="2" style="visibility: hidden; display: none;">Chapitre 2</div>
<div id="2" style="visibility: hidden; display: none;">texte contenu</div>
<div id="2" style="visibility: hidden; display: none;">texte C</div>


A noter que les textes "Chaptre 2", Texte contenu" et "Texte C" sont séparés par d'autres textes.
Je souhaite que lorsque je clique sur "2", plusieurs textes placés à plusieurs endroits s'affichent. Donc que plusieurs div ayant la même id, s'affichent quand on demande d'afficher l'id 2 pour l'exemple d'ici.
Cependant. Je souhaite en même temps que si je clique sur "3", tout les div ayant l'id 2 se ferment et laissent places aux id 3 et ainsi de suite.
j'ai essayé de mettre plusieurs

Code Java :
<div id="2" style="visibility: hidden; display: none;"></div>


mais à chauque fois, il n'y à que le premier qui s'ouvre.
Si je ne met pas le code en onlyOne, et que je clique sur le 3, le 3 s'affiche mais le 2 reste. donc je suis obligé d'utiliser OnlyOne.

J'espère que vous pourrez m'aider. Merci d'avance.
jeudi 26 août 2010 à 20:17:13 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
Mince, j'ai posté au mauvais endroit.
vendredi 27 août 2010 à 10:59:29 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

PetoleTeam

Membre Club
Bonjour,
Donc que plusieurs div ayant la même id,...
Mauvaise ID, une ID doit être UNIQUE
...mais à chauque fois, il n'y à que le premier qui s'ouvre. ...
...donc c'est normal

Il te faut revoir ta stratégie en incluant des SPANs, par exemple, dans une DIV.

petit exemple rapide du principe
Code HTML :
<html>
<head>
<script type="text/javascript">
function SwapDisplay( id_){
  //-- Recup Objet contenant
  var Obj = document.getElementById( id_);
  if( Obj){
    //-- Recup NodeList des SPAN
    var T_Span = Obj.getElementsByTagName('SPAN');
    //-- Pour tous les SPAN
    for( var i =0, nb = T_Span.length; i < nb; i++){
      //-- Si visible on cache sinon on montre
      if( T_Span[i].style.display == "inline")
        T_Span[i].style.display = "none";
      else
        T_Span[i].style.display = "inline";
    }
  }
}
</script>
<style type="text/css">
#D_MAIN span {
  display : none;
  color : red;
}
</style>
</head>
<body>
<div id = "D_MAIN">
  <h1 onclick="SwapDisplay( 'D_MAIN');">Chapitre</h1>
  <p>du texte ici <span>Texte 1</span></p>
  <p>encore du texte <span>Texte 2</span></p>
  <p>toujours du texte <span>Texte 3</span></p>
</div>
</body>
</html>

cliques sur Chapitre pour voir...
;O)
vendredi 27 août 2010 à 13:56:26 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
Bonjour,

Merci de ta réponse.

En effet c'est quelque chose comme ça que j'essaie de faire.
Cependant, je ne craint qu'avec ce système de span, je ne puisse afficher que un seul chapitre.
Par exemple : j'ai chapitre 1 et chapitre 2 comportant des textes différents qu'il faut afficher. Cependant, si le chapitre 1 est affiché, alors le 2 est caché et inversement (et ce pour une dizaine de chapitres. Un s'affiche, les autres se caches.).

Je me suis aussi aperçu qu'il y avait un problème, dans le sens où je ne souhaite pas qu'on puisse fermer le texte affiché en re-cliquant sur chapitre 1 (si le texte 1 était affiché) mais que seulement en cliquant sur un autre chapitre, celui ci remplace le contenu du texte par le sien et on peu ré-afficher alors le chapitre 1 en cliquant dessus.

Voilà, j'espère m'être fait comprendre :)
vendredi 27 août 2010 à 14:42:55 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

PetoleTeam

Membre Club
...Je me suis aussi aperçu qu'il y avait un problème, ...
je t'ai proposé une approche qui effectivement ne répond pas complètement à ton soucis

...Cependant, je ne craint qu'avec ce système de span, je ne puisse afficher que un seul chapitre....
Non tu fais ce que tu veux à condition de tout effacer dans un premier temps et de n'afficher que celui qui t'intéresse ensuite, et ce à l'intérieur d'une même DIV conteneur.

Reprenons l'exemple en modifiant pour mieux coller à ton soucis

d'abord le HTML pur avc un peu de style pour la vue
Code HTML :
<html>
<head>
<style type="text/css">
#chapitre_1 span { display : none; color : red;}
#chapitre_2 span { display : none; color : blue;}
#chapitre_3 span { display : none; color : green;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id = "chapitre_1">
  <h2 onclick="Montre( 1);">Chapitre 1</h2>
  <p>du texte ici <span>Texte 1</span></p>
  <p>encore du texte <span>Texte 2</span></p>
  <p>toujours du texte <span>Texte 3</span></p>
</div>
<div id = "chapitre_2">
  <h2 onclick="Montre( 2);">Chapitre 2</h2>
  <p>du texte ici <span>Texte 1</span></p>
  <p>encore du texte <span>Texte 2</span></p>
  <p>toujours du texte <span>Texte 3</span></p>
</div>
<div id = "chapitre_3">
  <h2 onclick="Montre( 3);">Chapitre 3</h2>
  <p>du texte ici <span>Texte 1</span></p>
  <p>encore du texte <span>Texte 2</span></p>
  <p>toujours du texte <span>Texte 3</span></p>
</div>
</body>
</html>

Tu noteras que les DIV s'appellent chapitre_1, chapitre_2 etc... pour optimisation du code.

La fonction de visualisation Voir( num_) reste à définir comme suit
Code Javascript :
//--------------------
function Montre( num_){
  //-- On cache tout, c'est optimisable !!
  Display( 'chapitre_1', false);
  Display( 'chapitre_2', false);
  Display( 'chapitre_3', false);
 
  //-- On montre le bon
  Display( 'chapitre_'+ num_, true);
}

maintenant c'est la fonction Display (id_, etat_) qui reste à définir, elle peut ressembler à ce qui suis, qui est proche de celle présentée plus haut...
Code Javascript :
//---------------------------
function Display( id_, etat_){
  //-- Recup Objet contenant
  var Obj = document.getElementById( id_);
  if( Obj){
    //-- Recup NodeList des SPAN
    var T_Span = Obj.getElementsByTagName('SPAN');
    //-- Pour tous les SPAN
    for( var i =0, nb = T_Span.length; i < nb; i++){
      //-- Si etat_ false on cache sinon on montre
      if( !etat_)
        T_Span[i].style.display = "none";
      else
        T_Span[i].style.display = "inline";
    }
  }
}


Voila en regroupant le tout tu auras un aperçu plus précis, sachant que tu peux remplacer les SPANs par des DIVs, mais que des DIVs avec un style.display en inline c'est des SPANs ou pas loin.

La tu as le principe de ce que tu peux faire sans trop de code...
;O)
vendredi 27 août 2010 à 14:46:45 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

PetoleTeam

Membre Club
BUG
...ce n'est pas La fonction de visualisation Voir( num_), mais La fonction de visualisation Montre( num_) qu'il faut lire...
;O)
vendredi 27 août 2010 à 16:51:11 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
En effet cela permet d'afficher plusieurs textes placés à différents endroits, mais en fait la sélection de chapitre est placée en haut de la page ce qui fait que je ne peux pas utiliser les div.

Pour mieux me faire comprendre voici à quoi ressemble le code de la page. Dans ce code j'ai pris que la sélection 1 pour exemple avec le code qui nécessite des span.

Code PHP :
<div id="wrapper">
<div id="content-container">
<div id="content">
<div class="c-top">
<div class="game-logos" style="padding-top: 43px;">

<!--selection chapitres DEBUT-->
<div style="text-align: center; ">
Chapitres : 
<div id = "chapitre_1">
  <a onclick="Montre( 1);">1 </a>|</div>
<a href="javascript:toggleVisibility('1')">2 </a>|
<a href="javascript:toggleVisibility('1')">3 </a>|
<a href="javascript:toggleVisibility('1')">4 </a>|
<a href="javascript:toggleVisibility('1')">5 </a>
</div>
<!--selection chapitres FIN-->


</div>
<div style="margin-left: 90px; padding-top: 88px;"><h3>Histoires</h3> </div>
</div>

<div class="l">
<div class="r">
<div class="m">
<div class="frontpage">
<div class="information">
<div class="bb" style="width: 899px; margin-left: 8px; position: relative;">
<div class="bb-top-l"></div>
<div class="bb-top-m" style="width: 879px;"></div>
<div class="bb-top-r"></div>
<div class="bb-mid" style="width: 899px;">

<div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">


<div style="text-align: right">Saison 1</div>

<!-- début chapitre 1 -->

Chapitre <span>Texte 1 a afficher ici</span>

</div>
		
<div class="separator"><hr/></div>
		
	<div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">

<span>
<p>
texte 2 à afficher ici
</p>
</span>
		
<h4>Fin chapitre 1</h4>
	</div></div>
<!-- Fin chapitre 1 -->


Avec les href, je pouvais relier n'importe où dans la page, mais là je dois étendre les div des sélections ce qui n'est pas possible car la sélection 1 engloberait alors la 2 qui engloberait la 3 et ainsi de suite.
Voici un exemple de ce à quoi ça ressemble.



Code :
Chaptire : 1 | 2 | 3 | 4

------------------
texte 1 chapitre 1
--------
séparaeur
-------
texte 2 chapitre 1
-------
-------------------


------------------
texte 1 chapitre 2
--------
séparateur
-------
texte 2 chapitre 2
-------
-------------------


------------------
texte 1 chapitre 3
--------
séparateur
-------
texte 2 chapitre 3
-------
-------------------
samedi 28 août 2010 à 16:51:59 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

PetoleTeam

Membre Club
Bonjour,
Avec les href, je pouvais relier n'importe...
je répète je t'ai montré une méthode, il faut que tu adaptes
pour les HREFs cela donne cela
Code HTML :
<!--selection chapitres DEBUT-->
<div style="text-align: center; ">
  Chapitres :
    <a href="#" onclick="Montre( 1);return(false);">1 </a>|
    <a href="#" onclick="Montre( 2);return(false);">2 </a>|
    <a href="#" onclick="Montre( 3);return(false);">3 </a>|
    <a href="#" onclick="Montre( 4);return(false);">4 </a>
  </div>
<!--selection chapitres FIN-->

et la mise en place des IDs serait du style
Code HTML :
<!-- ICI -->
<div id='chapitre_1'class="bb-mid" style="width: 899px;">
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <div style="text-align: right">Saison 1</div>
    <!-- début chapitre 1 -->
    Chapitre 1
    <span>Texte 1 a afficher ici</span>
  </div>
  <div class="separator"><hr/></div>
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <span><p>texte 2 à afficher ici</p></span>
    <h4>Fin chapitre 1</h4>
  </div>
</div>
<!-- Fin chapitre 1 -->

à toi donc d'adapter...
;O)
samedi 28 août 2010 à 23:07:26 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
Re-bonjour,

Tout d'abord, merci pour ta patience et ton aide .

Pour les href, je pensais qu'il ne marchaient plus dans ce cas là.

J'ai ajouté des morceaux de design avec les DIV dans les <span> pour que ce soit moins bordélique avec le afficher / cacher.

j'obtiens donc :

Code PHP :
<!-- début chapitre 1 -->
<div id='chapitre_1' >
<span><div class="bb-top-l"></div>
<div class="bb-top-m" style="width: 879px;"></div>
<div class="bb-top-r"></div>
 <div class="bb-mid" style="width: 899px;">
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <div style="text-align: right">Saison 1</div>
    
    Chapitre 1 : Titre du chapitre 1
  </div>
  <div class="separator"><hr/></div>
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <p>Histoire chapitre 1</p>
    <h4>Fin chapitre 1</h4>
  </div>
 </div>
 <div class="bb-bot-l"></div>
<div class="bb-bot-m" style="width: 879px;"></div>
<div class="bb-bot-r"></div>
 
 </span>
</div>
<!-- fin chapitre 1 -->

<br/>
<!-- début chapitre 2 -->
<div id='chapitre_2' style=visibility: hidden;">
<span><div class="bb-top-l"></div>
<div class="bb-top-m" style="width: 879px;"></div>
<div class="bb-top-r"></div>
 <div class="bb-mid" style="width: 899px;">
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <div style="text-align: right">Saison 1</div>
    
    Chapitre 2 :blablabal chapitre 2
  </div>
  <div class="separator"><hr/></div>
  <div style="margin: 0pt; padding-top: 1px; padding-left: 22px; padding-right: 22px;">
    <p>texte chapitre 2</p>
    <h4>Fin chapitre 2</h4>
  </div>
 </div>
 <div class="bb-bot-l"></div>
<div class="bb-bot-m" style="width: 879px;"></div>
<div class="bb-bot-r"></div>
 
 </span>
</div>
<!-- fin chapitre 1 -->




Par contre quand j'ouvre la page j'ai le chapitre 1 ouvert, ce qui est bon, mais mon problème c'est que tout les chapitres aussi son visibles.

j'ai tenté un :
Code PHP :
<div id='chapitre_2' style="visibility: hidden;">

mais le problème c'est que il y a un espace réservé au chargement de la page et ça ne s'affiche pas en cliquant sur le lien.

J'ai alors tenté
Code PHP :
<div id='chapitre_2' style="visibility: hidden; display: none;">

là il n'y a que le chapitre 1 qui s'affiche au chargement de la page sans aucun espace réservé. Cependant le lien href vers celui-ci ne l'affiche plus.

Aurais tu encore une solution ?




lundi 30 août 2010 à 14:36:45 | Re : Afficher / cacher plusieurs div en même temps à différents endroits.

charlie101097
J'ai tenté de mettre le style dans les SPAN mais ça ne marche toujours pas.

1 2

Cette discussion est classée dans : code, texte, afficher, div, tagtotoggle

Répondre à ce message

Sujets en rapport avec ce message

Afficher/cacher plusieurs div en même temps [ par charlie101097 ] Bonjour, J'ai tenté de faire un système de afficher/cacher afin d'afficher des parties d'histoires sans qu'il y ait besoin d'un temps de chargement d Afficher / cacher un div au survol d'une image [ par bradeux ] Bonjour à tous, J'ai trouvé sur ce forum un petit bout de code bien utile pour afficher / cacher des divs au survol d'une image. (http://forum.alsacr Afficher / cacher (un seul s'affiche à la fois) [ par charlie101097 ] bonjour, En théorie, c'est d'après moi la bonne partie pour poster. Après avoir épluché le forum sur mon problème, je décide de poster car je n'ai pas Centrage texte créé par JavaScript dans un div [ par smathis ] Bonjour tout le monde, Je rencontre un problème d'affichage sous notre navigateur préféré à tous, le magnifique, IE ! Pour le contexte : J'ai une pag Position d'une selection dans un div editable [ par fefefefef ] Bonjour, je cherche a obtenir la position d'une sélection d'un texte placé dans un div que l'on peut modifier à l'aide de l'attribut contentEditable. Afficher/masquer une div [ par samirlipopette ] Bonjour/bonsoir Comme le titre ne l'explique pas vraiment j'ai un soucis avec mon code... Je suis parvenu à faire une partie de ce que je voulais génial code pour afficher image onMouseOver texte, mais... [ par vanderstraten ] Bonjour, j'ai trouvé ce lien (en anglais) pour afficher une image onMouseOver du texte mais je cherche à pouvoir afficher plusieurs groupes de textes Afficher du texte en cliquant sur un lien [ par leclem ] Bonjour, je suis actuellement a la recherche d'un code javascript permettant, au click sur un lien, de faire apparaitre du texte HTML en décalant les Afficher du texte en cliquant sur un lien [ par leclem ] Bonjour, je suis actuellement a la recherche d'un code javascript permettant, au click sur un lien, de faire apparaitre du texte HTML en décalant les


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

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 : 0,686 sec (4)

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)