[BB Code] Balise spoiler : Voir/Cacher

[WrestleMania]

Description

Cette balise permet de cacher un texte dans un message, et pour le voir les membres doivent simplement appuyer sur un bouton. Utile pour poster une série de devinettes :p
Remerciements et support / Thanks and support

Ce Hack a été traduit en français pour vBulletin-Ressources avec l'autorisation explicite de son auteur. / This Hack was translated into French for vBulletin-Ressources with the explicit authorization of its author.
vBulletin-Ressources et son équipe offrira du support vis ? vis des hacks traduits, bien s?r, dans la mesure du possible de chacun, autant en terme de temps que de connaissances/ vBulletin-Ressources and its team will offer support for the translated hacks, of course, as far as possible for everyone, as much in term of time that knowledge.
vBulletin-Ressources remercie l'auteur du hack pour avoir fourni son autorisation. / vBulletin-Ressources thanks the author for the hack to have provided its authorization.Conception

Auteur du Hack / Author Of Hack : ElForro
Source / Link of Thread: Spoiler Tag : Show/Hide (http://www.vbulletin.org/forum/showthread.php?t=110598)
Version vBulletin Requise / Version vBulletin Required : 3.5.4
Testé / Tested: Oui
Traducteur / Translator: WrestleMania
Copyright © 2006 vBulletin-Ressources.com - Tous droits réservés / Copyright © 2006 vBulletin-Ressources.com - All Rights ReservedInstallation

Ajoutez le code suivant dans les définitions des CSS supplémentaires (AdminCP => Styles & Templates => Gestionnaire de styles => Toutes les options de style => Définitions des CSS supplémentaires)
.pre-spoiler {
border: 1px solid #B5C0A8;
margin: 0 15px 5px 15px;
background: #E3E9DB;
padding: 3px 5px 3px 5px;
font-weight: bold;
text-align: right;
color: #6A775B;
}
.spoiler {
background: #E3E9DB;
margin: 0 15px 15px 15px;
padding: 5px;
border: 1px solid #B5C0A8;
}
Ensuite ajoutez le BB Code suivant (AdminCP => Balises BB personnalisées => Ajouter une nouvelle balise BB)
- Intitulé : Spoiler
- Balise : spoiler
- Code de remplacement : <div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Voir" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>- Exemple : test
- Description : Texte caché
- Utiliser un second paramètre {option} : Non
- Image de bouton (facultatif) : Laissez vide

[Devil]

Très pratique, merci Wrestle

[Allan]

Héhé, j'aime beaucoup celui-ci, très simple, mais j'adore, merci de la trad WrestleMania ;)

PS: Lol pour la deviennette

[WrestleMania]

Merci Allan. Je sais pas si il existe une autre version mais je la trouve moyen, l'affichage n'est pas top. j'ai deja vu une version un peu mieux sur phpBB

[Allan]

Merci Allan. Je sais pas si il existe une autre version mais je la trouve moyen, l'affichage n'est pas top. j'ai deja vu une version un peu mieux sur phpBB

Oui, c'est facilement modifiable via les CSS.

[WrestleMania]

ok ca pourrait se retravailler, en plus ce n'est pas un coder vb.org qui a fait ce hack mais un membre donc ca peut se comprendre.

[Christounet]

super rigolo, je l'ai modifiée aussi ;)
tu as oublié de traduire à la fin !
this.value = 'Show';
il faut
this.value = 'Voir';


merci d'avoir traduit ce petit truc :)

[sony]

super sympa se hack et très utile, bravo byby

[0a$!s]

très bien, marche nikel ! merci

[foxys]

pas mal ...
thx pour la trad ;)

[WrestleMania]

super rigolo, je l'ai modifiée aussi ;)
tu as oublié de traduire à la fin !


merci d'avoir traduit ce petit truc :)

Je vais faire la modif', merci

[BiOMECHANiK]

Merci Wrestlemania je l'installe de suite celui là.

PS: j'adore les captures c'est un joli spoiler que tu nous a fais là ahaha

[Xiu]

Merci pour le hack, il est très util :)

PS : Ta fait une petite erreur, fin de topic :
- Image de bouton (facultatif) : Laissez vide[/quote] :p

[WrestleMania]

Merci pour le hack, il est très util :)

PS : Ta fait une petite erreur, fin de topic :
- Image de bouton (facultatif) : Laissez vide :p[/QUOTE]

je corrige :p thx

