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! |
| [Résolu !] [Javascript] Message aléatoire sur côté | |
| Kiba
{ Membre }
Messages : 31
| Bonjour / bonsoir / bon matin / bon appétit / autre ! Moi qui m'étais lancée le défi d'apprendre sans jamais réclamer de l'aide, je suis juste en train de m'arracher les cheveux pour un truc de pacotille que je ne comprends pas U_U' Donc désolée pour le dérangement. Voici donc mon problème : J'aimerais afficher dans un bloc sur le côté gauche du forum des quotes des membres du forum, visible sur toutes les pages si possible -sinon, uniquement l'index, je serai déjà aux anges. J'ai donc fouiné tant sur internet que sur les forums d'aide et j'en ai sorti un code que voici : - Code:
-
$(function(){ var aleatexts= ["aaa","bbb","ccc"]; $(".maintitle").after('<span style="font-size:13px">'+aleatexts[Math.floor(Math.random()*aleatexts.length)]+'</span>') }); Trouvable ici. Comme c'est précisé, le texte s'afficherait sous le header (ce que je ne veux pas =o) J'ai donc tenté -naïvement puisque ça ne marche pas- de modifier en ceci : - Code:
-
$(function(){ var aleatexts= ["aaa","bbb","ccc"]; $('<div class="randommess">'+aleatexts[Math.floor(Math.random()*aleatexts.length)]+'</div>') }); - Code:
-
.randommess { left: 100px; top:150px; width: 200px; background-color: #fde6cd; position: absolute; moz-opacity:0.7; opacity: 0.7; filter:alpha(opacity=70); } Je pensais qu'en supprimant le " (".headpa").after " il se placerait où je le désire sauf que... Non. xD J'ai essayé en remplaçant le .maintitle par une autre class de mon css mais ça n'a rien donné non plus, bref, je suis un peu paumée. Je sais pas si c'est l'heure mais je pédale sévèrement dans la choucroute xD - Spoiler:
ლ(ಠ益ಠლ) FUUUUU. (oui je sais c'est pas le bon mot)
Enfin, merci beaucoup à la ou les personnes qui m'aideront à trouver une solution @_@ ! Bonne soirée / journée / autre ! |
Dernière édition par Kiba le Ven 11 Mai 2012, 17:02, édité 1 fois | |
| | | Pon&Zi
{ Membre }
Messages : 123
| Bonjour! Je n'ai pas une très grande connaissance du javascript, mais j'ai trouvé une solution à votre problème! - Code:
-
$(function(){ var aleatexts= ["aaa","bbb","ccc"]; $(".randommess").after('<span style="font-size:13px">'+aleatexts[Math.floor(Math.random()*aleatexts.length)]+'</span>') }); Ensuite, vous devrez créer une boîte flottante dans un template, un peu comme pour faire une chatbox coulissante! J'ai testé sur ma page d'accueil. Si vous voulez que cela apparaisse partout, il va falloir changer cela dans votre javascript, en haut, là où vous pouvez faire des sélections et tout le reste! J'espère avoir pu aider! | | |
| | | Kiba
{ Membre }
Messages : 31
| Merci de ta réponse Seulement... ça marche pas \o/ J'ai bien la boîte flottante mais le texte aléatoire ne s'affiche pas :O Ce serait pas le "after" qui fait tout foirer ? x_x | | |
| | | Pon&Zi
{ Membre }
Messages : 123
| Je crois qu'il va falloir que quelqu'un d'autre vienne à la rescousse car... moi j'ai bien le texte aléatoire, mais pas la boîte! Donc je ne pourrais pas dire si c'est le ".after" qui fait que ça foire de votre côté. Navrée de ne pouvoir faire plus! | | |
| | | Espeon
Administrateur
Messages : 1819
| Bonjour, Je peux effectivement faire quelque chose pour vous, je reviens en fin d'après-midi, si d'ici là personne ne vous propose de solution je tâcherais de vous aider Bonne après-midi ! | | |
| | | Espeon
Administrateur
Messages : 1819
| Alors, Dreamzz n'était pas si loin dans le sens où effectivement, il s'agissait de changer le sélecteur afin de cibler sur la classe particulière désirée (ici .randommess). Simplement, sur le tutoriel original, le .after() permet d'insérer du HTML après la div correspondante. Or ici, c'est à l'intérieur de cette div que vous souhaitez écrire, ce qui est quelque peu différent ! Du coup, la solution à votre problème serait de remplacer la fonction .after() par .html(), qui va intervenir sur le contenu HTML de votre div sélectionnée : - Code:
-
$(function(){ var aleatexts= ["aaa","bbb","ccc"]; $(".randommess").html('<span style="font-size:13px">'+aleatexts[Math.floor(Math.random()*aleatexts.length)]+'</span>') });
Passons maintenant à quelques questions d'optimisation. J'en vois deux en ce qui me concerne : - Tout d'abord, si vous n'avez qu'un seul et unique cadre où l'écriture aléatoire va s'inscrire, je vous suggère de recourir aux identifiants plutôt qu'aux class. Cela se traduit par un id="randommess" dans le HTML, et un #randommess dans le CSS et le Javascript. Maintenant, ce n'est pas non plus primordial, juste plus en adéquation avec l'utilité que vous en fait (sauf si vous souhaitez pouvoir avoir un certain nombre de boites similaires sur une même page, auquel cas votre solution est la bonne).
- Ensuite, plus important, le code peut-être synthétisé. Ici on insère un span dans la div, alors que le but est tout simplement de rajouter du texte. Au vu de l'utilité du span, je vous suggère d'insérer dans votre CSS la propriété font-size: 13px; pour la class .randommes, et de transformer votre insertion Javascript en $(".randommess").html(aleatexts[Math.floor(Math.random()*aleatexts.length)]), voire $(".randommess").text(aleatexts[Math.floor(Math.random()*aleatexts.length)]) s'il n'y a pas de HTML dans votre texte inséré
Bon ce ne sont que des conseils pour optimiser et obtenir un code propre, mais votre problème devrait donc être résolu à présent. Si vous avez un soucis particulier, ou un point que vous n'avez pas saisi, n'hésitez pas à me le dire | | |
| | | Kiba
{ Membre }
Messages : 31
| Bonjour, et merci pour votre aide ! Malheureusement... ça ne s'affiche toujours pas ;A; Au cas où je donne tout ce que j'ai fait, peut-être que j'ai mal fait quelque chose (et compris de travers éventuellement). Le CSS : - Code:
-
#randomness { left:20px; bottom: 20px; padding:4px; width:150px; background-color: #fde6cd; position:fixed; z-index:90; font-size:10px; border: 4px double #9cdea1; } Le Javascript : - Code:
-
$(function(){ var aleatexts= ["Crow Lucius : EP-0 c'est le forum où on bouffe du pâté rose","Taz N. Timberland : EP-0 c'est le forum où le mystère est grand mais les rencontres toujours intéressantes","Katty S. Hill-B. : EP-0, c'est le forum où les mots ne sont jamais suffisants ","Wrath Clayworth : EP-0 c'est aussi le forum qui te fait tes abdos de 23h jusqu'à 6h du mat u_u","Crow Lucius : Ep-0, c'est le forum où on copule comme des lapins","Katty S. Hill-B. : EP-0, c'est le forum où on a toujours faim ! °w°</br>Wrath Clayworth : Le forum où la faim est une maladie virtuellement transmissible, plutôt ! xD","Taz N. Timberland : Ep-0 c'est le forum où on arrive pas à trouver le sexe des admins</br>Wrath Clayworth : J'AI PERDU MON SEXE","Katty S. Hill-B. : EP-0, c'est le forum où est THE Mark Schneider ! owo","Kyle Carlson : EP-0, c'est le forum où il a beaucoup de gens qui vendent des tapis et on sait plus quel prendre","Crow Lucius : Ep-0, c'est le forum où Krabby est roi","Adrian Sørensen : Ep-0, c'est le forum où on rp le plus que n'importe quel autre forum et tout cela dans la bonne humeur ","Taz N. Timberland : EP-0 c'est le forum où l'ambiance, c'est de la bombe","Crow Lucius : Ep-0, c'est le forum où on broute le cassoulet sans se casser un os","Katty S. Hill-B. : EP-0, c'est le forum où le catch sexuel a été inventé et approuvé ! °w°","Crow Lucius : "Tiens. Mange tes boulettes."</br>* Wrath Clayworth va rajouter "de sable"</br>Crow Lucius : J'mauto-kick j'en peux plus</br>Crow Lucius s'est déconnecté le Mer 11 Avr - 18:31"]; $("#randomness").html(aleatexts[Math.floor(Math.random()*aleatexts.length)]) }); Et dans le template overall_header j'ai placé - Code:
-
<div id="randomness"></div> juste après le - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> | | |
| | | Espeon
Administrateur
Messages : 1819
| Hmmmm en fait, il y a des soucis dans ton Javascript. D'une part, il faut que tu fasse gaffe aux guillemets. Tu repère ton texte en le mettant entre des guillemets doubles ". Du coup, si tu utilise ce caractère dans ton texte, le code comprend de travers. Pour cela, il faut échapper les guillemets doubles... du texte, avec un antislash : - Code:
-
"Blablabla mon texte \"je cite\" est correct" De plus, pour y voir quelque chose, je te suggère d'utiliser la fonction push() qui permet de rajouter un élément au tableau. Ainsi, tu peux présenter ton code de cette façon : - Code:
-
$(function(){
var aleatexts = []; aleatexts.push("Crow Lucius : EP-0 c'est le forum où on bouffe du pâté rose"); aleatexts.push("Taz N. Timberland : EP-0 c'est le forum où le mystère est grand mais les rencontres toujours intéressantes"); aleatexts.push("Katty S. Hill-B. : EP-0, c'est le forum où les mots ne sont jamais suffisants ♥"); aleatexts.push("Wrath Clayworth : EP-0 c'est aussi le forum qui te fait tes abdos de 23h jusqu'à 6h du mat u_u"); aleatexts.push("Crow Lucius : Ep-0, c'est le forum où on copule comme des lapins"); aleatexts.push("Katty S. Hill-B. : EP-0, c'est le forum où on a toujours faim ! °w°</br>Wrath Clayworth : Le forum où la faim est une maladie virtuellement transmissible, plutôt ! xD"); aleatexts.push("Taz N. Timberland : Ep-0 c'est le forum où on arrive pas à trouver le sexe des admins</br>Wrath Clayworth : J'AI PERDU MON SEXE"); aleatexts.push("Katty S. Hill-B. : EP-0, c'est le forum où est THE Mark Schneider ! owo","Kyle Carlson : EP-0, c'est le forum où il a beaucoup de gens qui vendent des tapis et on sait plus quel prendre"); aleatexts.push("Crow Lucius : Ep-0, c'est le forum où Krabby est roi"); aleatexts.push("Adrian Sørensen : Ep-0, c'est le forum où on rp le plus que n'importe quel autre forum et tout cela dans la bonne humeur"); aleatexts.push("Taz N. Timberland : EP-0 c'est le forum où l'ambiance, c'est de la bombe"); aleatexts.push("Crow Lucius : Ep-0, c'est le forum où on broute le cassoulet sans se casser un os"); aleatexts.push("Katty S. Hill-B. : EP-0, c'est le forum où le catch sexuel a été inventé et approuvé ! °w°"); aleatexts.push("Crow Lucius : \"Tiens. Mange tes boulettes.\"</br>* Wrath Clayworth va rajouter \"de sable\"</br>Crow Lucius : J'mauto-kick j'en peux plus</br>Crow Lucius s'est déconnecté le Mer 11 Avr - 18:31");
$("#randomness").html(aleatexts[Math.floor(Math.random()*aleatexts.length)]); }); | | |
| | | Kiba
{ Membre }
Messages : 31
| Étant donné que ça ne s'affiche toujours pas, j'ai remplacé les textes par les "aaa" "bbb" etc du départ, mais le cadre est toujours vide ô_o. Je lui ai donné une hauteur (300px) et c'est toujours vide à l'intérieur. J'ai du mal à comprendre comment ça peut... ne pas marcher xD. J'y comprends plus rien :') (Ca m'apprendra à vouloir m'attaquer à plus grand que moi xD) ............ Trouvé ! C'est très bête. J'ai supprimé d'autres javascript que j'envisageais d'utiliser et le problème semblait venir de là. ô_o Bon bah je saurai que ce texte aléatoire est capricieux ! xD Aaaah je me sens ridicule de pas y avoir pensé plus tôt XD Désolée x') En tout cas merci à vous deux ! | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello ! Je vois que le problème est résolu (: Par conséquent je classe ! Merci d'avoir édité et d'avoir prévenu Si tu as d'autres questions, n'hésite pas à rouvrir un autre sujet | | |
| | | Contenu sponsorisé
| | | | | [Résolu !] [Javascript] Message aléatoire sur côté | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|