BBCode fonction [spoil]

BBCode fonction [spoil] - PHP - Programmation

Marsh Posté le 10-11-2007 à 14:27:27    

Salut à tous,
 
J'ai un p'tit souci avec mon BBCode. Je cherche à créer une fonction spoil où, en gros, on aurait un gros bouton SPOIL qui ferait apparaitre le message caché. Mélange subtil de Javascript et de PHP donc.
 
Le problème est que ce code ne gère qu'une seule balise spoil par page... si il y a un autre bouton présent dans la page, il ne fera apparaitre que le premier message caché attribué au premier bouton spoil. J'ai beau être clair comme la Seine en plein mois de juin, je suis sûr que vous avez tout compris.
 
Vlà le code du BBCode :
 

Code :
  1. // Spoil
  3. $nb_authorspoils = substr_count($texte, "[spoil]" );
  5. for ($i=0; $i<$nb_authorspoils; $i++)
  6. {
  7. $texte = preg_replace('#\[spoil](.+?)\[/spoil]#si',
  9. '<a onclick="disp(\'calque\');" />Spoil :</a>
  10. <div id="calque0" style="display:block"></div>
  12. <div id="calque1" style="display:none">$1</div><br />',
  14. $texte);
  15. }


 
Et le code JS :

Code :
  1. <script LANGUAGE="JavaScript">function disp(calque){ var i=0; while ( document.getElementById(calque+i) != null ){  var styl =document.getElementById(calque+i).style;  styl.display=styl.display=="none"?"block":"none";  i++; } }</script>


Message édité par Brendeldas le 10-11-2007 à 14:29:25
Reply

Marsh Posté le 10-11-2007 à 14:27:27   

Reply

Marsh Posté le 10-11-2007 à 21:35:16    

Salut,
Je ne sais pas d'où tu tiens ce code, mais c'est très laid... Bon, à partir de ce machin, tu peux faire un truc du genre :

Code :
  1. <script LANGUAGE="JavaScript">
  2. function disp(id){
  3. calque = document.getElementById(id);
  4. if(calque.style.display == 'none'){
  5.  calque.style.display = 'block';
  6. }else{
  7.  calque.style.display = 'none';
  8. }
  9. }
  10. </script>
  12. <a onclick="disp('claque1')" href="#" />Spoil :</a>
  13. <div style="display:none" id="claque1">TEXT 1</div>
  15. <br/>
  17. <a onclick="disp('claque2')" href="#" />Spoil :</a>
  18. <div style="display:none" id="claque2">TEXT 2</div>

Reply

Marsh Posté le 11-11-2007 à 16:21:18    

Salut,
 
Merci pour ta réponse, mais le problème reste le même : il n'y a pas de variable dans l'attribution de la div à ouvrir. Du coup, si j'ai 5 textes cachés dans ma page, ben peu importe le lien sur lequel je clique, il ne m'affichera que le premier texte caché...
 
J'ai essayé d'incrémenter la variable $i dans le nom du calque à ouvrir, mais là il refuse de m'afficher le texte caché.
 
Donc je coince toujours...

Reply

Marsh Posté le 11-11-2007 à 17:37:20    

Ha dsl, j'avais pas compris... C'est sûrement dû au fait que tu écris "un gros bouton SPOIL qui ferait apparaitre le message caché". :D
 
Sinon, voilà une petite base :
 

<script LANGUAGE="JavaScript">
function disp(){
 divs = document.getElementsByTagName('div');
 for(n = 0; divs.length > n; n++){
  if(divs[n].className == 'claque'){
   if(divs[n].style.display == 'none'){
    divs[n].style.display = 'block';
   }else{
    divs[n].style.display = 'none';
   }
  }
 }
}
</script>
 
<a onclick="disp()" href="#" />Spoil :</a>
<div style="display:none" class="claque">TEXT 1</div>
 
<br/>
 
<a onclick="disp()" href="#" />Spoil :</a>
<div style="display:none" class="claque">TEXT 2</div>


Reply

Marsh Posté le 12-11-2007 à 23:44:40    

'Tain, j'y crois pas, ça marche... malgré le fait que tu t'évertues à remplacer calque par claque  :D  
 
