Sujets similaires

Sujet: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 12:20

Bonjour!
J'ai le code Javascript suivant sous la main:

Code:: $(function(){

$('body').append("<div id='M14_bloc_deroulant'>
   <ul>
   <li>
   <a href='#'><img src='http://2img.net/i/fa/i/smiles/fresse.png'/></a>
   <ul class='fallback'>
   <li class='M14_soustitre1'></li>
   <li class='M14_soustitre2'></li>
   <li class='M14_soustitre3'></li>
   <li class='M14_soustitre4'></li>
   <li class='M14_soustitre5'></li>
   <li class='M14_soustitre6'></li>
   <li class='M14_soustitre7'></li>
   </ul>
   </li>
   </ul>
   </div>");
   });


$(function(){
   $(function(){
   $('#M14_bloc_deroulant').insertAfter('.sceditor-button-source');


   })});

$(function () {
   $('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
   $('#M14_bloc_deroulant li').hover(function () {
   $('ul', this).stop().slideToggle(400);
   });
   });


$(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Izzy</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<div style="background-image:url('http://obsession27.free.fr/divers/fonds/cur9.gif');padding:30px;border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;text-align:justify;color:#C0C0C0;"><div style="background-color:#222;padding:20px;">","</div></div>");
   });
   })
   });

...Qui ne marche pas vraiment.
Le but est d'ajouter dans un menu déroulant une option permettant l'insertion automatique du code concernant le contour (ainsi que son arrondissement) et le fond de poste d'un membre. La liste aurait plusieurs option, nommée via les pseudos des membres et ceux-ci ne seraient pas obligés de C/C leur code à chaque post.
Mais j'ai réellement l'impression que les deux codes entrent en conflit (et pour cause! Quand j'enregistre le Javascript, c'est toute ma barre d'outil qui est beuggée).

Quelqu'un pourrait m'aider à arranger cela ? Ou du moins me dire comment faire siouplait ?

Merci d'avance et bonne journée !

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 12:26

Est ce que tu pourrais me donner des screenshots pour mieux comprendre ? Ou bien un lien où je pourrai essayer ? J'ai un peu de mal à comprendre là ^^'

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 13:03

Bien sûr!
Le code, comme ça, donne ça:

Code:: $(function(){

$('body').append("<div id='M14_bloc_deroulant'>
   <ul>
   <li>
   <a href='#'><img src='http://2img.net/i/fa/i/smiles/at.png'/></a>
   <ul class='fallback'>
   <li class='M14_soustitre1'></li>
   <li class='M14_soustitre2'></li>

   </ul>
   </li>
   </ul>
   </div>");
   });


$(function(){
   $(function(){
   $('#M14_bloc_deroulant').insertAfter('.sceditor-button-source');


   })});

$(function () {
   $('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
   $('#M14_bloc_deroulant li').hover(function () {
   $('ul', this).stop().slideToggle(400);
   });
   });


$(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Gras</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("[b]","[/b]");
   });
   })
   });
   $(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Italique</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("[i]","[/i]");
   });
   })
   });

...Ce qui donne, sur le forum, ceci:

Ajout d'un code HTML dans les boutons 0110

Ajout d'un code HTML dans les boutons 0210

Clic

Ajout d'un code HTML dans les boutons 0311

...Ce qui est déjà un peu beuggé, mais je ne suis pas capable de le réparer et cela ne servira à rien si je ne peux pas continuer sur ce que je compte faire.

Résultat espéré:

Ajout d'un code HTML dans les boutons 0410

Clic

Ajout d'un code HTML dans les boutons 0510

Ce qui donnerait ensuite ceci après prévisualisation:
Spoiler:

Mon soucis est que lorsque j'insère du HTML dans le code, eh bien ça ne marche plus du tout. Il n'y aurait pas un moyen de l'insérer quand même ?

EDIT

Edit ::
Oops, faute d’inattention ! Autant pour moi !

Code:: .insert("<div style=\"background-image:url('http:\//obsession27.free.fr/divers/fonds/cur9.gif');padding:30px;border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;text-align:justify;color:#C0C0C0;\"><div style=\"background-color:#222;padding:20px;\">","<\/div><\/div>");

J'avais oubliée les \ !
Bon, je voudrais quand même un coup de main pour améliorer la bouille beuggée de ce bouton. L'image flotte dans le vide. é//è

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 13:45

Quand tu dis l'image, tu parles du smiley c'est bien ça ?

J'ai pas exactement le même rendu visuellement que toi (au niveau du placement du smiley) sur mon forum test, je vais donc travailler un peu à l'aveugle.

Si tu remplaces ton code par ça, est ce que c'est mieux ?

Code:: $(function(){

$('body').append("<div id='M14_bloc_deroulant' class='sceditor-group'>
<ul>
<li>
<a href='#'><img src='http://2img.net/i/fa/i/smiles/at.png'/></a>
<ul class='fallback'>
<li class='M14_soustitre1'></li>
<li class='M14_soustitre2'></li>

</ul>
</li>
</ul>
</div>");
});

$(function(){
$(function(){
$('#M14_bloc_deroulant').appendTo('.sceditor-toolbar');

})});

$(function () {
$('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
$('#M14_bloc_deroulant li').hover(function () {
$('ul', this).stop().slideToggle(400);
});
});

$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Gras</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[b]","[/b]");
});
})
});
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Italique</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[i]","[/i]");
});
})
});

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 13:56

Aww. Je suis passée du forum test au véritable forum et effectivement y'a pas du tout le même rendu (je dirais même que c'est pire!)

J'ai donc essayée ton astuce...

...Et c'est déjà mieux ! Mais il y a quelques soucis tout de même.
Je suis en train de me creuser la tête. J'ai importée le thème du forum vers le forum test et j'ai supprimée le CSS... Pas de changement. Les templates et le Javascript ne sont pas mis en cause car ce ne sont pas des choses qui s'importent avec le thème. Que reste-il pour faire beugger tout cela ? La taille du forum ? :/

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 14:31

Je sais vraiment pas du tout :/. Ptet la taille du forum.

Tu as fait le code toi même ou bien tu l'as pris d'un tuto ? Si oui, éventuellement est ce que je peux avoir le lien s'il te plait ^^ ? Car il y a certains choix dans le JS que j'ai du mal à comprendre ^^, et cela permettrait ptet de résoudre le problème d'affichage.

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 15:26

Je n'ai pas fait le code moi-même. J'ai essayée de le régler sous tous les angles sans succès, ça oui. Mais je ne suis pas encore assez douée pour le créer.
Il vient d'une demande d'aide du forum des forums.
http://forum.forumactif.com/t352607p60-rajout-de-boutons-personnalise-avec-liste-deroulante-sur-le-nouvel-editeur

Up du code

