Archives du site

Astuce : Utiliser un focus juste après un morph

J’ai eu un petit soucis l’autre jour par rapport à la connexion des utilisateurs sur un site. Je voulais afficher en fondu un cadre avec un identifiant et un mot de passe puis faire un focus() sur le champ « identifiant ».

$(‘ecran’).fade(1);
$(‘identifiant’).focus();

Le problème vient du fait qu’un focus ne peut se faire que si la case souhaitée est un minimum affichée.

Un diaporama JavaScript sur votre site

Slideshow

Les images sont un peu l’attraction d’un site Internet. Elles permettent de donner vie à du texte qui, même s’il est très intéressant, peu vite ennuyer et amener la fermeture de la page par l’internaute. Quoi de mieux alors qu’un diaporama, si possible attractif, comme vitrine de son établissement ou pour animer un book photo un peu triste.

Cependant, la plupart du temps quand on pense diaporama dynamique, on fait vite le rapprochement avec Flash qui peut vite compliquer la tâche pour les non connaisseurs. Que nenni, JavaScript et l’un de ses Framework Mootools couplé à des classes toutes faites vont faire le travail pour vous (ou presque).

EditArea – Editeur de code source et colorisation syntaxique

Editeur avec colorisation syntaxique

Aujourd’hui je vais vous présenter un outil très intéressant pour les sites de codeurs. Je m’explique : admettons que vous êtes fou de programmation et que vous avez créé un site sur lequel vous donnez vos codes sources. Mais voilà, vous voudriez pouvoir modifier vos codes sources directement en ligne avec un éditeur agréable et surtout un éditeur qui inclus la coloration syntaxique.

Après la lecture de cet article vous serez capable de mettre en place l’éditeur de code source EditArea.

Formulaire de contact avec PHPMailer

Formulaire de contactLe formulaire de contact est le premier et le plus simple moyen de communication entre un client et le propriétaire du site. Que ce soit sur un blog pour demander un article à l’administrateur ou sur un site professionnel pour demander un devis, le formulaire de contact se doit d’être simple à remplir et surtout sécurisé pour pouvoir faire le tri entre clients et spams.

Dans cet article nous mettrons en place un formulaire très simple : nom, prénom, @mail, sujet, message. Nous y mettrons un peu d’AJAX pour le rendre plus réactif. La vérification des champs sera très simple : syntaxe mail pour le champ @mail et vérification des caractères [a-z._-] pour les autres champs. Ce qui nous assurera un formulaire sécurisé au niveau des injections de la fonction mail().

Faire un interrupteur avec Mootools

Interrupteur On/OffCet article peut paraître d’un intérêt limité et en effet, je l’écris suite à une demande formulée par un lecteur de ce blog qui crée un site pour un électricien.

Cet article nécessite l’utilisation d’un addon Color de Mootools.

La classe Mootools à utilisé pour réaliser cet interrupteur a été développée par mes soins. Vous pouvez la télécharger, la modifier et l’utiliser comme bon vous semble.[…]

Envoyer un formulaire par Ajax avec Mootools

Aujourd’hui nous allons voir comment envoyer un formulaire grâce à l’AJAX avec le framework javascript Mootools. Nous allons créer dans un premier temps 2 pages PHP, une qui contiendra le formulaire et l’autre qui affichera uniquement la réponse. Ensuite nous mettrons en place notre Javascript qui capturera l’évènement submit du formulaire pour envoyer une requête AJAX à la place.
[…]