Accueil
Créer un forumPseudo-lien qui fait apparaître un texte au clic
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Jeu 30 Juin 2011 - 1:15
Bonsoir !
Je me demandais s'il existait un script pour faire apparaître du texte au clic. Pour être un peu plus précise, je pensais à avoir du texte (quelques mots, sans plus...) cliquable ; une fois cliqué, du texte supplémentaire apparaîtrait en-dessous - mais sans être sous forme de bulle.
N'hésitez pas à me demander des explications complémentaires si ma description vous semble un peu floue
Merci d'avance, et bonne soirée !
Cordialement
Je me demandais s'il existait un script pour faire apparaître du texte au clic. Pour être un peu plus précise, je pensais à avoir du texte (quelques mots, sans plus...) cliquable ; une fois cliqué, du texte supplémentaire apparaîtrait en-dessous - mais sans être sous forme de bulle.
N'hésitez pas à me demander des explications complémentaires si ma description vous semble un peu floue
Merci d'avance, et bonne soirée !
Cordialement
Dernière édition par Suk Lin le Ven 1 Juil 2011 - 15:08, édité 5 fois
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Re: Pseudo-lien qui fait apparaître un texte au clic
par Scipion Jeu 30 Juin 2011 - 9:40
Bonjour
Un lien de forum pris à titre d'exemple nous aiderait à mieux comprendre votre demande.
Cordialement
Un lien de forum pris à titre d'exemple nous aiderait à mieux comprendre votre demande.
Cordialement
Scipion- Membre actif
-
Messages : 8655
Inscrit(e) le : 03/02/2010 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Jeu 30 Juin 2011 - 12:07
Bonjour
Je n'ai rencontré aucun forum ayant eu recours à cela, en fait l'idée m'est venue hier soir en travaillant sur le mien. Je suis désolée... Pensez-vous que cela soit tout de même possible ?
Cordialement
Je n'ai rencontré aucun forum ayant eu recours à cela, en fait l'idée m'est venue hier soir en travaillant sur le mien. Je suis désolée... Pensez-vous que cela soit tout de même possible ?
Cordialement
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Re: Pseudo-lien qui fait apparaître un texte au clic
par Scipion Jeu 30 Juin 2011 - 12:40
En effet, je pense que c'est possible. Essayez d'utiliser le tutoriel FA suivant :
Mettre la balise <acronym> en BBCode avec wow
Cordialement
Mettre la balise <acronym> en BBCode avec wow
Cordialement
Scipion- Membre actif
-
Messages : 8655
Inscrit(e) le : 03/02/2010 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Jeu 30 Juin 2011 - 14:52
Je n'avais jamais remarqué ce tutoriel ! Merci de m'avoir fait partager ce lien. Mais en réalité ce n'est pas vraiment cela que je cherche, j'ai effectué une espèce de simulation dans l'intention de mieux vous montrer.
Imaginons un texte. Ici pour l'exemple, j'ai repris une explication du Lorem ipsum tiré de Wikipédia. Au bas de ce texte, je propose 2 syntagmes (version populaire - version originale) qui se comporteraient, je suppose, comme des liens.
En admettant que le lecteur désire prendre connaissance de la version populaire, ce dernier clique sur le lien correspondant. Il voit apparaître alors le texte :
Le lecteur a le loisir de recliquer pour faire disparaître le texte populaire et revenir à l'apparence initiale. S'il veut maintenant voir la version originale, de même, il clique sur "version originale" pour faire apparaître le texte :
En fait, je viens de me rendre compte que je recherche à peu près le même effet que les spoilers, si ce n'est en autrement plus discret.
Cordialement
Imaginons un texte. Ici pour l'exemple, j'ai repris une explication du Lorem ipsum tiré de Wikipédia. Au bas de ce texte, je propose 2 syntagmes (version populaire - version originale) qui se comporteraient, je suppose, comme des liens.
En admettant que le lecteur désire prendre connaissance de la version populaire, ce dernier clique sur le lien correspondant. Il voit apparaître alors le texte :
Le lecteur a le loisir de recliquer pour faire disparaître le texte populaire et revenir à l'apparence initiale. S'il veut maintenant voir la version originale, de même, il clique sur "version originale" pour faire apparaître le texte :
En fait, je viens de me rendre compte que je recherche à peu près le même effet que les spoilers, si ce n'est en autrement plus discret.
Cordialement
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Re: Pseudo-lien qui fait apparaître un texte au clic
par Adam_sfp Jeu 30 Juin 2011 - 17:30
Bonjour
Peut être en faisant une recherche en Jquery avec l'effet "Toggle"
Par exemple Jquery toggle tutorial
En voici un par exemple
Vous pouvez peut être l'adapter à ce que vous voulez faire..
Cordialement.
Peut être en faisant une recherche en Jquery avec l'effet "Toggle"
Par exemple Jquery toggle tutorial
En voici un par exemple
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TEST Fade Slider Toggle jQuery Plogin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://sd-1.archive-host.com/membres/up/37821634957680146/toggle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script>
<style>
.fader{opacity:0;display:none;}
</style>
</head>
<body>
<a href="#" class="fadeNext">VERSION ORIGINALE</a>
<div class="fader">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
Vous pouvez peut être l'adapter à ce que vous voulez faire..
Cordialement.
Dernière édition par Adam_sfp le Jeu 30 Juin 2011 - 17:54, édité 1 fois
Adam_sfp- Membre actif
-
Messages : 4465
Inscrit(e) le : 18/04/2008 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Kaktus Jeu 30 Juin 2011 - 17:38
Ou à la rigueur, pourquoi ne pas utiliser les spoilers justement ?
Et après personnaliser au niveau du CSS les spoilers, à la rigueur.
- Code:
[spoiler=TITREDUSPOILER][/spoiler]
Et après personnaliser au niveau du CSS les spoilers, à la rigueur.
Kaktus- ***
-
Messages : 160
Inscrit(e) le : 12/12/2010 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Jeu 30 Juin 2011 - 22:03
Merci à vous deux pour vos astuces !
Adam : j'ai essayé votre exemple il y a un instant, c'est exactement cela ! Je vous remercie pour votre conseil, j'ignorais qu'il s'agissait là de l'effet Toggle. Je m'en souviendrais !
Je vous remercie tous les trois pour votre rapidité et votre efficacité.
Edit : oups !
J'avais essayé sur une page html du forum, l'effet était tip top.
Par contre, une fois que j'essaie dans un topic, ça ne fonctionne pas. J'ai mis le script entre les balises <head> du template overall_header, enregistré dans ma feuille de style la class=fader, mais le texte ne s'affiche plus au clic.
Qu'ai-je fait de travers ?
Très bonne soirée...
Cordialement
Adam : j'ai essayé votre exemple il y a un instant, c'est exactement cela ! Je vous remercie pour votre conseil, j'ignorais qu'il s'agissait là de l'effet Toggle. Je m'en souviendrais !
Je vous remercie tous les trois pour votre rapidité et votre efficacité.
Edit : oups !
J'avais essayé sur une page html du forum, l'effet était tip top.
Par contre, une fois que j'essaie dans un topic, ça ne fonctionne pas. J'ai mis le script entre les balises <head> du template overall_header, enregistré dans ma feuille de style la class=fader, mais le texte ne s'affiche plus au clic.
Qu'ai-je fait de travers ?
Très bonne soirée...
Cordialement
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Re: Pseudo-lien qui fait apparaître un texte au clic
par Adam_sfp Jeu 30 Juin 2011 - 23:07
Bonsoir
Je n'est pas testé via les templates il est possible que $ se transforme en $ à la validation .
Essayez en remplaçant $ par jQuery
Cordialement.
Je n'est pas testé via les templates il est possible que $ se transforme en $ à la validation .
Essayez en remplaçant $ par jQuery
Cordialement.
Adam_sfp- Membre actif
-
Messages : 4465
Inscrit(e) le : 18/04/2008 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Jeu 30 Juin 2011 - 23:29
Rebonsoir !
J'ai essayé mais cela ne change rien.
Je vais détailler ma répartition à partir de votre exemple, peut-être y verrons-nous plus clair :
Entre les balises <head></head> du template overall_header
Dans le CSS
Dans le message posté sur le forum
Effet obtenu : seul "VERSION ORIGINALE" apparaît. Lorsque je clique, la page se recharge mais sans changement : le Lorem ipsum n'apparaît plus.
J'en viens donc à me demander si je ne devrais pas placer ce bout de code quelque part :
Pardonnez mon ignorance, et merci pour votre aide.
Cordialement
J'ai essayé mais cela ne change rien.
Je vais détailler ma répartition à partir de votre exemple, peut-être y verrons-nous plus clair :
Entre les balises <head></head> du template overall_header
Dans le CSS
Dans le message posté sur le forum
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TEST Fade Slider Toggle jQuery Plogin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://sd-1.archive-host.com/membres/up/37821634957680146/toggle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script>
<style>
.fader{opacity:0;display:none;}
</style>
</head>
<body>
<a href="#" class="fadeNext">VERSION ORIGINALE</a>
<div class="fader">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
Effet obtenu : seul "VERSION ORIGINALE" apparaît. Lorsque je clique, la page se recharge mais sans changement : le Lorem ipsum n'apparaît plus.
J'en viens donc à me demander si je ne devrais pas placer ce bout de code quelque part :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Pardonnez mon ignorance, et merci pour votre aide.
Cordialement
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Re: Pseudo-lien qui fait apparaître un texte au clic
par Adam_sfp Ven 1 Juil 2011 - 10:00
Bonjour
Votre raisonnement est le même que le mien mais pas moyen que cela fonctionne et je ne comprend pas pourquoi...( je vais poser la question à mes collègues histoire d"éclairer ma lanterne)
Sinon un effet similaire qui lui fonctionne dans un post
le script à mettre juste avant </head> dans overall header
La partie CSS
et ensuite dans votre post
Cordialement.
Votre raisonnement est le même que le mien mais pas moyen que cela fonctionne et je ne comprend pas pourquoi...( je vais poser la question à mes collègues histoire d"éclairer ma lanterne)
Sinon un effet similaire qui lui fonctionne dans un post
le script à mettre juste avant </head> dans overall header
- Code:
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/testest.js"></script>
La partie CSS
- Code:
#div1 {
width:70%;
display: none;
padding:5px;
border:2px solid #EFEFEF;
background-color:Pink;
}
#click_here{
padding:5px;
border:2px solid #FFEFEF;
background-color:#00ff00;
}
et ensuite dans votre post
- Code:
<input type="button" id="click_here" value="Click Here">
<div id="div1">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
Cordialement.
Adam_sfp- Membre actif
-
Messages : 4465
Inscrit(e) le : 18/04/2008 -
Re: Pseudo-lien qui fait apparaître un texte au clic
par Suk Lin Ven 1 Juil 2011 - 14:15
Bonjour !
J'ai essayé cette alternative, cela fonctionne parfaitement. Merci !
Si jamais vous avez des nouvelles concernant la première solution que vous m'aviez proposée, pouvez-vous m'en faire part ? On ne sait jamais que le problème surgisse ultérieurement avec un autre script.
En attendant je mets ce post en résolu, encore merci pour votre aide !
Belle après-midi
Cordialement.
J'ai essayé cette alternative, cela fonctionne parfaitement. Merci !
Si jamais vous avez des nouvelles concernant la première solution que vous m'aviez proposée, pouvez-vous m'en faire part ? On ne sait jamais que le problème surgisse ultérieurement avec un autre script.
En attendant je mets ce post en résolu, encore merci pour votre aide !
Belle après-midi
Cordialement.
Suk Lin- *
- Messages : 46
Inscrit(e) le : 30/12/2008
Sujets similaires» Image qui fait apparaitre un texte?
» Faire apparaître une catégorie en un clic
» Comment fait on pour faire apparaitre le mot nouveau
» Faire apparaître une image sur un lien
» Affichage des statistiques personnel au clic sur un pseudo.
» Faire apparaître une catégorie en un clic
» Comment fait on pour faire apparaitre le mot nouveau
» Faire apparaître une image sur un lien
» Affichage des statistiques personnel au clic sur un pseudo.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum