jQuery – Work Wild Web @ b2bWeb.fr

Posts Tagged ‘jQuery’

BeeLine Reader : Lire plus vite et reduire les erreurs

In Coding Projects,Molokoloco | 13 Dec 2011 | Laisser un commentaire

Il y a quelque temps, J’ai vu passer un plugin très intéressant nommé “Beeline“.
Son but et d’aider à lire plus rapidement en accompagnant l’oeil, grâce a un dégradé sur le texte qui évite de se perdre en fin de ligne.

Oui c’est mal de copier ! -mais je suis contre les brevets sur les logiciels- ;)

J’ai implémenté une première version (alpha !) avec mon ami jQuery.

Voici la démo en live sur JSfiddle. J’espère faire un test rapidement pour l’intégrer dans mon lecteur de livre…

jQuery $.textGradient() ReadR V0.2 – remix by @molokoloco 2011

“Save Time. Save Your Eyes. Read With BeeLine.”
Original idea from http://beelinereader.com

Use “jQuery.xColor.js” plugin for funny colors !
http://www.xarg.org/project/jquery-color-plugin-xcolor/

Tags : HTML, Interface, JavaScript, jQuery, Media, Plugin, UI

Paris JS 13 – Readr.js (So cute ! I’ve made a talk)

In Molokoloco | 7 Dec 2011 | Laisser un commentaire

Merci à @bobylito qui vient de mettre les vidéos (du live) en ligne sur Dailymotion.

On trouve entre autre ma présentation sur readr.js . Mais aussi plein de super autres sujets (http://www.dailymotion.com/ParisJS #ParisJS)

Ça fait drôle de se voir en vidéo, et ça fait drôle de parler devant beaucoup de gens avec plein de lumière dans les yeux :)

ReadR.JS by Julien Guézennec (@molokoloco) – ParisJS 13

Tags : HTML5, Interface, JavaScript, jQuery, Molokoloco, Multimedia, Open Source, UI, WebApp

jQuery.ReadR.js – Slides pour la conf #ParisJS 13

In Coding Projects,Molokoloco | 1 Dec 2011 | Laisser un commentaire

“My Book ReadR” La présentation que j’ai faite hier soir à la conférence #ParisJS 13 (parisjs.org).

http://www.b2bweb.fr/bonus/my-book-readr/ (Slides)
https://github.com/molokoloco/My-Book-ReadR/ (Code)
http://www.dailymotion.com/video/xmt4wi_paris-js-13-readr-js_tech [Update] (Vidéo du talk)

Tags : HTML5, Interface, JavaScript, jQuery, Multimedia, Open Source, UI, WebApp

Emitter Sprites/Particules factory with jQuery & CSS3

In Coding Projects,Molokoloco | 23 Oct 2011 | Laisser un commentaire