Code:: $(function(){

$('body').append("<div id='M14_bloc_deroulant' class='sceditor-group'>
   <ul>
   <li>
<img src='http://img15.hostingpics.net/pics/255418IconeArrangement.png'/>
   <ul class='fallback'>
   <li class='M14_soustitre1'></li>
   <li class='M14_soustitre2'></li>
<li class='M14_soustitre3'></li>

   </ul>
   </li>
   </ul>
   </div>");
   });


$(function(){
   $(function(){
   $('#M14_bloc_deroulant').appendTo('.sceditor-toolbar');


   })});

$(function () {
   $('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
   $('#M14_bloc_deroulant li').hover(function () {
   $('ul', this).stop().slideToggle(400);
   });
   });


$(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="Izzy Berger">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Izzy</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<div style=\"background-image:url('http:\//obsession27.free.fr/divers/fonds/cur9.gif');padding:30px;border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;text-align:justify;color:#C0C0C0;\"><div style=\"background-color:#222;padding:20px;\">","<\/div><\/div>");
   });
   })
   });

   $(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="Shina">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Shina</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<center><DIV style=\"background-color: #6600CC; overflow: visible; height: 20px\"><span style=\"font-family: georgia; color: #ffffff; font-size: 15px; letter-spacing: -1px; text-transform: uppercase; font-weight: normal; text-shadow: #000000 0px 0px 2px;\">TITRE<\/span> <\/div><\/center>
<div style=\" border: 1.8px dotted indigo; height:17px\"><center><span style=\"font-family: georgia; color: #ffffff; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; text-shadow: #000000 0px 0px 2px;\">JOUEURS<\/span><\/div><\/center>","[center]<DIV style=\"background-color:#6600CC; overflow: visible; height: 5px\"> <\/div> [\/center]");
   });
   })
   });

   $(function(){
   $(function(){
   $('<a class="sceditor-button" unselectable="on" title="Zune De Laudreuil">
   <div unselectable="on" style="background-image:none !important"></div>
   <span>Zune</span>
   </a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre3 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<div style=\"background-image:url('http://obsession27.free.fr/divers/fonds/papi10.gif');padding:20px;border-radius:9px;-webkit-border-radius:9px;-o-border-radius:9px;text-align:justify;color:#D6D6D6;\"><div style=\"background-color:#000000;padding:20px;\">[justify]","[\/justify]</div></div>");
   });
   })
   });

Ajout d'un code HTML dans les boutons 166717Nyuuh

Il y a moyen de modifier cela via le CSS::

Code:: #M14_bloc_deroulant {
   width: 60px !important;
   height: 29px !important; }

#M14_bloc_deroulant:hover {
   width: 225px !important;
   height: 110px !important; }

J'essaye de régler mais ça gène le déroulement du menu. Surtout le facteur "hover".

EDIT

Je viens de recevoir le CSS de la part du créateur de ce code. C'est pas encore ça mais je pense pouvoir résoudre mon problème maintenant. J'éditerais si ce n'est pas le cas. Merci en tout cas. :3

Code:: #M14_bloc_deroulant {background:transparent;float:right;height:20px;margin-top:-5px;}
#M14_bloc_deroulant ul {text-align:center;}
#M14_bloc_deroulant ul li {display:inline;}

#M14_bloc_deroulant ul li a {display:block;padding:8px;}
#M14_bloc_deroulant ul li ul
{
position:absolute;
background:#FFF;
margin:10px 0;
width:80px;
padding:8px 30px 10px 10px;
border:1px solid #666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#M14_bloc_deroulant ul li ul li.M14_soustitre1 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre2 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre3 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre4 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre5 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre6 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre7
{
margin:0;
padding:0;
width:80px;
height:20px;
float:left;
text-align:left;
}

#M14_bloc_deroulant ul li ul li a {color:red;cursor:pointer;text-decoration:none !important;}
#M14_bloc_deroulant ul li ul.fallback {display:none;padding:2px;}
#M14_bloc_deroulant ul li:hover ul.fallback {display:block;}

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 16:31

Essai avec ce code JS :

Code:: $(function(){

$('body').append("<div id='M14_bloc_deroulant' class='sceditor-group'>
<img src='http://img15.hostingpics.net/pics/255418IconeArrangement.png'/>
<ul class='fallback'>
<li class='M14_soustitre1'></li>
<li class='M14_soustitre2'></li>
<li class='M14_soustitre3'></li>
</ul>
</div>");
   });




   $(function(){
   $(function(){
   $('#M14_bloc_deroulant').appendTo('.sceditor-toolbar');


})});

$(function () {
   $('#M14_bloc_deroulant ul').hide().removeClass('fallback');
   $('#M14_bloc_deroulant').hover(function () {
   $('ul', this).stop().slideToggle(400);
   });
   });




   $(function(){
   $(function(){
   $('<span>Izzy</span>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<div style=\"background-image:url('http:\//obsession27.free.fr/divers/fonds/cur9.gif');padding:30px;border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;text-align:justify;color:#C0C0C0;\"><div style=\"background-color:#222;padding:20px;\">","<\/div><\/div>");
   });
   })
   });

   $(function(){
   $(function(){
   $('<a>Shina</a>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<center><DIV style=\"background-color: #6600CC; overflow: visible; height: 20px\"><span style=\"font-family: georgia; color: #ffffff; font-size: 15px; letter-spacing: -1px; text-transform: uppercase; font-weight: normal; text-shadow: #000000 0px 0px 2px;\">TITRE<\/span> <\/div><\/center>
<div style=\" border: 1.8px dotted indigo; height:17px\"><center><span style=\"font-family: georgia; color: #ffffff; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; text-shadow: #000000 0px 0px 2px;\">JOUEURS<\/span><\/div><\/center>","[center]<DIV style=\"background-color:#6600CC; overflow: visible; height: 5px\"> <\/div> [\/center]");
   });
   })
   });

   $(function(){
   $(function(){
   $('<span>Zune</span>')
   .appendTo('#M14_bloc_deroulant li.M14_soustitre3 ').click(function()
   {
   $('#text_editor_textarea').sceditor("instance")
   .insert("<div style=\"background-image:url('http://obsession27.free.fr/divers/fonds/papi10.gif');padding:20px;border-radius:9px;-webkit-border-radius:9px;-o-border-radius:9px;text-align:justify;color:#D6D6D6;\"><div style=\"background-color:#000000;padding:20px;\">[justify]","[\/justify]</div></div>");
   });
   })
   });

