Coding Projects – Work Wild Web @ b2bWeb.fr

Browsing ‘Coding Projects’ Category

jQuery scrollView : Viewport scroll and screen vertical helper

In Coding Projects,Molokoloco | 18 May 2013 | Laisser un commentaire

Visual helper while scrolling web page. Draw an indicator providing user with infos on the current viewport while scrolling. “One view for each screen that user need to scroll to get to the bottom of the HTML view” User can also click to directly go to the corresponding screen in the viewport.

It include :

$.scrollToMe();
$.scrollScreen();
+ Find scrollElement
+ getHash() || setHash(), …

Nb : It seem to have a bug on Firefox 21, with right fixed positioning of “.scrollScreen” even if the plugin don’t touch this properties. In the end, plugin manipulate the left to emulate right:0; …

Made an other (older) plugin here :

http://jsfiddle.net/molokoloco/Atj8Z/

A noter aussi…

Best jQuery Scrollbar Plugins to Scroll Your Websites Contents :
http://www.dezignmatterz.com/best-jquery-scrollbar-plugins-to-scroll-your-websites-contents/

Tags : CSS3, HTML5, Interface, JavaScript, jQuery, Plugin, UI

jQuery Colonize plugin : In-between titles multicols paragraphs with CSS3

In Coding Projects,Molokoloco | 9 May 2013 | Laisser un commentaire

#jQuery colonize, traverse DOM tree to find paragraphs next to each chapter, extract them and wrap them within a DIV.

Theses DIVs allow the control of multicols configuration via #CSS3.

The plugin take care to vertically split colums if it’s total height exceed viewport height. We can also include or exclude some TAGs of the selection…

The configuration can be with CSS colWidth or CSS colCount.
You can see a real example here, My Book Readr : Etienne Chouard.

jQuery.colonize.js (V0.8.3)

Live fiddle demo :
http://jsfiddle.net/molokoloco/Ra288/
Github sources :
https://github.com/molokoloco/jquery.plugins/jquery.colonize.js
https://github.com/molokoloco/jquery.plugins/jquery.colonize.min.js
https://github.com/molokoloco/jquery.plugins/jquery.colonize.css

… or the new version, “BootStrapped” plugin…

jQuery.colonizr.js (V0.9.0)

Live fiddle demo :
http://jsfiddle.net/molokoloco/FK7xr/
Github sources :
https://github.com/molokoloco/jquery.plugins/jquery.colonizr.js
https://github.com/molokoloco/jquery.plugins/jquery.colonizr.min.js
https://github.com/molokoloco/jquery.plugins/jquery.colonizr.css

Feel free to contribute via comments or Github :)

Tags : CSS3, HTML5, Interface, JavaScript, jQuery, Plugin, UI

Je lance la #GuezNet sur mon blog !

In Coding Projects,Molokoloco | 6 Apr 2013 | Laisser un commentaire

3/4 ans que je fais cela en newsletter… et ce WE je me décide enfin à le publier online…

La GuezNet c’est une compilation, environ une fois par semaine, des infos que je vois passer sur les interwebs… (Twitter, G+, RSS, Newsletters, Sites, Amis, …etc)

Les news du WEB ! #Coding #Tendances #Telco & #Internet

Un condensé de l’actu à ne pas louper, autour de l’Internet, des Interfaces utilisateurs, et des nouvelles technos…

Pour me faire pardonner, je viens d’en retro-publier une dizaine. Les prochaines seront éditées directement sur ce blog en live ^^

Keep Connected ;)
+++

PS : Je ne décline aucune responsabilité de certains points de vu pro-JavaScript et/ou pro-openSource ^^

Tags : GuezNet

Dynamisez vos pages web avec jQuery.boxFx.js

In Coding Projects,Molokoloco | 3 Jun 2012 | Laisser un commentaire

Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^

Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…

Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^

Le principe et de 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. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!

Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.

Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)

Au fond, le plugin peut s’utiliser de toutes les manières :

Créer des éléments ou utiliser des collections existantes
Gérer les transitions, des images-clés (keyframes) et s’occuper de la compatibilité entre les navigateurs
Créez des animations, pleines de graphisme ou seulement automatiser l’insertion DOM
Gérer en masse les propriétés CSS de l’animations, ou régler finement sur la base de l’index d’élément
Appliquer des “effets” sur tous les éléments et les gérer dans le temps
Associer des données JSON (ou pas!), et se servir d’un template dynamique

(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)

Rien ne vaut une démo… donc :

Démo officielle : http://molokoloco.github.com/jQuery.boxFx/
“Live” démo sur JSFiddle : http://jsfiddle.net/molokoloco/sBqWq/
Toutes les sources sur Github : https://github.com/molokoloco/jQuery.boxFx/
Le script principal commenté : https://github.com/molokoloco/jQuery.boxFx/blob/master/js/jquery.boxFx.js

Voici un exemple concret pour votre site :

$emitter1 = $('div#emitterZone1').boxFx({
	seeds             : '<div>N°{id} - {title}</div>',
	data              : [
            {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'},
            {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'}
        ],
	effect            : '',
	newAtTop          : true,
	stopAtEnd         : 'detach',
	delay             : 4000,
	maxSeeds          : 10,
	emitterRadius     : 0, 
	styles            : {},
	keyframes         : [{
		duration         : '24000ms',
		timingFunction   : 'linear',
		iterationCount   : '1',
		direction        : 'normal',
		steps            : [{
				step: '0%',
				opacity: .7,
				transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) 
			}, {
				step: '30%',
				opacity: 0
			}, {
				step: '70%',
				opacity: 0
			}, {
				step: '100%',
				opacity: .7,
				transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; }
		}]
	}]
});
 
$('a#stop').click(function() { $emitter1.trigger('stop'); });

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

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

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

3 pages

Browsing ‘Coding Projects’ Category

jQuery scrollView : Viewport scroll and screen vertical helper

jQuery Colonize plugin : In-between titles multicols paragraphs with CSS3

jQuery.colonize.js (V0.8.3)

jQuery.colonizr.js (V0.9.0)

Je lance la #GuezNet sur mon blog !

Dynamisez vos pages web avec jQuery.boxFx.js

BeeLine Reader : Lire plus vite et reduire les erreurs

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 recents posts

Home made artworks

Tags

Code tooltips updates

Github sources activities

Molokoloco's JS fiddles

Recent Comments