Pseudo-lien qui fait apparaître un texte au clic

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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 Wink

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

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Scipion le Jeu 30 Juin 2011 - 9:40

Bonjour

Un lien de forum pris à titre d'exemple nous aiderait à mieux comprendre votre demande.

Cordialement

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Scipion le 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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Adam_sfp le 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
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
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Kaktus le Jeu 30 Juin 2011 - 17:38

Ou à la rigueur, pourquoi ne pas utiliser les spoilers justement ?
Code:
[spoiler=TITREDUSPOILER][/spoiler]

Et après personnaliser au niveau du CSS les spoilers, à la rigueur. Smile

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Adam_sfp le Jeu 30 Juin 2011 - 23:07

Bonsoir

Je n'est pas testé via les templates il est possible que $ se transforme en &#36 à la validation .

Essayez en remplaçant $ par jQuery

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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

<!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>


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

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Adam_sfp le 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

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
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo-lien qui fait apparaître un texte au clic

Message par Suk Lin le 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.

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum