Connexion

Récupérer mon mot de passe

Derniers sujets
» [PHPBB2] Cacher les infos du profil sous l'avatar, en hover
par Milouze14 Jeu 28 Mai 2020 - 18:54

» [AWESOMEBB] Supprimer le soulignement des liens
par Milouze14 Mer 27 Mai 2020 - 18:28

» *RESOLU*[PHPBB2] Champs du profil en fonction de la couleur de groupe.
par Milouze14 Mar 26 Mai 2020 - 17:54

» [PUNBB] Codage qeel
par Milouze14 Mar 26 Mai 2020 - 17:44

» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
par croklivre Lun 25 Mai 2020 - 18:25

» [TOUTES VERSIONS] Faire clignoter les images des nouveaux messages
par croklivre Lun 25 Mai 2020 - 18:17

» [PUNBB] Couleurs des Catégories et des cellules qui ne changent pas de couleurs
par Milouze14 Lun 25 Mai 2020 - 14:47

» [BESTOF] [AWESOMEBB] Modifier le en ligne hors ligne
par Milouze14 Dim 24 Mai 2020 - 5:38

» [AWESOMEBB] Taille de la zone.
par Milouze14 Dim 24 Mai 2020 - 5:38

» [PUNBB] Agencement du profil
par Milouze14 Sam 23 Mai 2020 - 19:06

» *RESOLU*[MODERNBB] Chatbox - Enlever les deux points après le pseudo
par Milouze14 Sam 23 Mai 2020 - 17:26

» *RESOLU*[PHPBB3] Anomalies certains éléments
par Milouze14 Sam 23 Mai 2020 - 16:05

» [AWESOMEBB]Refonte du profil dans un sujet.
par Milouze14 Sam 23 Mai 2020 - 3:31

» [PHPBB2] Alignement du champ masculin/féminin
par Milouze14 Jeu 21 Mai 2020 - 20:24

» *RESOLU*[PHPBB3] Supprimer des champs de contact
par Milouze14 Jeu 21 Mai 2020 - 16:59

» [AWESOMEBB] Supprimer cette ligne
par Milouze14 Mer 20 Mai 2020 - 20:02

» [AWESOMEBB] Supprimer cette zone
par Milouze14 Mer 20 Mai 2020 - 20:01

» *RESOLU*[PHPBB3] Title en double sur un bouton éditeur
par Milouze14 Mer 20 Mai 2020 - 17:16

» [AWESOMEBB] Modifier l'icône du bouton d'accueil
par YOUGATAGA Mer 20 Mai 2020 - 13:56

» [TOUTES VERSIONS] Afficher un bouton pour remonter en haut de page
par Bigalex Mar 19 Mai 2020 - 21:06

*RESOLU*[PHPBB3] Bouton à Smileys

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

Chipster
Chipster
Milouzien

MessageChipster le Sam 11 Jan 2020 - 11:27

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    oui
  • Navigateur :
    Chrome
bonjour à tous,

j'essaye d'utiliser ce script (donné par Milouze)
https://forum.forumactif.com/t400866-bouton-smiley-dans-l-editeur-de-message-identique-a-celui-du-message-rapide

Celui-ci fonctionne bien, mais j'aimerais bien avoir un petit complément.
Je souhaiterais regrouper les smileys par thèmes avec un en-tête du nom du thème :

Comme le propose ce bouton "Formes" de Word :
- Tous les traits sont regroupés dans le thème Traits
- Tous les rectangles sont regroupés dans le thème rectangles
...

*RESOLU*[PHPBB3] Bouton à Smileys Test10

Sur les smileys, j’aimerais bien que mes thèmes soient par exemple : Nourriture, Drapeaux, Humeurs, ...

Merci de me dire si cela est possible,
Au plaisir de vous lire.


Dernière édition par Chipster le Sam 11 Jan 2020 - 16:10, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Jan 2020 - 12:04

Hello Ludovic,

alors ce script devrait fonctionner:
Remplaces l'actuel par celui-ci:
Code:
$(function(){$(function(){
//L IMAGE DU BOUTON SUR L EDITEUR
var M14_img="https://2img.net/i/fa//i/smiles/icon_biggrin.png";
//TEXTE DE L INFOBULLE
var M14_title="Smileys 2";
$('<a class="sceditor-button M14_SmilieS" unselectable="on"><div  unselectable="on"class="M14_smileys"style="background-image:url('+M14_img+')"title="'+M14_title+'">'+M14_title+'</div></a>
<div id="M14_smileys"class="sceditor-dropdown"style="display:none;">

  <span class="Nourriture"style="float:left;">Nourriture</span>
  <span class="Drapeaux">Drapeaux</span>
  <span class="Humeur"style="float:right;">Humeur</span>
 
<div id="nourriture"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div> 
  <div id="drapeaux"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>
<div id="humeur"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>
</div>').insertBefore('a.sceditor-button-bold');
$('.M14_smileys').click(function(){$('#M14_smileys').slideToggle();});
 
  $('.Nourriture').click(function(){
  $('#drapeaux,#humeur').hide();
  $('#nourriture').show();
});
    $('.Drapeaux').click(function(){
  $('#nourriture,#humeur').hide();
  $('#drapeaux').show();
});
  $('.Humeur').click(function(){
  $('#nourriture,#drapeaux').hide();
  $('#humeur').show();
});
$('.M14_editorImg').each(function(){$(this).click(function(){var smilYes=$(this).attr('src');
$('#text_editor_textarea').sceditor("instance").insert('[img]'+smilYes+'[/img]\n');
});});})});

Puis le style a remplacer:

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

Ajouter ceci:

Code:

/*CURSEUR SUR LE BOUTON*/
a.sceditor-button.M14_SmilieS{cursor:pointer;}
/*LE CONTENEUR DES SMILEYS*/
#M14_smileys.sceditor-dropdown
{
margin-top:30px;
width: 250px;
height:100px;
overflow-y: auto;
border:2px solid black;
}
/*CHAQUE IMAGE DANS LE CONTENEUR*/
img.M14_editorImg
{
max-width:16px;
max-height:16px;
float: left;
margin: 2px;
}
a.sceditor-button.M14_SmilieS.disabled div{opacity:1!important;}

Penser a cliquer sur le bouton *RESOLU*[PHPBB3] Bouton à Smileys Sans_t10

Je t'explique le fonctionnement du script:

Ce qui fera les boutons des thèmes :
Code:
 
<span class="Nourriture"style="float:left;">Nourriture</span>
  <span class="Drapeaux">Drapeaux</span>
  <span class="Humeur"style="float:right;">Humeur</span>

Afin de mieux te repérer j'ai attribué une class en relation avec chaque thème

Puis chaque div en relation avec le script qui va afficher les smileys
en relation avec celui-ci ayant un identifiant identique:

Pour celui de la nourriture celui qui restera affiché :
Code:

<div id="nourriture"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>

Celui des drapeaux qui sera masqué (display:none):
Code:
  <div id="drapeaux"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>

Celui de l'humeur qui sera masqué (display:none):
Code:
<div id="humeur"style="display:none;"> 
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://2img.net/i/fa//i/smiles/icon_cheers.png"/>
</div>

Bon, j'ai juste fait un copier coller des smileys dans tous les blocs,
à toi de travailler pasvuT .

Ensuite les scripts qui vont déclencher l'ouverture et fermeture :
Code:
 $('.Nourriture').click(function(){
  $('#drapeaux,#humeur').hide();
  $('#nourriture').show();
});
    $('.Drapeaux').click(function(){
  $('#nourriture,#humeur').hide();
  $('#drapeaux').show();
});
  $('.Humeur').click(function(){
  $('#nourriture,#drapeaux').hide();
  $('#humeur').show();
});




Bon courage mon ami et à ce soir ou demain matin.








Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Chipster
Chipster
Milouzien

MessageChipster le Sam 11 Jan 2020 - 16:10

merci beaucoup, cela fonctionne.
J'ai pas eu le temps de relire mon message qu'une proposition était déjà faite.

Mercibis

Après une courte adaptation, maintenant c'est à moi de jouer, et trier plusieurs dizaines de smileys en un minimum de catégorie lol

mille merci
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Jan 2020 - 16:13

De rien Ludovic,
bon courage pour les ajouts.


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil





Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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