[Sofia]

Déplacé dans le forum appropié ;)

[Ombre]

Super sympa :D merci pour la trad :)

[Ombre]

J'ai modifié le code de remplacement pour que les boutons soit en FR sur les 3 phases de fonctionnement et pour remplacer le mot Spoiler qui ne veux rien dire pour un membre par une definition plus clair ;)

voici ma modif:
<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">...Message Caché. Cliquez sur le bouton "voir" pour voir le contenu caché ...</span> <input type="button" value="Voir" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Voir';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>ais je le droit ?

[lazarre]

merci, je testerai, dommage qu'il n'y es pas de bouton !:delicious:


ca me parait chaud de toucher au css, 'jy connais rien, je verrai plus tard ! merci tout de même !

[Ombre]

merci, je testerai, dommage qu'il n'y es pas de bouton !:delicious:


ca me parait chaud de toucher au css, 'jy connais rien, je verrai plus tard ! merci tout de même !slt, pour le bouton il suffit de le prendre sur un autre type de spoiler ;) en voici un et gratuit en plus :p

[Tagliatelles]

Testé et approuvé, merci !

[FreeSheeP]

ah oui super merci ;)

[Inzombie]

Merci beaucoup!

[Billyboule]

Sous firefox, impossible d'afficher le texte caché quand je clique sur voir.
Sous explorer, aucun soucis.

Y a-t-il quelque chose à rajouter pour que cela fonctionne avec firefox ?

Merci beaucoup.

[Ombre]

je viens de le tester sous firefox 2 et il fonctionne très bien :)

Tu as pas oublier de placé les class CSS dans le bon theme?

[sony]

je confirme aussi qu'il fonctionne très bien sous Firefox, il est installé sur mon forum, donc vérifie bien comme le dit Ombre

[Billyboule]

J'ai bien mis ce qu'il faut dans le CSS. Maintenant, c'est peut-être au dessus que je devais le mettre.
Dans les définitions de CSS supplémentaires, j'ai deux fenêtres. J'ai mis le code dans la 2ème fenêtre tout en bas.
Dois-je le mettre dans la 1ère fenêtre ?

[Ombre]

La deuxième convient amplement :)

[Billyboule]

Ben j'ai effacé et recopié le code dans le CSS mais rien à faire.
J'ai également essayé avec Opera et pas de problème. Il n'y a vraiment que sous firefox.

J'utilise les bons codes quand même ?
J'ai juste remplacé les mots en rouge par du français.
<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Voir" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>

.pre-spoiler {
border: 1px solid #B5C0A8;
margin: 0 15px 5px 15px;
background: #E3E9DB;
padding: 3px 5px 3px 5px;
font-weight: bold;
text-align: right;
color: #6A775B;
}
.spoiler {
background: #E3E9DB;
margin: 0 15px 15px 15px;
padding: 5px;
border: 1px solid #B5C0A8;
}

[Ombre]

La class CSS tu la mets bien sur le thème que tu utilises?

sinon je ne vois pas trop ce qui cloche sur ton forum sinon.

[Billyboule]

Oui j'ai bien mis le code .pre-spoiler et .spoiler sur mes 2 thèmes.

Vraiment bizarre que cela ne fonctionne pas sur un seul navigateur.

[Ombre]

cad sur un seul navigateur? il fonctionne donc sur un autre navigateur?

[sony]

tient bizarre je n'ai pas du mettre de CSS supplémentaire avec mon bbcode Spoiler, mais je n'avais pas vu que ce n'était pas la même

moi c'est celle-ci (http://www.vbulletin-ressources.com/forum/showthread.php?t=5989&highlight=spoiler) que j'ai installé, elle est pour vb 3.6 et marche très bien sous vB 3.7 et pas besoin de CSS, essaye chez moi pas de problème ;)

[Ombre]

Un petit rappel sur le fonctionnement des BBcodes, pas la peine d'indiqué la version de vb pour un bbcode, vu qu'un bbcode utilise un code de remplacement indépendamment des templates de vb ;)

[Billyboule]

cad sur un seul navigateur? il fonctionne donc sur un autre navigateur?

Oui Ombre, comme je le dis plus haut, il fonctionne sur IE et Opera.
C'est sur Firefox que cela pose problème.


tient bizarre je n'ai pas du mettre de CSS supplémentaire avec mon bbcode Spoiler, mais je n'avais pas vu que ce n'était pas la même

moi c'est celle-ci (http://www.vbulletin-ressources.com/forum/showthread.php?t=5989&highlight=spoiler) que j'ai installé, elle est pour vb 3.6 et marche très bien sous vB 3.7 et pas besoin de CSS, essaye chez moi pas de problème ;)

Merci Sony, je vais tester avec ce code-ci.
En fait, le code CSS sert à avoir une plus belle présentation dans les posts car sur ton lien, la présentation est assez sommaire. ;)

[sony]

Un petit rappel sur le fonctionnement des BBcodes, pas la peine d'indiqué la version de vb pour un bbcode, vu qu'un bbcode utilise un code de remplacement indépendamment des templates de vb ;)

oui je sais mais c'était façon de parler, j'ai mes bbcode depuis les vr 3.5 de vB donc je sais que de se côté pas de problème sa fonctionne toujours

je vais tester celui-ci pour voir, car c'est bizarre que personne ne parle de se problème sous Firefox ;)

[sony]

testé sous firefox et pas de problème, tout est ok, le texte s'affiche bien, tu a surement fais une erreur quelque part, ou a tu mis les CSS, c'est dans la première case qu'il faut les mettre, là ou c'est indiqué

Si vous désirez créer une classe CSS supplémentaire utilisable dans vos templates personnalisés, le texte entré ici sera inclus à la fin de la balise <style>

si tu a bien mis là tu a alors fais une erreur autre part, revérifie bien tout

[Billyboule]

J'ai essayé avec le lien que tu m'a donné mais c'est pareil.

Pour le CSS, je l'ai déplacé dans la 1ère fenêtre mais sans résultat.
C'est bien ce code-ci que tu mets dans le CSS ? Il n'y a rien à ajouter ?

.pre-spoiler {
border: 1px solid #B5C0A8;
margin: 0 15px 5px 15px;
background: #E3E9DB;
padding: 3px 5px 3px 5px;
font-weight: bold;
text-align: right;
color: #6A775B;
}
.spoiler {
background: #E3E9DB;
margin: 0 15px 15px 15px;
padding: 5px;
border: 1px solid #B5C0A8;
}

[sony]

non j'ai mis tel quel comme indiqué dans se post, je n'ai rien modifié, j'ai mis le code de remplacement à la place du mien et ajouté le CSS c'est tout et sa marche très bien, regarde ma capture, elle a été faite sous Firefox, tu dois surement avoir une erreur quelque part, tu n'a pas plusieurs thèmes ? au cas ou tu aurais mis le CSS dans un autre, car bizarre je n'ai vraiment aucun problème et ton CSS est bon, j'ai comparé avec l'original donc se n'est pas ça, donc à part une erreur dans le bbcode je ne vois rien d'autre, revérifie encore tout surtout le code de remplacement ;)

[Billyboule]

J'ai supprimé le bbcode et je l'ai recrée.
Aucun changement, il veut rien savoir avec firefox. :ranting:

Ca pourrait venir d'un hack ou autre ??

[sony]

quand même bizarre un hack, il faudrait voir si tu n'a rien d'installé qui aurait rapport avec les bbcode, bien que j'ai le hack sids Nouvelle ligne éditeur et tout marche bien, donc là je ne vois pas, essaye de désactiver les modules par crochet pour tester, sa désactive les hacks, au moins tu saura déjà si sa peut venir de ça

Options vB - Système de modules par crochets

si sa marche il te suffira ensuite de désactiver tes hacks un par un pour trouver lequel ;)

[klilich2]

bonsoir ..

oui je l'ai depuis un bon bout de temps , et fonctionne parfaitement sous firefox !!!

Sans rien changez au code de WrestleMania..
J'ai juste rajouté le bouton..!;)

@ bientôt...
j'en suis a la version vB 3.7.2

[Billyboule]

Bon, j'en perd mon latin. J'ai désactivé le système crochets mais rien à faire.
Je sens que ça doit être une bêtise mais je sais pas quoi.

[Ombre]

Le système par crochets desactive le fonctionnement des hacks (produits / modules) et non pas des BBcode il me semble?

Si tu as des axx pour que je regarde ça je peu voir si tu n as pas fait une erreur au pire :)

[sony]

oui justement il se posait la question de voir si ce n'était pas un hack qui faisait conflit, c'est pour ça que je lui ai conseillé de les désactiver pour voir ;)

[Ombre]

Non justement, car il y a pas de lien entre un hack et un BBcode, un BBcode je le rappel fonctionne avec un code de remplacement indépendant de VB ;)

[Billyboule]

Si tu as des axx

Merci Ombre mais tu veux dire quoi par ça ??

[Ombre]

un accès a ton cpanel de vb, un compte provisoire...

[Billyboule]

Ben ça peut se faire mais au plus j'y pense, au plus je me dis que j'ai pas fait d'erreur de code vu qu'il fonctionne avec explorer et opera.

[Ombre]

ça proviens peut être de ton firefox, quitte a le désinstaller et le ré installer pour voir?

[Billyboule]

Alors surtout que tout le mode s'assoit.

Ca fait donc quelques jours que je suis là-dessus, avec votre aide.
Aujourd'hui, j'ai passé la journée sur la toile à la recherche d'infos. Apparemment, firefox pose parfois problème et je n'ai jamais vu de solution.

Par un pur hasard, j'ai fait un post sur mon forum dans un sous-forum "normal". Pourquoi normal, parce qu'avant de lancer le bbcode au grand jour, j'avais fait un test dans la section réservée à l'équipe du forum(forum caché aux yeux des membres).

Hé bien, aucun soucis de spoiler dans le sous forum "normal". Tout fonctionne à merveille. Maintenant, pourquoi ça coince dans le forum caché, là j'en sais rien du tout mais le principal c'est ça fonctionne pour les membres.

Je vous dit pas le ouf de soulagement. :p

Grand merci à Ombre et Sony pour leur aide de tous les jours, génial les gars. ;)

[sony]

je ne saurais pas te dire pourquoi sa coince dans ton forum caché, car chez moi j'ai testé dans le section admin qui est cachée (logique) et pas de problème non plus :D

et en plus sa passe très bien sur mon forum test également, va comprendre ton problème

[Billyboule]

J'essaie plus de comprendre :D
Cette balise est inutile dans ma section admin, donc inutile d'encore se casser la tête.;)

[biggy]

donc inutile d'encore se casser la tête.;)

Si :D, il m'arrive la meme chose, sauf que moi j'ai testé Firefox 3.1 et IE7 et sa marche pas :(

Une solution?

[Ombre]

Bonjour,

Déjà tester et fonctionnel vérifies ton installation.

[biggy]

Non, je l'ai installé correcteent, je viens de reessayé, marce toujours pas, sa me fait pareil avec celui la http://www.vbulletin-ressources.com/forum/showthread.php?t=5989&highlight=spoiler

[Ombre]

Tu as tester sous un autre navigateur?

[biggy]

Oui, sous IE aussi

Si tu veux je peux te créer un compte admin? pour que t'essay de régler ça

[sony]

là je ne comprend pas je n'ai jamais eu de problème depuis que je l'ai installé et sa fait déjà un bout de temps, il fonctionne très bien sous IE et Firefox, tu es bien sur de ne pas avoir fait d'erreur

[biggy]

Aucune, j'ai du essayer au moin 6 fois, et ça marche pas, je clique dessus mais rien.

[Ombre]

Bonjour,

Le mieux serait que tu me donnes des axx admin sur ton foum que je regarde ça, car ce bbcode est fonctionnel.

[biggy]

C'est bon, je t'ai envoyer un MP Ombre

[karim0.0.0]

bonjour

je voulais savoir si il y'a un code à ajouter et qui me permet de choisir quoi écrire à la place de "spoiler" à chaque fois que j'utilise le bbcode, car j'aimerais poster des paroles et je voulais placer "paroles" à la place de "spoiler" mais pas pour toujours.

Merci beaucoup pour votre effort :)

[Billyboule]

Dans le code de remplacement, il te suffit de changer le mot Spoiler par le mot que tu veux (Paroles apparemment).
Je l'ai mis en rouge dans le code.

<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Voir" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>

[karim0.0.0]

merci pour m'avoir répondu,mais je voulais savoir s'il y a un code qui me permet de changer "spoiler" ou "paroles" a chaque fois que j'utilise le bbcode:

exemple: les paroles..
ou bien: ...

Merci d'avance.

[BalHack]

Salut, il faut que tu remplace Spoiler par {option}

Exemple

<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">{option}</span> <input type="button" value="Voir" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div> Comme ça, tu pourra donner un titre, de la façon que tu cite au dessus

C'est la danse des canards
llol

@+

[karim0.0.0]

Merciii ! :)