JavaScript Function doc.Support LQDN banner

Posts Tagged ‘jQuery


Tumblr template release V0.0.4 – molokoloco 2013

 

A little simple Tumblr template, crafted with love, for displaying your photos with a beautiful mosaic optimized layout. Swipebox.js is for some touch scrolling on mobile device. Some nice CSS3 effects included too.

 

 

Enjoy !

 

http://sky-dumped.tumblr.com

“Dumping some clouds. Photos taken around Paris. Copyright @molokoloco 2013″

 

Concevoir un élément animé en 3D pour le multi-screen avec jQuery et CSS3.

 

La présentation que je fais pour #ParisJS est ici !

https://docs.google.com/document/d/1khVWiDeFj-KY2OhVqbZN_w1aef2iCC0yhhLEdj8p8yY/edit?usp=sharing

 

flatClock3d-google-doc

Voici une liste non-exhaustive de ressources JavaScript pour jQuery, extraite de mon cours 2013 (“Cours/TP jQuery, Julien Guézennec, 1ère année“)

 

Twitter Boostrap (incontournable) :

Un framework JS/CSS recouvrant les composants HTML et les plugins JS parmis les plus utilisés

 

 

jQuery UI :

 

  • jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
  • + jQuery UI Bootstrap theme, the incredible styles of Twitter Bootstrap, for jQuery UI

 

Plugins “individuel” de composants d’interface :

 

  • JQuery Slideshow/Carousel Plugin. Sources.
  • Swipebox, A touchable jQuery lightbox
  • Photobox A lightweight image gallery modal window script
  • Flux Slider Transitions Gallery, hardware accelerated image transitions using CSS3
  • Roundabout for jQuery, 3D effect carousel with sprites (Div) that turn around an axe
  • Reveal.js The HTML Presentation Framework
  • Supersized Full Screen Background/Slideshow jQuery Plugin
  • Isotope (Masonry V2), an exquisite jQuery plugin for magical layouts Reveal & hide items with filtering Re–order items with sorting Dynamic, intelligent layouts
  • jQuery simple Layout Demo that manage slidable and resizable, multi-pane
  • SlickGrid is a JavaScript grid/spreadsheet component
  • typeahead.js is a fast and fully-featured autocomplete library
  • Customizable boilerplate/template of a jQuery plugin, EDIT here !
  • A part :
    • jPlayer : HTML5 Audio & Video for jQuery
    • SoundManager 2: JavaScript Sound For The Web
    • ProcessingJS : using <canvas> for a drawing surface
    • … Three.js, Raphael.js, … etc

Plugins “helpers” sur certaines fonctionnalités

 

  • jQueryColor, this plugins installs a cssHook which allows jQuery’s .css() and .animate() to animate between two colors. The jQuery.Color() function allows you to create and manipulate color objects or string that are accepted by jQuery’s
  • jQuery Css3-like Easings for jQuery animations
  • jQuery.animate Overwrites $.fn.animate to use CSS 3 animations if possible. It takes the same arguments as the original $.fn.animate and will fall back to jQuery’s JavaScript animation if a CSS animation is not possible.
  • Alternatively, for somes simples animations, there is animate.css a bunch of cool, fun, and cross-browser CSS3 animations… or jQuery CSS 3 Finalize With this plugin you can write CSS without the vendor prefixes. The plugin takes care of it and will automatically add vendor prefixes.
  • jquery.transit Super-smooth CSS transitions & transformations for jQuery
  • Spritely is a jQuery plugin for creating dynamic character and background animation (Pan, Scroll, Sprite)
  • jQuery Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element with or without infinite scrolling enabled
  • jQuery Form validation Plugin
  • jQuery Sisyphus plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters
  • jQuery Remember stuff. A simple way to set/read/destroy cookies and localstorage
  • Scrollorama, The jQuery plugin for doing cool scrolly stuff
  • jQuery and WordPress plugins for infinite scroll
  • Moment.js Parse, validate, manipulate, and display dates in JavaScript
  • Keymaster Awesome handling of keyboard events
  • jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support…
  • Hand.js is a polyfill for supporting pointer events on every browser. Pretty simple: Register pointer events (pointerdown, pointerup, pointermove, etc..). It emulate click, touchstart, etc…
  • Pinch, Zoom, Scroll, iScroll-4 !
  • Grunt : The JavaScript Task Runner (Compiler)

 

Useful JavaScript Libraries and jQuery Plugins :

http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/

 

 

Online tools… (Via http://home.b2bweb.fr/#code)

 

 

Exemple de pages et codes source intéressants, à faire (suggestion forte :)

 

 

Sites de ressources…

 

 

A connaitre !

 

 

Comme le veut la tradition, je mets ici en open-source “copyleft” mes travaux :)

Cette année, j’ai fait pour la première fois des interventions sur HTML5/CSS3 et en particulier JavaScript et… jQuery pour deux écoles Parisiennes de web.