[UPDATE : Projet en cours de refonte ici : https://github.com/molokoloco/jQuery.boxFx]

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS (Sans canvas)…

C’est un plugin léger et hyper-customisable, son principe et de (re)générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM.

Le plugin applique quasi immédiatement les propriétés CSS de fin, et, au bout d’un certain temps, recycle l’élément : L’animation n’est pas faite avec jQuery $.animate() mais grâce aux propriétés CSS3 de transition, afin de bénéficier de l’accélération matériel (GPU)

Live Demo V0.7 : http://jsfiddle.net/molokoloco/aqfsC/
Plain demo : http://www.b2bweb.fr/framework/jquery.emitter/jquery.emitter.html
Github repository : https://github.com/molokoloco/jquery.emitter
Cloud9ide editor : http://cloud9ide.com/molokoloco/jquery_emitter

En arrière plan, le plugin contient quelques méthodes qui permettent aux propriétés “cssFrom” et “cssTo” de supporter automatiquement l’ajout du “browser prefix” :

Fix and apply styles on element with correct browsers prefix
$(e).crossCss({borderRadius:’10px’}) >>> $(e).css({WebkitBorderRadius:’10px’})
Use Modernizer : https://github.com/Modernizr/Modernizr/blob/master/modernizr.js
Modernizr.prefixed(“borderRadius”); // e.g FF3.6 ‘MozBorderRadius’, FF4 ‘borderRadius’

$.fn.crossCss = function(css) {
	return this.each(function() {
		var $this = $(this);
		if (typeof css != 'object') return $this;
		for (var p in css)
			if (Modernizr.prefixed(p))
				css[Modernizr.prefixed(p)] = css[p];
		return $this.css(css);
	 });
};

Support cross-browser : Transition, borderRadius, borderImage, maskImage, Transform, boxShadow, etc

Le plugin écoute (bind) plusieurs événement via des méthodes publiques : start, stop, update, …
Exemple d’utilisation :

// Permet de mettre à jour, depuis n'importe quelle fonction, une ou des propriétés de l'émetteur
$emitter1.trigger('update', [{emitterRadius:16, rate:0}]);

Il envois (trigger) un évènement à chaque emission de particule (Cf. source) :

// Ecouter si un nouveau sprite à été émis
$emitter1.bind('emit', function(e, $sprite) { 
    $sprite.html('Ok'); // On modifie en live le contenu
});

Si la valeur “options.rate” est mise à Zéro, le plugin utilise la fonction “requestAnimationFrame()”, à la place de “setTimeout()”, afin de maximiser les performance.

Pour le moment il fait des bulles dans l’espace… mais on peu tout imaginer, des tweets, une cascade verticale, des images, beaucoup beaucoup de possibilités… de la synchro audio/vidéo,… Par exemple tapez une lettre entre les deux balises “<div></div>”
C’est pour cela que le code est ouvert sur Github ! :)

J’ai fais ce que j’ai pu pour chasser les bugs, mais il doit bien en rester ^^, vos commentaires sont les bienvenus…

PS : Cette ancienne démo est rigolote aussi :
http://jsfiddle.net/molokoloco/wRS8A/

Tags : Code, CSS3, Framework, HTML5, JavaScript, jQuery, Molokoloco, Plugin

Blobby Particules Factory with jQuery & CSS3 V0.1

In Coding Projects,Molokoloco | 13 Oct 2011 | Laisser un commentaire

@paulrouget à lancé un défis a @GeoffreyDorne pour refaire la bannière de son blog :
https://twitter.com/#!/paulrouget/status/123672623761719296

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS plutot qu’en canvas, histoire de comparer les performances…

C’est un plugin très customisable avec un principe d’emitter de particules contenu dans une div.
L’animation n’est pas faite avec $.animate() mais grâce aux propriétés CSS3 de transition, ce qui permet de bénéficier de l’accélération matériel (GPU)

La petite démo est ici (V0.1) : http://jsfiddle.net/molokoloco/KASGN/
La grosse démo est ici (V0.3) : http://jsfiddle.net/molokoloco/NGm4M/

[Update ! New code here http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/]

Tags : CSS3, HTML5, jQuery, Molokoloco

Pixels polished jQuery & CSS3 analogue clock

In Coding Projects,Molokoloco | 8 Oct 2011 | Laisser un commentaire

Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…

La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/

La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

—

I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…

You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/

Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

GitHub sources :

Tags : CSS3, Framework, HTML5, jQuery, Molokoloco, Plugin

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

In Coding Projects,Molokoloco | 29 Aug 2011 | Laisser un commentaire

[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]

J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.

My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.

Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.

Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.

Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

Au menu de cette V1.12 :

Mise en page simple, claire et typographique, compatible HTML5
Création d’un sommaire automatique, à partir des balises de titres (Ex. <H4>) du texte
Le texte est redimensionnale en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)
Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
- Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
- Assouplissement du défillement par défaut de la molette, comportement progressif suivant la vitesse
- Le défilement des chapitres est indiqué dans le sommaire, fixe à l’écran
- Vignettes dynamiques indiquant le nombre “d’écrans” de la page (Nombre variant suivant l’affichage) et la position verticale actuelle
- Le fond de page est cliquable et peut glisser de haut en bas
- Flèches Haut/Bas pour défiler de page en page : Flèches Droite/Gauche pour défiler doucement
- Fonction de lecture automatique (La touche “Entrée” active un défilement vertical continu réglable)
Commentaires dynamiques
- Chaque paragraphe accueil un mini-forum Disqus. API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
- Possiblité de commenter le texte en utilisant les petites bulles sur la gauche
- Sélection du texte pour annoter, copier ou éditer
Edition WYSIWYG et HTML du texte, avec téléchargement d’une sauvegarde possible
Création de notes à partir d’extraits de texte et sauvegarde au format .txt
Défaut : Testé uniquement sous Firefox 6 et Chrome 14… (mais avec un code normalement générique !)

Utilisation du clavier

“Espace” ou “Entrée” : Lecture automatique
- Touches 1,2,3,…,9 pour régler la vitesse (5, valeur par défaut)
Flèches “Haut” et “Bas” : Défilement de la page
- Flèches “Gauche” et “Droite” : Défilement doux
“+” et “-” ~~ou “Ctrl” + “Molette de la souris“~~ : Ajustement de la taille du texte
… et “F11” pour le plein écran !

Exemple de code, créé pour l’application…

My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page

This start from the idea to design a page specially engineered to read a long book on the web…

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html
Infos : http://www.b2bweb.fr/molokoloco/my-book-readr-v1-12-html5-jquery-polished-page-as-a-book-reader/
Main Script : https://github.com/molokoloco/My-Book-ReadR/blob/master/js/jquery.readr.js
GIT Sources : https://github.com/molokoloco/My-Book-ReadR/

RESSOURCES :

BoilerPlate HTML5 starter pack : https://github.com/paulirish/html5-boilerplate
TinyMCE, JS WYSIWYG HTML editor (jQuery version) : http://tinymce.moxiecode.com
jQuery Waypoints v1.1 : https://github.com/imakewebthings/jquery-waypoints/
jQuery Mousewheel : http://adomas.org/javascript-mouse-wheel/
Copy to clipboard with ZeroClipboard.swf : http://www.steamdev.com/zclip/
DISCUS comment system API : http://docs.disqus.com/developers/universal/
Google Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/
Use Google Fonts API : http://www.google.com/webfonts/v2

[Appel] Ce projet manque de contributeurs sur GitHub !!!

Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…

Tags : Code, HTML5, jQuery, Media, Molokoloco, Multimedia, Open Source, Tool, WebApp

My Book ReadR V0.91

In Molokoloco | 14 Jul 2011 | Laisser un commentaire

[EDIT] New release here – Stay tuned !

I come again, this time with a jQuery “polished” HTML5 “page-as-a-book”

Paul Da Silva a écrit un livre « Piratons la démocratie », hélas distribué au format PDF. Il était difficile à lire à l’écran… J’ai donc récupéré le texte pour le mettre dans une page HTML(5!)…

Et voila !

Features :

Mise en page simple claire et typographique, compatible HTML5
Création d’un sommaire automatique, à partir des balises <H4> du texte
- Le défilement des chapitres est indiqué dans le sommaire fixe
Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
- Barre d’espace pour défiler de page en page (et les flèches Haut/Bas)
- Flèches Droite/Gauche pour Agrandir/Reduire le texte
- Un indicateur visuel sur l’article en cours de lecture pour stabiliser le défilement vertical
- Assouplissement du scrolling par défaut de la “mousewheel“
Chaque paragraphe est linkés avec un forum via l’API DISQUS, ce qui permet d’annoter le texte (API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
Défaut : codé en une nuit, uniquement testé Firefox 4 et Chrome 12 ;)

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html

GIT Sources : https://github.com/molokoloco/My-Book-ReadR

Tags : HTML5, jQuery, Molokoloco, Open Source, Politics

Molokoloco Coding Project

In Coding Projects,Molokoloco | 13 Jul 2011 | Laisser un commentaire

Fork me on GitHub

Blog code entry
My feed on b2bweb.fr/coding-project/

Keep updated with the RSS feed

Public Repositories
My code on GitHub/molokoloco

FastWebStart Une page de démarrage rapide et pratique !
FRAMEWORK Sharing some code…
And more…

Personnal codingsheets
My wiki on “Molokoloco Coding Project“

! New source code is now hosted on Github !

What you can find on my WIKI !

JS/php Class & Fonctions

PHP/js Class and Fonctions

Mixed LAMPX TIPS

Others Services Tips

And also my Virtual Admin PHP4/JS Prototype Framework, for managing CMS (2005~2008)

Julien Guézennec 2011 | molokoloco@gmail.com | http://www.b2bweb.fr …. Work definitely in progress…

Tags : Code, Framework, Interactive, Internet, JavaScript, jQuery, Molokoloco, PHP, Prototype, WebApp, WebSite

HTML5 3D effect caroussel presentation

In Coding Projects,Molokoloco | 11 Jul 2011 | 1 commentaire !

So i finally come with some polish for the RoundAbout script…

I’ve made a sort of jQuery presentation slider with it.

jQuery Presentation SlidR V1.2

Fluid HTML5 3D carousel effect slider for presentation
One page HTML setup with a simple ul > li list
Screen adaptative and layout polish, User zoom extended
Rocking fast in Chrome, do the job in Firefox

Sample code mixed by molokoloco – 2011

Demo : http://www.b2bweb.fr/bonus/jx/
Infos : http://www.b2bweb.fr/molokoloco/javascript-from-1998-to-2011/
Main Script : https://github.com/molokoloco/FRAMEWORK/blob/master/jx/js/index.js
GIT Sources : https://github.com/molokoloco/FRAMEWORK/blob/master/jx/

RESSOURCES :

Based on : RoundAbout for jQuery V1.1 http://fredhq.com/projects/roundabout/
Mixed with : jQuery 2d transform (animate) http://www.binpress.com/app/jquery-2d-transform/145 (Donate if you plan to use)
Use Google Fonts API : http://www.google.com/webfonts/v2
Goole Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/

I will try too improve again the script in the coming days…

Tags : HTML5, JavaScript, jQuery, Molokoloco, Open Source, parisJS

9 pages

Posts Tagged ‘jQuery’

BeeLine Reader : Lire plus vite et reduire les erreurs

Paris JS 13 – Readr.js (So cute ! I’ve made a talk)

jQuery.ReadR.js – Slides pour la conf #ParisJS 13

Emitter Sprites/Particules factory with jQuery & CSS3

Blobby Particules Factory with jQuery & CSS3 V0.1

Pixels polished jQuery & CSS3 analogue clock

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

Au menu de cette V1.12 :

Utilisation du clavier

RESSOURCES :

My Book ReadR V0.91

[EDIT] New release here – Stay tuned !

Features :

Molokoloco Coding Project

Blog code entry
My feed on b2bweb.fr/coding-project/

Public Repositories
My code on GitHub/molokoloco

Personnal codingsheets
My wiki on “Molokoloco Coding Project“

What you can find on my WIKI !

JS/php Class & Fonctions

PHP/js Class and Fonctions

Mixed LAMPX TIPS

Others Services Tips

HTML5 3D effect caroussel presentation

My recents posts

Home made artworks

Tags

Code tooltips updates

Github sources activities

Molokoloco's JS fiddles

Recent Comments

Posts Tagged ‘jQuery’

Au menu de cette V1.12 :

Utilisation du clavier

RESSOURCES :

Features :

Blog code entry My feed on b2bweb.fr/coding-project/

Public Repositories My code on GitHub/molokoloco

Personnal codingsheets My wiki on “Molokoloco Coding Project“

What you can find on my WIKI !

JS/php Class & Fonctions

PHP/js Class and Fonctions

Mixed LAMPX TIPS

Others Services Tips

Home made artworks

Recent Comments

Blog code entry
My feed on b2bweb.fr/coding-project/

Public Repositories
My code on GitHub/molokoloco

Personnal codingsheets
My wiki on “Molokoloco Coding Project“