Dator Blog

Voici une question que je me suis toujours posé : Comment savoir si la personne a le javascript activé sur son navigateur ?

Aujourd’hui, en farfouillant dans les balises HTML que mon éditeur de code me propose, je suis tombé sur la balise noscript et elle correspond parfaitement à mes (vos) attentes.

En effet, cette simple balise html permet de contenir du code (x)HTML qui ne sera vu que si l’internaute utilise un navigateur ne prenant pas en charge le javascript . Pas mal non?

Encore plus fort, vous voulez rediriger la personne qui n’a pas de javascript sur son navigateur (ouh !!) sur une page internet l’informant que son navigateur est corrompu . Rien de plus simple, il suffit de mettre ce petit bout de code dans les balises noscript :

Néanmoins ce système n’est pas valide xHTML. Pour qu’il soit valide, il faut déclarer la balise <noscript> dans le body et par exemple afficher un paragraphe qui précise que votre site fonctionne avec du javascript.

Et voila !

• 6 commentaires

Aujourd’hui je vais vous présenter une librairie Javascript (et oui … encore !).
Il s’agit de LightBox, le plugin de référence pour vos images.

En faite cette librairie permet d’ajouter, sur les liens des agrandis de vos images, un effet d’agrandissement sur la même page.

Cette librairie fonctionne sur la base de Prototype et de Scriptaculous (2 librairies que je vous ai déjà présenter précédemment).

Voici un exemple

Comme tu as pu voir, l’effet proposé fait très professionnel et en plus si vous avez une galerie d’image, tu vas voir apparaitre « Suivant»  ou « Précédent»  pour naviguer entre les images.

Lire le reste de cet article »

• 1 commentaire

Aujourd’hui je vais vous montrer comment effectuer une requete Ajax simplement avec PHP et le framework javascript de Prototype JS.

Dans un premier temps, voici une petite explication de ce qu’est AJAX :

AJAX est un terme qui évoque l’utilisation conjointe d’un ensemble de technologies libres couramment utilisées sur le Web .
Son rôle est d’envoyer une requête au serveur de façon asynchrone (sans rechargement de page) ,de recevoir la réponse du serveur et de la faire apparaitre coté client.

Dans un premier temps, téléchargez la librairie Prototype : Télécharger

Ensuite télécharger le petit pack que je vous ai préparé pour mon exemple : Télécharger

Et enfin le petit test du script que je vous propose : Voir l’exemple

Lire le reste de cet article »

• 4 commentaires

Bonjour à tous,

Aujourd’hui je vais vous présenter ModalBox , une boite de dialogue entièrement codé en Javascript et respectant les « normes»  du Web 2.0.

Ce petit bijoux est basé sur Prototype JS , un des meilleurs framework JS sur le web , et Scriptaculous , une librairie d’effets Javascript .

De façon très simple, ajouter à vos pages des boites de dialogues à votre site internet .

De plus quand ces boites sont activés, la page qui est derrière deviens non cliquable (depuis le temps que je cherche à faire ça ! (prochainement sur www.dator.fr pour la petite astuce ) ! Ces boites ressemble à cela (cliquez sur le lien ) : ModalBox Exemple

Pour que la Modal Box fonctionne correctement, n’oubliez pas d’inclure ces 4 éléments dans votre source HTML :

1. Le css de la modalbox (modalbox.css).
2. La librairie Prototype (prototype.js).
3. La librairie Scriptaculous (scriptaculous.js?load=effects (pour charger les effets)).
4. Le javascript de ModalBox (modalbox.js).

Avec ces 4 éléments il est très simple de créer ces propres boites modales.

Je vous met le petit script a disposition ici : http://www.box.net/shared/exbvmv2o8k

(l’ensemble du code utilisé est commenté pour plus de clarté).

Et le lien pour télécharger la librairie ModalBox : http://www.wildbit.com/labs/modalbox/
Bon Javascript à tous !

• 15 commentaires

Aujourd’hui je vais vous présenter Ext-JS, Le framework Javascript du moment !

Cette librairie est très complète et permet de faire des composant windows-like comme par exemple une datagrid éditable (voir l’exemple), des onglets (voir l’exemple) ou bien des formulaires dynamique (voir l’exemple) ou encore bien d’autres !

Couplé avec de l’Ajax et du JSON (notation Objet pour le Javascript) , Ext-JS s’impose comme une des référence dans le monde du Javascript .
Suivrons des tests de cette librairie avec des exemples concrets !

Le site : http://extjs.com/

Bon Javascript à tous

• 4 commentaires