Afficher/cacher du texte entre deux balises
Hors ligneZingwai Le 30/08/2007 à 17:43 Profil de Zingwai Configuration de Zingwai

Bonjour.

Je suis en train de créer mon BBcode lorsque j'arrive à la balise "secret".
Cette balise a pour but de cacher le texte se trouvant à l'intérieur de celles-ci.

C'est à dire que lorsqu'on charge la page le texte entre ces deux balises devrait être caché.

En cliquant sur la zone cachée le texte devrait apparaître et en recliquant dessus disparaitre...

Seulement, avec mes codes le texte par défaut s'affiche et lorsqu'on clique dessus le texte disparait et impossible de le faire réapparaitre (sauf en réactualisant la page).

Je vous présente mes codes et dites moi si j'ai fait des erreurs :

Ma regex
$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" onclick="switch_spoiler(this)">$1</div></div>', $texte); 

Ma fonction Javascript
function switch_spoiler(element)
{
     if(element.style.visibility == 'visible')
     {
          element.style.visibility = 'hidden';
     }
     else
     {
          element.style.visibility = 'visible';
     }
}


Ma mise en forme (peu probable que ça vienne de là car la mise en forme est correcte !
.bbcode_secret {font-weight: bold; display: block; margin: auto; width: 90%;}
.bbcode_divsecret
{border: 1px dashed #444; background-color: #FFF; padding: 8px; margin: auto; overflow: auto; width: 90%;}
.bbcode_texte
{width: 100%; height: 100%; }


Merci.
Hors ligneAnthony Le 31/08/2007 à 18:12 Profil de Anthony Configuration de Anthony

Admin
Salut,

dans ta CSS mets un display:none; par défaut pour ton bloc, ensuite en javascript tu remplaces le "style.visibility" par "style.display" à voir si c'est "none" ou "block" et tu affiches en fonction de ça ;)
--

Hors ligneZingwai Le 03/09/2007 à 10:07 Profil de Zingwai Configuration de Zingwai

J'ai fait quelques modifications comme tu m'as dit mais il n'y a pas d'amélioration.


Ma regex

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" onclick="switch_spoiler(this)">$1</div></div>', $texte); 

Ma fonction Javascript

function switch_spoiler(element)
{
     if(element.style.display == 'visible')
     {
          element.style.display = 'hidden';
     }
     else
     {
          element.style.display = 'visible';
     }
}


Ma mise en forme

.bbcode_secret {font-weight: bold; display: block; margin: auto; width: 90%;}
.bbcode_divsecret
{border: 1px dashed #444; background-color: #FFF; padding: 8px; margin: auto; overflow: auto; width: 90%; display: block;}
.bbcode_texte
{width: 100%; height: 100%; display: none; }


Le problème est que le texte n'apparait pas même avec display.style.visibility ou display :(
Merci.
Hors ligneAnthony Le 03/09/2007 à 11:14 Profil de Anthony Configuration de Anthony

Admin
Remplace ta fonction javascript par ça :

function switch_spoiler(element)
{
     if(element.style.display == 'block' || element.style.display == '')
     {
          element.style.display = 'none';
     }
     else
     {
          element.style.display = 'block';
     }
}
--

Hors ligneZingwai Le 03/09/2007 à 12:03 Profil de Zingwai Configuration de Zingwai

Pareil.

C'est l'affichage du texte qui ne fonctionne pas mais comme je suis nul en javascript je ne sais pas comment régler :(
Hors ligneAnthony Le 03/09/2007 à 12:20 Profil de Anthony Configuration de Anthony

Admin
Alors essaie ceci :

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" id="'.($var = md5(microtime())).'" onclick="switch_spoiler('.$var.')">$1</div></div>', $texte);


function switch_spoiler(id)
{
     var element = document.getElementById(id);
     if(element.style.display == 'block' || element.style.display == '')
     {
          element.style.display = 'none';
     }
     else
     {
          element.style.display = 'block';
     }
}
--

Hors ligneZingwai Le 03/09/2007 à 13:15 Profil de Zingwai Configuration de Zingwai

Le texte n'apparait toujours pas :s
Hors ligneAnthony Le 03/09/2007 à 13:22 Profil de Anthony Configuration de Anthony

Admin
Quand tu affiches la source de la page générée, tu peux copier le code xhtml comprenant ton bloc secret ici stp ?
--

Hors ligneZingwai Le 03/09/2007 à 13:31 Profil de Zingwai Configuration de Zingwai

<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" id="c0730337a346b1749a7191644da432f7" onclick="switch_spoiler(c0730337a346b1749a7191644da432f7)">Texte d'exemple entouré de balises du BBcode d'Aweh</div></div>
Hors ligneAnthony Le 03/09/2007 à 14:41 Profil de Anthony Configuration de Anthony

Admin
Arf oui ok j'avais oublié deux apostrophes :

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" id="'.($var = md5(microtime())).'" onclick="switch_spoiler(\''.$var.'\')">$1</div></div>', $texte);
--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels