le javascript classic

le javascript classic - HTML/CSS - Programmation

Marsh Posté le 20-04-2005 à 18:35:21    

Bon je vais demander quelque chose d'extrement classic pour les connaisseur de JS
voici mon script a 2 francs
 

Code :
  1. <script language="JavaScript" type="text/javascript">
  2. function emoticon(text) {
  3. text = ' ' + text + ' ';
  4. document.message.value=text;
  5. </script>
  7. <a href="javascript:emoticon(':x')"><img src="icon_biggrin.gif" border="0"></a>
  8. <textarea name="message"></textarea>


 
je voudrai que mon :x se mette dans mon textarea quand je clic sur l'emoticon image que j'affiche.
 
Merci de me montrer le droit chemin.

Reply

Marsh Posté le 20-04-2005 à 18:35:21   

Reply

Marsh Posté le 20-04-2005 à 18:39:12    

Je t'en parle d'ici une petite heure, le temps que j'arrive chez moi, mais il y a pas mal de trucs à améliorer si t'en as le courage.
 
En attendant, tu peux bouquiner le tutoriel Javascript de How To Create et l'impressionnant Quirksmode (sections Javascript et W3C DOM)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 18:41:18    

j'ai le crayon a la main, pres a prendre bonne note, je ne suis pas du genre a laisser le morceau.
Je suis en projet de cree mon propre forum, ca va se faire tranquilement mais surement.

Reply

Marsh Posté le 20-04-2005 à 18:47:42    

Badze a écrit :

Bon je vais demander quelque chose d'extrement classic pour les connaisseur de JS
voici mon script a 2 francs
 

Code :
  1. <script language="JavaScript" type="text/javascript">
  2. function emoticon(text) {
  3. text = ' ' + text + ' ';
  4. document.message.value=text;
  5. </script>
  7. <a href="javascript:emoticon(':x')"><img src="icon_biggrin.gif" border="0"></a>
  8. <textarea name="message"></textarea>


 
je voudrai que mon :x se mette dans mon textarea quand je clic sur l'emoticon image que j'affiche.
 
Merci de me montrer le droit chemin.


Si classic veut dire "programmé comme il y a 10 ans", alors oui c'est classique :D

Reply

Marsh Posté le 20-04-2005 à 18:51:19    

Non, mais jai vite fait regarder un peu le JS il y a quelque mois,
je ne crois que ce que je demande est faramineux

Reply

Marsh Posté le 20-04-2005 à 19:25:32    

Back, as tu lu un peu les documents que je t'ai liés?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 19:27:15    

I dont speak english very much,
 
jai chercher des docs JS en francais, mais a premiere vu, mon code semble bon,
Je ai dis bien a premiere vu :D

Reply

Marsh Posté le 20-04-2005 à 19:34:03    

90% des docs en français sont des merdes, comme 90% des docs en anglais, si je t'ai filé ces deux sites là c'est parce que ce sont des Bonnes Docs ©


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 19:36:07    

Je te crois sur parole, je n'ai jamais dit que je ne les ai pas regarder.
Je suis actuellement dessut, mais mon anglais est tres bof donc je ne vais pas apprendre le javascript en 30 minute.

Reply

Marsh Posté le 20-04-2005 à 19:39:43    

Badze a écrit :

I dont speak english very much, (well)
 
jai chercher des docs JS en francais, mais a premiere vu, mon code semble bon,
Je ai dis bien a premiere vu :D


 
Sinon le français n'est pas terrible non plus...
 
Indice pour ta question :
 
De nos jour, on utilise document.getElementById('id_element').value pour récupérer la valeur actuelle d'un élément et on utilise donc des id et non plus de name (en tous cas pour le js). (on utilise toujours des name pour transmettre les infos à la page de traitement sur le serveur).


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 19:39:43   

Reply

Marsh Posté le 20-04-2005 à 19:44:38    

Mon français peut être très bon, la n'est pas le problème.
Mes gros doigts sur le clavier d'un portable, c'est pas top on peut dire.
 
tu veux dont dire que je devrai faire cela  
<textarea id="message"></textarea>  
 
puis dans mon JS, je mette document.getElementById('message').value
 
edit: non c'est pas ca  :??:


Message édité par Badze le 20-04-2005 à 19:46:12
Reply

Marsh Posté le 20-04-2005 à 19:45:53    

Badze a écrit :

Mon français peut être très bon, la n'est pas le problème.
Mes gros doigts sur le clavier d'un portable, c'est pas top on peut dire.
 
tu veux dont dire que je devrai faire cela  
<textarea id="message"></textarea>  
 
puis dans mon JS, je mette document.getElementById('message').value


 
Vu qu'il faudra que tu transmettes le contenu de ton textarea au serveur, il faut même faire cela :
 
 
<textarea id="id-message" name="message"></textarea>


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 19:47:06    

Badze a écrit :


puis dans mon JS, je mette document.getElementById('message').value
 
edit: non c'est pas ca  :??:


 
Oui, à la place de document.message.value
 
Et sinon : langage n'existe pas.
 
Et enfin : PAS DE JS dans un href.  :o


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 19:52:13    

Hermes le Messager a écrit :


 
Et enfin : PAS DE JS dans un href.  :o


 
J'ai cru voir du JS dans les forum phpBB, donc il est possible que cela marche.
Je viens de tester ce que tu m'a dit, et toujours rien malgré plusieurs test répété.

Reply

Marsh Posté le 20-04-2005 à 19:52:22    

Bon, lançons nous.
 
1- Les éléments essentiels de la page, imaginons que quelqu'un n'ait pas... disons... le javascript activé :whistle:  
De quoi va-t-il avoir besoin?
Des images à cliquer? ben non, il ne pourra pas les cliquer
Des boutons à cliquer? non plus
De la zone de texte? oui
Des boutons de validation? aussi
 
Donc on dégage les boutons de smiley du HTML, on laisse juste

<textarea name="post" id="postingandyou"></textarea>


le name sert pour accéder à la donnée du formulaire, l'id à accéder à la textarea depuis le CSS ou le JS
 
2- Maintenant on crée un fichier genre "interface_post.js" qu'on attache au fichier HTML en mettant "<script type="text/javascript" src="interface_post.js></script>" dans le <head></head> de ce dernier.
 
3- Ensuite on va créer une liste de smiley, par exemple en associant un identifiant de smiley et son icône
Donc dans notre fichier JS on écrit un truc style


var smileys=(
    (':x','icon_biggrin.gif'),
    (':)','icon_smile.gif'),
    [etc etc]
);


Comme ça on a une liste composée de couples (identifiant, icône)
 
4-

window.onload=function () {
}


Là dedans, il va faloir créer les boutons et l'intégration de smileys dans l'image.
 
Pour celà, on va utiliser les méthodes document.getElementById et document.createElement et l'évènement onclick.
 
Essaie de te renseigner sur tout ça


Message édité par masklinn le 20-04-2005 à 19:52:44

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 19:55:49    

Badze a écrit :

J'ai cru voir du JS dans les forum phpBB, donc il est possible que cela marche.
Je viens de tester ce que tu m'a dit, et toujours rien malgré plusieurs test répété.


 
J'ai pas dit que ça marche pas, j'ai dit que c'était de la merde en barre.
 
Tu mets un onclick sur ton image, PAS de lien donc et de plus dans les CSS, tu mets un cursor : pointer; pour avoir la petite main sur tes smileys.


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 19:57:21    

Je test un peu tout ca, je vous redonne reponse dans les heures qui suivent.
 
Merci :)

Reply

Marsh Posté le 20-04-2005 à 20:03:27    

Ce que j'ai donné n'est pas fini hein :D
Ca fonctionnera pas en l'état, t'as encore tout le window.onload à écrire :D


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 20:08:08    

Pourquoi avoir besoin d'un window.onload, cela marche tres bien sans.
 
regarder par vous meme
http://bibi35.free.fr
 
Il ne reste plus qu'a faire mon regex en php ete le tour est jouer en principe

Reply

Marsh Posté le 20-04-2005 à 20:11:04    

a non, il faut ke je face ca en JS, si je veux que l'image s'affiche directement dans mon textarea.
 
erf, je suis pas dans la merde

Reply

Marsh Posté le 20-04-2005 à 20:12:14    

Badze a écrit :

Pourquoi avoir besoin d'un window.onload, cela marche tres bien sans.
 
regarder par vous meme
http://bibi35.free.fr
 
Il ne reste plus qu'a faire mon regex en php ete le tour est jouer en principe


 
Parce que lui te propose d'externaliser complêtement ta fonction JS et de ne même plus avoir besoin d'onclick. Mais moi j'estime que vu ton niveau, c'est pas la peine de "tout de suite" en passer par là. ça viendra plus tard.


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 20:12:55    

Badze a écrit :

a non, il faut ke je face ca en JS, si je veux que l'image s'affiche directement dans mon textarea.
 
erf, je suis pas dans la merde


 
L'image ne s'affichera JAMAIS dans ton textarea. ;)
 
Un textarea contient du texte, point.  :o


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 20:12:55    

Badze a écrit :

Pourquoi avoir besoin d'un window.onload, cela marche tres bien sans.
 
regarder par vous meme
http://bibi35.free.fr
 
Il ne reste plus qu'a faire mon regex en php ete le tour est jouer en principe


Pour que ce soit codé proprement et que les gens n'ayant pas activé le JS puissent quand même utiliser la page [:spamafote]  

Badze a écrit :

a non, il faut ke je face ca en JS, si je veux que l'image s'affiche directement dans mon textarea.
 
erf, je suis pas dans la merde


Pas de bol, c'est impossible [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 20:14:52    

bon, ca marrange carrement alors,
 
peut etre que dans un version futur du textarea, on pourra :D

Reply

Marsh Posté le 20-04-2005 à 20:16:02    

non, c'est pas fait pour ça, c'est tout


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 20:16:40    

J'ai une derniere question,  
 
comment dire en JS, que mon curseur doit reselction mon text area automatiquement apres avoir cliquer sur l'image.
 
Car dés que je le selectionne, mon curseur se barre. et il faut reselectionner le textarea

Reply

Marsh Posté le 20-04-2005 à 20:16:51    

Badze a écrit :

bon, ca marrange carrement alors,
 
peut etre que dans un version futur du textarea, on pourra :D


 
ça existe déjà, on appelle ça des WYSIWYG en javascript qui reposent sur un div overflowé + innerHTML, mais de toutes manières, c'est pas bien, ça marche pas partout, c'est lent, et c'est finalement improductif comparé aux balises BBcode qui permettent des trucs très raffinés, mais surtout aussi le respect d'une charte graphique et un code finalement plus propre en sortie.


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 20:17:09    

document.getElementById(id_textarea).focus()


Message édité par masklinn le 20-04-2005 à 20:17:20

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 20:17:21    

Badze a écrit :

J'ai une derniere question,  
 
comment dire en JS, que mon curseur doit reselction mon text area automatiquement apres avoir cliquer sur l'image.
 
Car dés que je le selectionne, mon curseur se barre. et il faut reselectionner le textarea


 
focus()  :o  


---------------
Expert en expertises
Reply

Marsh Posté le 20-04-2005 à 20:25:40    

Hermes le Messager a écrit :

ça existe déjà, on appelle ça des WYSIWYG en javascript qui reposent sur un div overflowé + innerHTML, mais de toutes manières, c'est pas bien, ça marche pas partout, c'est lent, et c'est finalement improductif comparé aux balises BBcode qui permettent des trucs très raffinés, mais surtout aussi le respect d'une charte graphique et un code finalement plus propre en sortie.


 
ok ca marche, il est vrai qu'un beau code bien fait de ses propres mains, optimisé au maximum, c'est beau.
C'est bien pour cela que j'adore le codage.
 
Je vais faire en sorte de faire marcher tout ca, merci a vous en tout ca, vous m'avez bien aidez.

Reply

Marsh Posté le 21-04-2005 à 10:39:58    

Hermes le Messager a écrit :

ça existe déjà, on appelle ça des WYSIWYG en javascript qui reposent sur un div overflowé + innerHTML, mais de toutes manières, c'est pas bien, ça marche pas partout, c'est lent, et c'est finalement improductif comparé aux balises BBcode qui permettent des trucs très raffinés, mais surtout aussi le respect d'une charte graphique et un code finalement plus propre en sortie.


Ou alors le mode "édition" que presque tout le monde commence à supporter, basé sur un immonde bricolage JS + iframe :D


Message édité par FlorentG le 21-04-2005 à 10:40:08
Reply

Marsh Posté le 21-04-2005 à 11:51:08    

FlorentG a écrit :

Ou alors le mode "édition" que presque tout le monde commence à supporter, basé sur un immonde bricolage JS + iframe :D


 
Le top, c'est ce que j'avais montré en exemple ya un certain temps :
 
Système de bbcode classique avec prévisualisation basée sur un innerHTML + div overflowé, car dans le pire des cas, seule la prévisualisation est indisponible, mais ça reste toujours utilisable, même sans JS.  :)


---------------
Expert en expertises
Reply

Marsh Posté le 21-04-2005 à 11:53:54    

Hermes le Messager a écrit :

Le top, c'est ce que j'avais montré en exemple ya un certain temps :
 
Système de bbcode classique avec prévisualisation basée sur un innerHTML + div overflowé, car dans le pire des cas, seule la prévisualisation est indisponible, mais ça reste toujours utilisable, même sans JS.  :)


HFREnhance staÿle?
Ou alors tu faisais disparaître la textarea?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-04-2005 à 12:08:15    

masklinn a écrit :

HFREnhance staÿle?
Ou alors tu faisais disparaître la textarea?


 
Non, je faisais apparaitre la prévisualisation temps réel UNIQUEMENT si la version de JS le permettait, et sinon, le textarea lui ne bouge pas, ni le code quoi qu'il arrive. Je considère toujours que ça reste la meilleure solution. Je n'aime pas les WYSIWYG HTML/JS actuels qui ne montre que du HTML en cas d'absence de JS ou si la version de JS est inadéquate. [:spamafote]
 
J'avais fait un sujet là dessus, mais le truc n'est plus visible. Faut que je remonte le serveur sur lequel ya ça plus mon éditeur d'image en JS.
 
Mais de toutes manières, vu que je vais intégrer tout ça à mon CMS, vous le verrez d'ici peu. (enfin des rendus HTML, parce que mon CMS ne sera pas dispo).


---------------
Expert en expertises
Reply

Marsh Posté le 21-04-2005 à 12:23:14    

oui, donc HFR Enhance Staÿle, une prévisualisation dynamique en plus du textarea ;)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-04-2005 à 14:12:15    

Edit, je n'ai rien dit, désoler.
 
...


Message édité par Badze le 21-04-2005 à 14:14:39
Reply

Marsh Posté le 21-04-2005 à 16:40:03    

Je voudrai que mon focus dans mon textarea se mette au milieu de mes 2 balises
 
comme dans l'exemple la
avec [u][/u]
 
http://bibi35.free.fr
 
mon focus se place a la fin.
Merci de bien vouloir maider.


Message édité par Badze le 21-04-2005 à 19:41:21
Reply

Marsh Posté le 21-04-2005 à 19:48:56    

up svp

Reply

Marsh Posté le 22-04-2005 à 17:45:35    

une aide précieuse svp ?
 
edit, voici comment je suis organisé.
mon HTML

Code :
  1. <input class="button" value="Gras" style="font-weight: bold; width: 70px;" onclick="javascript:truc('[B]','[/B]')" type="button">


 
MON JAVASCRIPT

Code :
  1. function truc(debut,fin) {
  2. document.getElementById('id-message').value= document.getElementById('id-message').value+debut;
  3. document.getElementById('id-message').focus();
  4. document.getElementById('id-message').value= document.getElementById('id-message').value+fin;
  5. }


Message édité par Badze le 22-04-2005 à 18:01:33
Reply

Marsh Posté le 22-04-2005 à 20:34:33    

Je te donne la fonction qui me sert à insérer des tags, c'est codé à l'arrache. :o Mais c normal, je suis le seul à m'en servir (ça fonctionne avec mozilla, IE ça m'étonnerais) :

function insertt(openTag, closeTag) {
 var input = document.forms['edit'].elements['TEXT'];
 input.focus();
 
 if(typeof input.selectionStart != 'undefined'){
     var start = input.selectionStart;
     var end = input.selectionEnd;
     var scroll = input.scrollTop;
     var pos;
 
     var insText = input.value.substring(start, end);
     input.value = input.value.substr(0, start) + openTag + insText + closeTag + input.value.substr(end);
 
 
     if(insText.length == 0){
      pos = start + openTag.length;
     }else{
      pos = start + openTag.length + insText.length + closeTag.length;
     }
 
     input.selectionStart = pos;
     input.selectionEnd = pos;
     input.scrollTop = scroll;
  }
}


Ca fait tout ce que je veux (insérer le texte à partir du curseur, repositionner le curseur...).


Message édité par kalex le 22-04-2005 à 20:38:35
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed