Archive for the ‘javascript’ Category

Trier et filtrer ses tableaux HTML

27 mars 2007

Pour eviter de longues et infructueuses recherches sur le web, je vous recommande une librairie Javascript simple et efficace présentée sur javascripttoolbox pour integrer dans les tableaux HTML des fonctionnalités de tri et de filtrage. La librairie Yahoo (YUI) ne propose en effet pas encore de solution satisfaisante avec son composant TableData qui viens juste de sortir en version beta.

La rapidité est impressionnante, même avec de long tableaux. De plus, cette librairie javascript combinée avec une CSS gère efficacement les couleurs alternées sur les lignes.

Truc CSS #8 – standardisez vos formulaires

26 mars 2007

Il n’y a rien de plus difficile à mettre en page qu’un formulaire. Les objectifs sont en effet multiples et souvent contradictoires: attractif, fonctionnel, utilisable, robuste … (rangez dans l’ordre de priorité de votre projet). Pour vous aidez dans cette quête, le succès passe par le bon usage d’HTML bien formé, des CSS et du Javascript qui doit rester d’un usage optionnel sur vos formulaires.

Un excellent exemple d’implémentation de ces principes nous est présenté sur Uni-Form, savant mélange d’HTML bien formé, de CSS et de Javascript. Vous pouvez même en telecharger le code.

AJAX ? c’est facile ! Je vous explique …

19 mars 2007

Jarry Maugans nous a pondu un petit tutorial de +/- 1 page pour nous expliquer comment mettre de l’AJAX sur notre site sans lire pleins bouquins …

En 3 etapes simples :

  1. Etape 1: Créer la partie intelligente du côté serveur qui va executer le requete (vous pouvez aussi la faire en ColdFusion, c’est plus facile 😉
  2. Etape 2: Créer le formulaire HTML
  3. Etape 3: connecter les 2 parties à l’aide d’un petit fichier Javascript qui s’occupera de la connection entre le client et le serveur.

Comment faire des interfaces à onglets VFBF

16 mars 2007

Control.Tabs est une librairie javascript permettant de créer facilement des interfaces à onglets (tab)  dans vos pages.

Simple et rapide à implementer si vous n’utilisez pas la librairie Yahoo qui en propose une autre version.

Note: VFBF = vite fait, bien fait 😉

Une extension Firefox pour developpeur

13 mars 2007

Firebug est une nouvelle extension Firefox qui peut être d’une aide précieuse pour tous les développeurs. Elle permet  d’éditer, debugger et de monitorer vos CSS, HTML et JavaScript en direct sur votre page web.

La prise en main est assez rapide et les résultats sont plus qu’intéressant. Cette extension permet ainsi de calculer les temps de chargement de chaque element de la page.

Une bonne extension à ajouter à Selenium dans une bonne boite à outil de testeur.

Une indigestion de references

13 mars 2007

Pour ceux qui n’ont pas peur d’une indigestion, allez visiter le Web Design Reference Site de l’Université du Minnesota. On y trouve tout ce qui se réfère au web design et en grande quantité.

Perso, c’est le genre de reference que je met dans mes signets mais que je ne vais jamais consulter, il y en a trop !

Je vois … Je vois que vous avez l’Arial sur votre PC

12 mars 2007

Non, ce n’est pas de la magie noir, ni de la magie blanche mais bien de code Javascript qui permet de détecter les Polices (fonts) disponibles sur le PC d’un visiteur / utilisateur. Merci qui ? Merci lalit.lab !

Un peu de pratique Javascript

12 mars 2007

phatfusion nous présente quelques exercices de programmation CSS/Javascript/HTML assez sympa, au menu:

Perso, j’adore leur page d’entrée !!

Créer un DIV repliable avec CSS et Javascript

6 mars 2007

Retour aux sources avec cette petite explication tout simple: Comment créer un Div repliable en Javascript et CSS ?

Première partie du code: l’HTML

<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>

Seconde partie du code: le Javascript

<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>

.. et voila !

(src. en anglais harrymaugans.com)