Code CSS

Code:: #M14_bloc_deroulant {
width: 60px !important;
height: 29px !important;
line-height: 20px;
cursor: pointer;
}

#M14_bloc_deroulant:hover {
width: 225px !important;
height: 110px !important;
}

#M14_bloc_deroulant ul {
margin:0;
padding:0;
}

#M14_bloc_deroulant span:hover{
color: white;
}

Edit : mince, j'avais pas vu que tu avais édité xDDD

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 16:43

Oh zut !
Ecoute merci quand même de ton aide ! Tu mériterais un milion de câlin ! *O*
Bon, j'ai toujours un petit soucis, maintenant que ça s'affiche correctement:

Spoiler:

Mon soucis c'est ça. Quand je décoche "afficher sur l'index" dans le Javascript, ça me l'enlève aussi dans "poster une nouvelle réponse" ou "créer un nouveau topic" mais ça l'affiche quand même dans la fenêtre de réponse rapide. Le problème c'est que quand je laisse "afficher sur l'index"... Eh bien ça l'affiche aussi sur l'index ! >O<"

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 17:10

Au tout début de ton code tu as :

Code:: $('body').append("<div id='M14_bloc_deroulant' class='sceditor-group'>

Essaye de remplacer par ça :

Code:: $('body').append("<div id='M14_bloc_deroulant' class='sceditor-group mask'>

Ensuite tu trouves

Code:: $(function(){
$(function(){
$('#M14_bloc_deroulant').appendTo('.sceditor-toolbar');

})});

Et tu remplaces par

Code:: $(function(){
$(function(){
$('#M14_bloc_deroulant').appendTo('.sceditor-toolbar');
$('#M14_bloc_deroulant').removeClass('.mask');

})});

Ensuite dans le CSS, rajoute ça :

Code:: .mask { display: none;}

Sujet: Re: Ajout d'un code HTML dans les boutons Sam 19 Oct 2013, 17:23

EPIC WIN de ta part !
Merci mille fois ^^/
Je crois que ça à l'air bon... *Inspecte tout cela* Si d'ici demain je n'ai pas trouvé de nouveau soucis, ça voudra dire que c'est résolu.

Ajout d'un code HTML dans les boutons

Ajout d'un code HTML dans les boutons

Sujets similaires

Sujets similaires

Partenaires Or