nyroBlog
Bannière NyroBlog, par emi
Image par emi - ?

Tag : JavaScript


Chips, Twix et Mix

Cela fait un petit moment que je n'ai pas écrit un billet du genre. Il est donc possible que certains de ces infos soient un peu vieilles...

  • Android évolue toujours mieux. On peut espérer le 1er vrai téléphone bientôt
  • Facebook Connect permettra d'ajouter une dimension sociale à vos sites
  • Firefox a sorti en version 3 RC1. La RC2 ne devrait pas tardé, et si tout se passe bien, la version finale devrait sortir fin juin.
  • Google a changé sa favicon. Vous trouvez comment ? Moi j'aime bien.
  • jQuery a sorti 3 version mineures en peu de temps (1.2.6 à l'heure actuelle). Mon petit doigt me dit qu'il travaille sur la version 2 qui sortira bientôt, en même temps qu'une nouvelle version du site, d'un nouveau logo et de la 1ère version final de jQuery UI
  • TinyMCE en a fait de même, pour fixer des bugs. Version 3.0.8 actuellement

Et puis un peu de news perso aussi, il n'y a pas de raisons :

  • Les Lakers ont remporté hier la conférence West, c'est officiel. 1er de la saison, 1er des playoffs, et le MVP pour Kobe Bryant. Plus qu'à gagner contre les Celtics de Boston et ils auront tout eu cette année.
  • Mon stage chez Fluidesign se termine dans un peu plus d'un mois. Ensuite j'ai encore 3 semaines ici à faire le touriste. Si une envie de Cali vous prend (et qu'on se connait, c'est un minimum), des options sont possible ;)
  • NyroModal a été télécharger plus de 2 000 fois, la page du projet vue par plus de 20 000 visiteurs uniques ! Un billet sur le sujet est en préparation
  • Suite à des problèmes sur le serveur d'Amenothès, j'ai décider de me prendre un petit serveur dédié à mon retour en France. Si quelqu'un a des bonnes adresse ou des infos sur l'installation et la configuration de Postfix, SpamAssassin, ClamAV ou quoique ce soit qui me sera utile, n'hésitez pas ! Je vais prendre une debian vierge histoire de m'amuser comme je veux.

English Version of this post

nyroModal 1.1 release

2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.

During the last days, I developed my first own jQuery plugin: nyroModal.

nyroModal

Why a new plugin of this kind when there is already too many?

4 answers:

  • There is no too much using jQuery, most of them use Prototype/Scriptaculous
  • Most of them aren't too customizable as expected
  • When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
  • Because it's still pleasant for his ego to realize the things by himself

My plugin provides all the features I saw in the differents plugins I tried. In bulk:

  • Ajax Request
  • Display an hidden DOM element
  • Image
  • Gallery
  • Form
  • Iframe

But I also added some stuff I don't believe see elsewhere, or not enough:

  • You can target the content inside an Ajax request or a form
  • Forms works with a file upload
  • Background color is modifiable dynamically
  • Display an error message if needed
  • Ability to resize from an Ajax Request

Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!

And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.

If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.

PS : I know, I didn't search too far for the name...

Version française de ce billet

sortie de nyroModal 1.1

Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.

Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.

nyroModal

Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?

4 réponses :

  • Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
  • La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
  • Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
  • Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.

Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :

  • Requête Ajax
  • Affichage d'un élément du DOM caché
  • Image
  • Galerie
  • Formulaire
  • Iframe

Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :

  • Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
  • Les formulaires fonctionnent même avec un upload de fichiers
  • La couleur de fond est paramétrable dynamiquement
  • Affichage d'un message d'erreur si besoin
  • Possibilté de modifier la taille de la modale depuis une requête Ajax

De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.

Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.

Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.

PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...

English version of this post

Howto update a website to reload the page through Ajax

I deployed in a website an Ajax reload for every pages. This website use a small audio player and the sound was stopped each time a new page was requested. That wasn't so graceful. The result now is exactly the same website reloading the pages through Ajax, without changing accessibility: I didn't modify ehe HTML source.

I did it quickly bu using jQuery. As this method could be useful for others, I will describe step by step how I made it.
The website which I worked on was pretty small: Amandine Café. Nothing better to train himself in a small example and then apply it in big projects

Current Website Analysis

The first thing to do is to navigate in the whole website to deduct the fixed zone and dynamic zone to reload. You have to identify which links will reload which zones, and what will be happen regarding the reloaded page. For instance you have to worry about the possible javascript control which could be a problem. Write down them and we'll take care of that at the end.
This part was pretty fast for me as the website don't use sub navigation and contains only 5 pages. I found 2 zones delimited by 3 div identified with the id header, page, and footer. Only the div#page vary regarding the pages. That will be only this content that I will update with Ajax.

PHP Side Preparation

Before dealing with the javascript code, we'll update the PHP code of our pages. When an Ajax load is made, we won't reload the full page, but only the content to update. For more simplicity and flexibility, we'll use the same URL than the real links. That's mean we have to be able to provide only the requested content in PHP, without the head page, or the fixed div. If you don't want –can't– do that, take a look to the little bonus at the bottom of this post...
The easiest way to do that is to put the fix part in separate files, named randomly header.php and footer.php. These files will be include in every pages; that's may already the case, using the include function. The thing is now to don't show these parts when the request is an Ajax request. Pretty easy, we'll write a PHP function: isAjax. The file includes will occur only if isAjax is false. In others words:
if (!isAjax())
    inlcude('header.php');

The isAjax function is, as you can see, very very hard:
function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
Actually jQuery –also Prototype, I don't know about the others– add a HTTP_X_REQUESTED_WITH element in the request that you can retrieve in the $_SERVER global variable.
We're done with the PHP preparation pages, which are now able to provide light version of your pages especially for the Ajax request.

Javascript Integration

We're moving now on the real Ajax request programmation. To keep the website totally accessible, which will works exactly in the same way without Javascript, We won't modify any current HTML sources. We'll just include jQuery in all the pages and one other javascript file containing the upcoming code.
The script schema will be:
  1. On the page load, intercept all links pointed to .php pages
  2. Add an onclick function to make the Ajax request and stop the page change
  3. On the click, call the page through Ajax with the same URL and then integrate the result where we want.
  4. Stop the click propagation
With jQuery, we're writing that very simply:
$(function() {
    $('a[href*=.php]').click(function() {
       $('#page').load(this.href);
return false;
    });
});
Very short, isn't it?
Of course this code won't work perfectly in every case. In my example I have to update the body id according to the requested page; that's mean the navigation bar link will going brown as expected by the graphic designer. To do so we can use the third parameter of the load function which will be called once the Ajax load is done. Here is how looks like my function:
$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
        $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
return false;
    });
});
If you read the code in the live site, that's not at all like that because I occured other problems.

Little Bonus

If you can't–don't want– deploy the PHP cutting for the Ajax request, don't stop right now! Firstly it could be possible to reload the whole page. This solution will be very sad and you'll probably occurs many others problems.
jQuery will help. Indeed, in the URL provided to the load function, you can specifiy a HTML selector to filter the result and show only the part you want to.
In my example the call could become simply:
$('#page').load(this.href+' #page');

I dissuade to use this technique as that's mean you will reload the whole page. So we loose the Ajax utility to reduce data transfer between clients and server.

If it's not that simple?

Give proof of imagination!
As I already thought about this question, I'll give you some example soon. This post is yet consistent and you can start to enjoy. Finally I hope you won't wait me to do that... Or if you have a website where do you want deploy this kind of solution, let me know and I will use it as my example.

Express Yourself!

How did you find this post? Interesting, boring, totally useless, can do better?
Do you have some questions? Suggestions?
Did you read some English mistakes?
Use the comments!

Version française de ce billet

Chips, Twix et Mix

Des news d'ici et d'ailleurs :

  • Prism sort en version 0.9
  • Si vous chercher l'extension ultime pour rechercher vos messages dans Thunderbird, Seek est votre ami
  • Firefox sort en beta 4. Encore une beta 5 avant laversion finale. A noter les améliorations de mémoire.
  • IE8 sort en beta
  • Les résultats des navigateurs en beta à l'acid test 3
  • Vous travaillez sur une version mobile d'un site ? Lisez ceci pour connaitre les bonnes pratiques
  • jQuery organise un worldwide sprint ce week-end spécialement pour jQuery UI
  • On parle de plus en plus de Piwik
  • TinyMCE sort en version 3.0.5
  • Netvibes évolue vers le réseau social, sous le nom de Ginger. Ma page est ici, et devrait se remplir ce week-end.
  • Marre de créer vos htaccess à la main ? La solution en ligne.
  • Après l'Air Guitar, Canal Plus lance l'Air Fuck : filmez-vous et gagner un scooter (wahou, un scooter, j'en ai toujours rêver...)
  • Les LoKataires, amis et artistes que j'adore, ont maintenant leur clip, simplement nommé le LoKaclip (Bravo à Pitch pour le montage !)