Non, en fait ça marche un poil trop bien. En fait, maintenant, le fait de cliquer sur un bouton spoil (quel qu'il soit) fait s'afficher tous les messages cachés.  
 
Donc on en revient un peu au même problème : comment faire en sorte que chaque message caché soit référencé individuellement, et comment rattacher l'affichage de chacun de ces messages à un bouton en particulier ?
 
J'ai essayé d'inscrire la variable $i (où $i désigne le nombre de calques) dans le nom des calques à ouvrir, mais ça a lamentablement foiré. Du coup, je sèche...

Reply

Marsh Posté le 13-11-2007 à 22:35:04    

Tu es pourtant sur la bonne voie.
Voici une fonction qui marche selon le principe que tu décris (et qui fonctionne :D).

<script LANGUAGE="JavaScript">
function disp(id){
 calque = document.getElementById(id);
 if(calque.style.display == 'none'){
  calque.style.display = 'block';
 }else{
  calque.style.display = 'none';
 }
}
 
function grosse_claque(){
 for(n = 1; 1 ; n++){
  if(div = document.getElementById('claque'+n)){
   if(div.style.display == 'none'){
    div.style.display = 'block';
   }else{
    div.style.display = 'none';
   }
  }else{
   break;
  }
 }
}
 
</script>
 
<a href="#" onclick="grosse_claque()">Gros bouton spoil</a>
 
<br/>
 
<a onclick="disp('claque1')" href="#" />Spoil :</a>
<div style="display:none" id="claque1">TEXT 1</div>
 
<br/>
 
<a onclick="disp('claque2')" href="#" />Spoil :</a>
<div style="display:none" id="claque2">TEXT 2</div>

Reply

Marsh Posté le 14-11-2007 à 19:58:17    

Je sais pas, j'dois être particulièrement pas doué, mais je vois pas trop comment c'est censé marcher :D
 
En fait, pour claque1 et claque2, le soucis est toujours le même : quel que soit le bouton, ça ouvre toujours le même message caché.
 
Quant à la fonction grosse tarte, en fait... elle n'ouvre que les deux messages correspondants, et même problème, ce sont toujours les même...
Mais j'ai remarqué que t'avais fait des trucs bizarres avec une variable n dans le JS... j'ai pas trop osé me salir, mais ça m'a l'air d'être bien, si ce n'est que ça se limite quand même au même message.
 
Bon, y'a sûrement une erreur de ma part, mais je bloque (encore !)...

Reply

Marsh Posté le 14-11-2007 à 20:22:21    

Pour la fonction disp, elle ouvre ou cache le message comportant l'ID que tu lui passes en variable, c'est super simple et vérifie, ça fonctionne...
 
Pour la grosse fonction, elle teste l'existence de balises ayant pour ID "calqueX" (où X est un nombre). Elle s'arrête dès qu'elle n'en trouve plus. Donc, les numéros des claques doivent se suivre (1, 2, 3, 4, etc.) et surtout pas : 1, 3, 7, 12, etc.

Reply

Marsh Posté le 16-11-2007 à 23:35:17    

On est d'accord, ça n'ouvre que la fenêtre correspondant à l'id. Dans l'idée (hoho), c'est ce que je cherche à faire.
 
Mais ce que j'aimerais, c'est faire en sorte que chaque calque soit unique.
Le problème de ce code est que le nom "calque1" sera répété à chaque fois que j'utiliserai la balise spoil. Du coup, il ouvrira toujours le même message...
 
Comment faire pour rendre automatiquement chaque id unique par rapport à la suivante ?

Reply

Marsh Posté le 17-11-2007 à 01:28:29    

Je ne comprends pas très bien. De toute façon, tu ne dois jamais mettre deux ID identiques sur une même page.

Reply

Marsh Posté le 17-11-2007 à 01:28:29   

Reply

Marsh Posté le 25-11-2007 à 16:57:25    

En fait, le soucis, c'est que le <div class="calque1"> est répété à chaque nouveau spoil créé. Du coup, s'il y a plus d'un spoil sur la même page, eh bien il n'affiche que le message qui a été associé en premier avec cette div, c'est-à-dire le premier spoil de la page.
 
Mais, coup de bol, j'ai trouvé un script qui marche  :D  
 
En fait, je crois qu'il a fait un truc bizarre dans le JS, mais de ce que j'ai compris, il (le géniteur de ce script) a tout simplement supprimé le nom de la div contenant le message et mis un JS tout simple. Enfin, j'dis ça mais j'ai rien compris de ce qu'il a écrit. Tant que ça marche...
 
Voici le code salvateur :

Code :
  1. <script type='text/javascript'>function spoil(myElem)
  2. {
  3. if (myElem.nextSibling.style.display == "none" )
  4. {
  5. myElem.nextSibling.style.display = "block";
  6. }
  7. else
  8. {
  9. myElem.nextSibling.style.display = "none";
  10. }
  11. }
  12. </script>


 
Et mon BBCode :

Code :
  1. $texte = preg_replace('#\[spoil](.+?)\[/spoil]#si','<a href="javascript:void(0);" onclick="javascript:spoil(this);"><div style="background-color: red">Click here to view a spoiler.</div></a><span style="display: none; background-color: red">$1</span>',$texte);


 
Quoiqu'il en soit, un énorme merci à toi pour ton aide précieuse et bienvenue sans laquelle j'aurais lâché l'affaire (et mis un immonde arrière-plan noir avec texte en noir faisant office de spoil... artisanal...).  
 
Merci pour tout.  :)


Message édité par Brendeldas le 25-11-2007 à 16:58:18
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed