&mymail;"> ]> p4bl0's blog > Quelques nouveautés sur le site

Quelques nouveautés sur le site

Vous avez peut-être pu remarquez quelques nouveautés sur le site.
Il y a tout d'abord la recherche live qui permet de sortir de la recherche si on est pas satisfait du résultat (un lien apparaît sous le champ de recherche).
Il est possible par le même moyen de revenir à la recherche.
À priori il sera bientôt possible de choisir de surligner les mots de la recherche. Par contre je ne sais pas encore comment je vais m'y prendre, pas pour surligner les mots (ça c'est facile), mais plutôt parce qu'on change de page quand on clique sur un résultat, et il faut pouvoir passer les mots de la recherche en paramètres à la page ouverte. Et j'ai pas envie de le faire dans l'URL. Je verrais ça plus tard :-)

L'ajout de commentaires à aussi été modifié. Maintenant quand on ajoute un commentaire, la couleur de fond du commentaire tout juste ajouté est jaune puis de dégrade vers le blanc. C'est assez à la mode en ce moment, ça fait assez "web 2.0" je trouve.
En fait à la base c'était juste pour voir si j'arriverai à faire ça puis en fait j'ai trouvé le résultat sympa alors j'ai laissé.

Voici la fonction javascript qui fait ça :
 → Code : yellowize
  1 
  2 
  3 
  4 
  5 
  6 
  7 
function yellowize(elem_id, yellowvalue){ document.getElementById(elem_id).style.backgroundColor = 'rgb(255,255,'+yellowvalue+')'; if (parseInt(yellowvalue)<=255) { var newyellowvalue = parseInt(yellowvalue)+1; setTimeout(function() {yellowize(elem_id, newyellowvalue);}, 10); } }
Ensuite il me suffit de faire un addScript('yellowize("new_comment", 0);'); avec xajax, la librairie que j'utilise pour faire du ajax sur ce site.
Vous voyez que le code est facilement modifiable pour s'adapter à tout les dégradés de couleur, même à plusieurs variables si ça vous chante.

;-)

Mise à jour

Bon alors la mise en valeur des termes de la recherche en les soulignant marche chez moi mais il y a un problème : je ne peux pas utiliser la méthode addReplace() de xajax parce qu'elle remplace aussi dans les balises html, du coup si quelqu'un cherche "la vidéo" (ben ouais pourquoi pas), il y a tout les attributs class par exemple qui vont être modifiés en
c<span style="background-color:#FF0;">la</span>ss
et vous pouvez imaginer le bordel que ça peut mettre sur la page.
Donc en fait il faudrait que je modifie la fonction addReplace de xajax (je peux c'est sous licence libre) en mettant une regexp qui fait que ça ne marche pas dans un tag html (entre < et >).
Le problème c'est que c'est une fonction JavaScript et je ne suis pas assez calé en JavaScript pour toucher à ça, je pourrais évidemment faire un peu de recherche et voir comment y arriver, mais je ne pense pas que ça en vaille le coup, tant pis !

Pour ceux qui veulent un aperçu de la fonction qui fait le rechercher-remplacer :
 → Code : fonction replace de xajax
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
this.replace = function(sId,sAttribute,sSearch,sReplace) { var bFunction = false; if (sAttribute == "innerHTML") sSearch = this.getBrowserHTML(sSearch); eval("var txt=this.$('"+sId+"')."+sAttribute); if (typeof txt == "function") { txt = txt.toString(); bFunction = true; } if (txt.indexOf(sSearch)>-1) { var newTxt = ''; while (txt.indexOf(sSearch) > -1) { x = txt.indexOf(sSearch)+sSearch.length+1; newTxt += txt.substr(0,x).replace(sSearch,sReplace); txt = txt.substr(x,txt.length-x); } newTxt += txt; if (bFunction) { eval('this.$("'+sId+'").'+sAttribute+'=newTxt;'); } else if (this.willChange(sId,sAttribute,newTxt)) { eval('this.$("'+sId+'").'+sAttribute+'=newTxt;'); } } }
Je me sens pas de toucher à ce truc :-p
Tags : développement web, ajax, javascript, p4bl0 | Pas de commentaire | #40 | Trackback

Commentaires

Il n'y pas de commentaire pour le moment.

Ajouter un commentaire :

Formatage du texte : ##gras##, //italique//, --barré--, __souligné__.
Pour créer un lien, utilisez la syntaxe suivante : @[http://adresse/du/lien/](texte du lien).
Pour insérer du code, mettez le entre double crochets : [[votre code]].
Votre adresse email ne sera pas affichée.