Evenement : la souris

DOM : khan

DOM versus Jquery

Voici encore un exemple de comparaison du code jquery DOM

DOM	Jquery
var newItem = document.createElement("li"); newItem.className+="new"; var textnode = document.createTextNode("Water"); newItem.appendChild(textnode); var list = document.getElementById("myList"); list.insertBefore(newItem, list.childNodes[0]);	$("<li>Water</li>" ).insertBefore( "#List li:first" ).addClass("new");

 

className : en action

Voici en DOM une façon simple d'ajouter une classe à un élément.
document.body.className="nameClass";

exemples

Pour ajouter deux classes
document.body.className="class1  class2";



Ajouter une classe aux classes existantes
document.body.className += " newClass";


Notez la présence de la fonction classList

Event : en action

Exemple d'utilisation de l'événement window.onscroll 

 

How to do

 



http://html5-demos.appspot.com/static/css/sticky.html

khan academy

W3C SCHOOL : vidéo

https://www.youtube.com/watch?v=kowh52NmZis

date : en action

Hier	Aujourd'hui	Demain
var a = new Date();	var h = new Date(); h.setDate(a.getDate()-1)	var d = new Date(); d.setDate(d.getDate()+1)

Création de son outil de développement

notion de grille
Mise en place de la grille
Les outils existants

Animation : étude de cas

Flex : en action

Voici un exemple de la force de Flex :

sur l'exemple suivant décoché le commentaire sur le body pour le rendre flexible.

-> fichier
Voici la source du code. Vous découvrirez comment définir par programmation la taille des colonnes.
 http://www.the-haystack.com/2015/03/05/conditional-multi-column-sublists/

last-child et last-of-type

Nous allons revenir sur plusieurs sélecteurs.

First-child

Le comportement est celui attendu.

First-of-type

Pour comprendre la différence entre ces deux sélecteurs, il suffirait d'introduire une balise </br> pour modifier l’arborescence.

Attention au comportement de JSbin.

Il s’avère nécessaire de lancer  Run with JS  pour obtenir le résultat attendu.

Besoin d'icônes pur CSS : une seule référence

http://www.uiplayground.in/css3-icons/