CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! | | Ajout d'un code HTML dans les boutons | |
| Zuny
{ Membre }
Messages : 35
| 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 ! | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| 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à ^^' | | |
| | | Zuny
{ Membre }
Messages : 35
| 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:
...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é:
Clic
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. é//è | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| 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]"); }); }) }); | | |
| | | Zuny
{ Membre }
Messages : 35
| 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 ? :/ | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| 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. | | |
| | | Zuny
{ Membre }
Messages : 35
| 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>"); }); }) }); 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".EDITJe 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;} | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| 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 | | |
| | | Zuny
{ Membre }
Messages : 35
| 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<" | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| 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;} | | |
| | | Zuny
{ Membre }
Messages : 35
| 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. | | |
| | | Contenu sponsorisé
| | | | | Ajout d'un code HTML dans les boutons | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|