Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - js

Fil des billets

mardi 11 juillet 2017

JS : Afficher un menu qui ce cache quand on clique ailleurs que sur un élément du menu

Cas d'utilisation : un menu déroulant qui s'affiche lors d'une recherche (le menu contient des éléments cliquables et quand on clique ailleurs sur la page on souhaite masquer le menu :

$(document).on('click', 'body', function(e){
// Quand on clique sur le body on cache la zone
$('#zone-a-cacher').hide();
});
$(document).on('click', '#zone-a-cacher', function(e){
// Evite que l'évènement ne soit propagé jusqu'au body
// (car sinon la zone serait de nouveau cachée)
e.stopPropagation();
e.stopImmediatePropagation();
});

jeudi 6 juin 2013

Des alternatives à Aloha Editor

En cherchant, je suis tombé sur deux alternatives à Aloha Editor, vous savez cet éditeur html5 qui fait du "content editing".

EtchJs : sous licence MIT, http://etchjs.com

HalloJs : sous licence MIT, http://hallojs.org/

Essayez-les je pense qu'ils valent le coup !

CreateJs (http://createjs.org) permet d'intégrer plus facilement ces éditeurs avec des CMS.

jeudi 2 août 2012

Livequery : le plugin jQuery qui permet de faire fonctionner des plugins comme avec live()

Il arrive souvent dans son code javascript d'utiliser des plugins jquery qui s'utilisent de cette manière :

$('.ma_classe').monPlugin();

L'inconvénient c'est qu'avec certains plugins qui n'utilisent pas "live" ou bien "delegate" ou "on" de la 'mauvaise manière' <- sous entendez qui ne fonctionne pas avec des éléments que l'on rajoute au DOM. (Voir http://api.jquery.com/live/), nous sommes obligé de rajouter le script après l'ajout ou la requête ajax.

C'est là qu'intervient le plugin livequery (lien en bas) : voici comment transformer le script ci-dessus :

$('.ma_classe').livequery(function(){

  $(this).monPlugin();

});

L'avantage ici c'est que si l'on rajoute des éléments avec la class ma_classe en AJAX ou bien simplement en javascript, il n'y aura plus besoin de rappeller le bout de code $('.ma_classe').monPlugin(); . L'avantage de cette méthode c'est que l'on a pas besoin de lire le source du plugin pour voir quels évènement sont concernés car avec "on" et "live" le paramètre event(s) est obligatoire !

Alors pratique non ?

Le plugin livequery : https://github.com/brandonaaron/livequery

Source : http://stackoverflow.com/questions/5766086/using-jquery-plugins-with-live

jeudi 13 octobre 2011

Ubuntu 11.10 : une copie web du système d'exploitation

Aujourd'hui c'est aussi la sortie d'ubuntu 11.10. Ubuntu a lancé un site internet qui copie l'interface de ubuntu 11.10 : voici la page web quelques petites choses fonctionne bien shotwell, firefox. Et donc le tout en html css js. Pour tester c'est ici : http://www.ubuntu.com/tour/#surf-the-web

vendredi 16 septembre 2011

Un plugin jquery pour faire un background animé - MyFloatingBg

MyFloatingBg est un plugin jquery qui permet de faire bougé son background. Cela peut-être pratique et si c'est bien travaillé ça peut-être très joli. Bon mais faut pas en abusé hein !

Bon et puis c'est sous licence MIT !

Demo : http://www.kfsoft.info/MyFloatingBg/demo.php

Téléchargement : http://www.kfsoft.info/MyFloatingBg/jquery.MyFloatingBg.js

mardi 15 février 2011

Plugin jquery Isotope : le quicksand ^ 10

Vous connaissez Quicksand ? Mais si le plugin jquery qui affiche / masque / ordonne des éléments de manière super classe. (http://razorjack.net/quicksand/ (Licence MIT)).

Et bien voici le plugin jquery Isotope (http://isotope.metafizzy.co/). Il fait la même chose mais avec des fonctions d'optimisation de place

Petit bémol tout de même il n'est gratuit que pour une utilisation non commerciale.

vendredi 6 août 2010

Unpack et Unminify javascript

html css Il arrive qu'on ai besoin de lire le code source d'un script minifié sur un site internet ! Et bien il existe un outil en ligne qui fait ça bien :

http://jsbeautifier.org/

Vous copiez / collez le source minifié du script et jsbeautifier le remet en forme pour vous permettre de le lire ! Sympa non ?