Voici le document de cours et de travaux pratiques (TP) “1ère année développement” qui m’a servi de support.

En ce sens, pour des débutants, le premier cours JS est dans l’unique but d’aborder jQuery par la suite.  Nous ne ferons donc qu’un rapide survol de l’ensemble des possibilités du langage.

  1. Historique du langage
  2. Les outils de développement
  3. La documentation
  4. Inter-agir en JavaScript
  5. Notions D.O.M. essentielles
  6. Notions Évènements
  7. Généralités sur le code JavaScript
  8. CONSOLE… live in your browser !
  9. Insérer des commentaires
  10. Déclaration de variables
  11. Les opérateurs
  12. Structures de contrôle
  13. Types d’objet
  14. Les types : tests et conversions
  15. Les fonctions “f()”
  16. Les méthodes et propriétés
  17. Plus loin avec les fonctions
  18. Les performances
  19. Remote debug your mobile
  20. …AUTRES RESSOURCES…
  21. Exercices complémentaires

Julien Guézennec, Cours/TP JavaScript, Licence Copyleft, 2014

 

cours-tp-javascript-doc

 

Comment’s are very welcome :)

C’est le second document de la série…

Comme le veut la tradition, je mets ici en open-source “copyleft” mes travaux :)

Cette année , j’ai fait pour la première fois des interventions sur HTML5/CSS3 et en particulier JavaScript et… jQuery pour deux écoles Parisiennes de web.

Cela m’a occupé des semaines et des WE pour rassembler les meilleures informations sur jQuery…

Voici le document de cours et de travaux pratiques (TP) “1ère année développement” qui m’a servi de support.

Le cours est illustré avec de nombreux exemples en liens sur JSfiddle. Pour la partie jQuery, cela représente environ une semaine de formation.

  • COURS
    • Les outils de développement
    • jQuery ???
    • jQuery -in practice-
    • Documentation jQuery
    • Cibler et modifier des éléments
    • -Parenthèse- “this” is out of control!
    • Evènements utilisateur et dynamiques
    • Animations (“Effects”)
    • Les Formulaires
    • Les requêtes “AJAX”
    • “Promise” et “Deferred” ?
    • Les bases d’un plugin jQuery
    • Plugins jQuery utiles
  • EXERCICES / TP
    • Navigation par onglet
    • Validation de formulaires
    • Concept de carrousel

 Julien Guézennec, Cours/TP jQuery, Licence Copyleft

 

cours tp jquery doc

 

Comment’s are very welcome :)

C’est le premier document de la série…

No image, no webGL, no native !

 

 

With this prototype,  on desktop browsers you can move around  the 3D CSS clock model with your mouse. On mobile browsers, rotation is triggered by the mobile orientation …

 

C’est un prototype (plus un Framework qu’un plugin) qui permet de tester les fonctionnalités sur différents types d’écrans et de navigateurs : Desktop, mobile, tablette…
La rotation 3D est pilotée par la souris (le “pointer”) ou simplement par l’orientation du mobile…
Crédit : The code to 3D rotate a CSS box was originally inspired from there : http://www.laplace2be.com/projects/phone/
(It’s seem “laplacetobe” have been inspired too by http://lenticular.attasi.com ;)
I have refactored the code following Twitter boostrap plugin guideline :
http://twitter.github.io/bootstrap/javascript.html

 

Avec le triptyque suivant pour la partie cross-browsers du projet :

 

[UPDATE]

La présentation que je fais pour #ParisJS est ici !

https://docs.google.com/document/d/1khVWiDeFj-KY2OhVqbZN_w1aef2iCC0yhhLEdj8p8yY/edit?usp=sharing

 

On my HTC One S with Chrome browser and Firefox browser…

 

2013-05-30_15-33-35  2013-05-30_15-37-26

 

Here on your PC…

 

 

Some others infos here :

http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/

 

jquery-scrollView-pluginVisual 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 :

 

A noter aussi…

#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 hereMy Book Readr : Etienne Chouard.

 

…the new “BootStrapped” plugin version …

 

jQuery.colonizr.js (V0.9.0)

 

Feel free to contribute via comments or Github :)

 

 

 

Real life example :

http://www.b2bweb.fr/molokoloco/etienne-chouard-centralite-du-tirage-au-sort-en-democratie/

skynet

 

 

QUOTES

 

The best way to predict the futur is to design it” @AnnePascual #next13 (@Rouffi)

 

Products with no data portability are “designed to delete your wedding photos” #realtimeconf (@jcoglan)

 

As a developer your job is to absorb complexity and expose simplicity.
End users should reap the benefits of your understanding.” (@dam)

 

“How long to develop this feature?”
– How long does it take to catch a fish?
“ehm…”
– Yes, about that long. (@freekl)

 

“Just realized that I am most productive when practicing anger driven software development” (


Lire la suite...

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 :

 

 

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'); });
10 pages