[TOUTES VERSIONS] Afficher un texte qui au clic postera un message automatiquement

Rappel du premier message :

,

pas très clair comme titre mais bon,
en fait sur les astuces quelconques proposées ici, vous avez pu remarquer
qu'il vous faut simplement cliquer sur un texte qui postera un message de remerciement sans que vous puissiez faire quoi que ce soit  .



Pour arriver à nos fins , il faudra déposer deux scripts dans les  templates afin d'éviter les conflits dans la gestion des JavaScript proposés par FDF.

je vous ennuie peut être !!!!!

Bon allez , c'est parti les ami(e)s   .
Pour activer le texte cliquable il vous faut un bouton qui déclenchera le code html dans le message .
Le bouton sera donc affiché après le bouton source de votre mode de rédaction,
comme ceci:



Pour tout autre demande, il vous faudra passer par l'entraide .

Allez j'arrête de vous saouler   .

Dans un premier temps , il faudra activer la réponse rapide .


Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Tout à la fin du template après ceci:

Code:


<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Pour la version EDGE, après ceci:

Code:


<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>


Collez ceci:

Code:


<script type="text/javascript">
$(function() {
  var message = "<div class='M14_thank'>Le message qui sera affiché</div>";
$('#M14_thank').click(function() {
$editor = $('.sceditor-container');
if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
  $('#quick_reply textarea ').val(message);
$('input[name="post"]').click();
});
});
</script>


Puis supprimez ce style dans votre feuille de style:

Code:

.sceditor-button:after{content:"\f128"}

Modifiez le texte ici:

Code:


Le message qui sera affiché


Pensez à enregistrer puis à valider en cliquant respectivement sur    puis

On passe au template posting_body :
Affichage/Templates/Poster et messages privés/posting_body
Juste après ceci:

Code:


<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>


Collez ceci:

Code:


<script type="text/javascript">
$(function(){$(function(){
$('<a class="sceditor-button" unselectable="on">
<div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/11/26/21/37/favori11.png)">Bouton merci</div></a>')
.insertAfter('a.sceditor-button-source').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('
<div id="M14_thank"title="Cliquer ici pour remercier l auteur et voir l astuce.">
<br />Réponse automatique:<br />Merci de cliquer ici pour voir le message</div>');
});        
})});
</script>




Changer le lien de l'image si besoin:

https://i.servimg.com/u/f56/11/26/21/37/favori11.png

Il vous faudra donc respecter les dimensions suivantes 16px par 16px si vous
voulez déposer votre propre image    .

Dans cette partie :

Code:


<div id="M14_thank"title="Cliquer ici pour remercier l auteur et voir l astuce.">
<br />Réponse automatique:<br />Merci de cliquer ici pour voir le message</div>


Modifier le title (l'infobulle):

Code:

Cliquer ici pour remercier l auteur et voir l astuce.

Les :

Code:

<br />

correspondent aux sauts de ligne.
Puis le texte que vous pouvez modifier à votre guise  

Code:


Réponse automatique:<br />Merci de cliquer ici pour voir le message


Pensez à enregistrer puis à valider en cliquant respectivement sur    puis

---

---

Pour celles et ceux qui auraient des soucis avec les templates, merci de placer directement les deux scripts dans la gestion des scripts:


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettre un titre explicite.
Cochez sur toutes les pages.

Déposez ceci:

Code:


$(function(){$(function(){
$('<a class="sceditor-button" unselectable="on">
<div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/11/26/21/37/favori11.png)">Bouton merci</div></a>')
.insertAfter('a.sceditor-button-source').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('
<div id="M14_thank"title="Cliquer ici pour remercier l auteur et voir l astuce.">
<br />Réponse automatique:<br />Merci de cliquer ici pour voir le message</div>');
});        
})});


$(function() {
  var message = "<div class='M14_thank'>Le message qui sera affiché</div>";
$('#M14_thank').click(function() {
$editor = $('.sceditor-container');
if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
  $('#quick_reply textarea ').val(message);
$('input[name="post"]').click();
});
});


Pensez a cliquer sur le bouton Valider

---

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
collez ceci:

Code:



/*Le bloc du message a remercier*/
div#M14_thank
{
background-color:#ffffff;
color:#222222 !important;
font-weight:bold;
padding:8px 5px 8px 10px;
width: 50%;
margin-left:auto;
margin-right:auto;
border: 5px solid #666666;
text-decoration:none !important;
cursor:pointer;
}
/*Le texte du message posté*/
div.M14_thank
{
background-color:#ffffff;
color:green !important;
padding:8px 5px 8px 10px;
width: 50%;
margin-left:auto;
margin-right:auto;
border: 5px solid green;
text-decoration:none !important;
cursor:pointer;
}




Pensez à valider les modifications en cliquant sur le bouton  

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

merci pour ce tuto 

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup pour l'astuce !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

merci beaucoup

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !