Ajax & JS

PrettyPhoto : Une lightbox sympa pour jQuery

réagissez à cet article Le 15 avril 2008 à 20:42 par chris

Les lightbox se trouvent partout, pour jQuery aussi, il existe pas mal de solutions mais PrettyPhoto est plus sexy avec ses bords arrondis.

Si vous cherchez une lightbox pour votre site/blog utilisant jQuery, ne cherchez pas plus loin.

Ajax & JS

Un CoverFlow avec Prototype.js et Script.aculo.us

10 réactions Le 11 mars 2008 à 22:05 par chris

Javascript est de plus en plus impressionnant. Vous pouvez maintenant créer un coverflow avec quelques lignes de code grâce à ProtoFlow.

(lire la suite…)

Ajax & JS

maitrisez l’orientation de l’iPhone en javascript

2 réactions Le 29 décembre 2007 à 11:46 par chris

L’iPhone a peine né est déjà un appareil retenant toutes les attentions, il est certain que nous risquons de devoir développer prochainement des versions dédiée de plusieurs de nos sites.

Aussi, je vous propose pour commencer la fonction javascript qui vous permettra de contrôler l’orientation de l’iPhone afin de pouvoir adapter parfaitement votre minisite.

  1.  
  2. window.onorientationchange = function() {
  3.   /*Window.orientation retourne une valeur qui indique si iPhone est en mode portrait, mode paysage avec l’écran tourné vers la gauche, ou en mode paysage avec l’écran tourné vers la droite. */
  4.   var orientation = window.orientation;
  5.   switch(orientation) {
  6.     case 0:
  7.     alert(‘vous êtes en mode portrait’);
  8.         break;
  9.     case 90:
  10. alert(‘vous êtes en mode paysage gauche’);
  11.      break;
  12.     case -90:
  13. alert(‘vous êtes en mode paysage droite’);
  14.         break;
  15.   }
  16. }

évidemment, je n’ai pas encore testé.

Ajax & JS

Plus loin avec Prototype.js

6 réactions Le 24 novembre 2007 à 10:44 par chris

Si il y a bien un frameworks ajax populaire, c’est bien Prototype. Celui-ci sert de base pour un grand nombre de scripts.

En fait prototype tout seul ne permet pas grand chose, si ce n’est une simplfication d’ajax et du javascript en général. La où il impressionne, c’est combiné a d’autres scripts plus visuels.

Voici une liste des meilleurs scripts pour Prototype.

  • Script.aculo.us est certainement le compagnon idéal de prototype car gràce à lui, vous pourrez exploiter des effets visuels facilement.
  • La prototype-windows de Xilinus est assez impressionnante. C’est la fenêtre Ajax la plus évoluée que vous pouvez trouver. Elle exploite à la fois Prototype et Scriptaculous. Un Must.
  • Le prototype-carousel, toujours de Xilinus est aussi une fonction intéressante et impressionnante. Même Sebastien Xilinus, l’auteur de ce script n’a pas autant fait évolué celle ci.
  • La validation d’un formulaire avec Prototype est plutôt pratique
  • Travailler en temps réel sur les tableaux via Prototype

  • La modalbox de Prototype est impressionnante
  • StarBox de Prototype, c’est un script le vous permettant de voter en en glissant la souris sur des étoiles
  • Prototip, c’est la fameuse Infobulle mais pour prototype
  • L’accordion V2.0 est un script pour générer un effet accordéon, il nécessite Prototype et scriptaculous
  • La célèbre Lightbox 2
  • Le prototype image cropper, indispensable pour les recadrage d’images
  • OpenRico , un concurent de script.aculo.us
  • Fisheye control, pour simuler le Dock de Mac OSX
  • Control Textarea, vous permet d’améliorer vos textarea avec une sorte de bbcode
  • JSprogressBar vous permet de réaliser et gérer des barres de progression.
  • Le Simple-layout-manager : Ce truc est génial, il vous permettra de mettre en place un layout plus ou moins complexe prenant la hauteur et la largeur total de la page. Ce qui est impossible à réaliser en pur css.
  • Image Lazy Loader: un preloading pour vos images
  • Light windows, un concurrent sérieux pour la lightbox
  • Livevalidation : Un validateur ajax pour vos “input”
  • SimplTry : Un miniframeworks pour prototype contenant plusieurs fonctions DHTML indispensables
  • ScrollBox : créer une ScrollBar en css/js : Un must ( une démo disponible chez j0k3r )

Voilà, j’ai fait le tour des principales extensions à Prototype, mais il y en a d’autres. A vous de les découvrir

Ajax & JS, Bookmarks

Plus de 140 tutos et scripts Ajax pour les webdevs

2 réactions Le 23 novembre 2007 à 22:43 par chris

Déjà diffusée sur mon blog, voici une liste de plus de 140 tutos et scripts ajax

Régalez-vous…

(lire la suite…)

Ajax & JS

Ajax sans frameworks

16 réactions Le 9 novembre 2007 à 21:45 par chris

En développement web, il existe des situations qui demandent de s’adapter.

Par exemple, la méthode XMLHttpRequest (Ajax) peut être nécessaire pour charger des éléments de pages comme du texte et des formulaires et utiliser des gros frameworks tels que prototype peut sembler exagéré. Alors dans ce cas, je crée mes petites fonctions js moi même.

Ici je vous propose la fonction ajax “de base” que je nomme ajaxlite, elle ne gère pas de cache ni communication xml mais permet sans difficulté de charger du texte ou des données, mais surtout elle est très légère et simple d’emploi.

  1. <script type="text/javascript">
  2.  
  3. function ajaxLite(file)
  4.  
  5. {
  6.  
  7. if(window.XMLHttpRequest)
  8. ajxl_object = new XMLHttpRequest();
  9. else if(window.ActiveXObject)
  10. ajxl_object = new ActiveXObject("Microsoft.XMLHTTP");
  11. else return(false);
  12. ajxl_object.open("GET", file, false);
  13. ajxl_object.send(null);
  14. if(ajxl_object.readyState == 4) return(ajxl_object.responseText);
  15. else return(false);
  16. }
  17.  
  18. </script>

Pour l’utiliser, c’est très simple, vous pouvez par exemple charger du text dans un div de cette façon.

  1.  
  2. document.getElementById(‘mondiv’).innerHTML= ajaxLite(‘montext.php?lang=fr’);

C’est simple non?

Ajax & JS

Une lightbox sans lightbox

9 réactions Le 3 novembre 2007 à 11:43 par chris

Vous connaissez certainement tous le script lightbox.js qui vous permet d’afficher des images dans des boite de dialogue ajax. Ce script est excellent mais reste limité en terme de modification et surtout, c’est assez lourd.

Afficher ma boite de dialogue

(lire la suite…)

Ajax & JS

Les bases du DHTML

4 réactions Le 14 octobre 2007 à 21:20 par chris

Le DHTML, c’est cette technique qui permet de déplacer ou modifier des éléments d’une page HTML de façon dynamique.

Le DHTML est souvent confondu avec Ajax pourtant si Ajax modifie le contenu d’un élément, le DHTML modifie la forme.
Comment ça marche le Dhtml? C’est assez simple, le DHTML modifie l’apparence CSS de divers éléments grâce à des des script javascript.
Voici un exemple:

Je désire déplacer une boite à gauche ou à droite en cliquant dessus.

mapho

pour cette fonction je vais jouer sur le style padding-left

je crée un fonction appelée ici “deplace()”

  1.  
  2. <script type="text/javascript">
  3. function deplace(id)
  4. {
  5. elm = document.getElementById(id);
  6. if (elm.style.paddingLeft==‘0px’ || elm.style.paddingLeft==0)
  7. {
  8. for (i=1; i<=100; i++){
  9. setTimeout("elm.style.paddingLeft=’"+(i*3)+"px’;",(i*3))
  10. }
  11. } else {
  12. for (i=1; i<=100; i++){
  13. setTimeout("elm.style.paddingLeft=’"+(300-(i*3))+"px’;",(i*3))
  14. }
  15. }
  16. }
  17. </script>

ensuite on crée un élément html

  1. <a href="#" onclick="deplace(’phototest’); return false"><img src="http://smashingcoding.com/wp-admin/Sans%20titre-3.png" id="phototest" alt="mapho" border="0" height="164" width="157" /></a>

Explication

elm est l’élément qui subira les modifications,
si le padding-left de l’élément vaut 0px ou 0 on lance la première boucle “for”

setTimeOut fonctionne comme ceci: setTimeout(”action a exécuter”, “dans combien de milliseconde”) ;

donc dans le cas présent la boucle va créer plusieurs appels à la fonction

  1.  
  2. setTimeout("elm.style.paddingLeft=’3px’;",3);
  3. setTimeout("elm.style.paddingLeft=’6px’;",6);
  4. setTimeout("elm.style.paddingLeft=’9px’;",9);
  5. …

Ensuite, si le elm.style.paddingLeft n’est pas égal à zero, on lance la fonction inverse.

C’est simple non?

Valid XHTML 1.0 Transitional