Des trucs Vanilla

Vanilla = sans bibliothèque jQuery, juste avec du javascript moderne.

Trigger event

Pour déclencher un événement (click, scroll, resize, whatever!), une petite fonction cross-browser.

	function triggerEvent(el, type){
	   if ('createEvent' in document) {
			var e = document.createEvent('HTMLEvents');
			e.initEvent(type, false, true);
			el.dispatchEvent(e);
		}
		else {
			var e = document.createEventObject();
			e.eventType = type;
			el.fireEvent('on' + e.eventType, e);
		}
	}

A appeler ainsi :triggerEvent(elt, 'mousedown');

resizeEnd

Attendre la fin du resize avant de déclencher l'événement.

	window.addEventListener('resize', function() {
		if(this.resizeTO) clearTimeout(this.resizeTO);
		this.resizeTO = setTimeout(function() {
			triggerEvent(this, 'resizeEnd');
		}, 500);
	});
	window.addEventListener('resizeEnd', function() {
		// la fonction adéquate !
	});

scrollEnd

Attendre la fin du scroll avant de déclencher l'événement.

	window.addEventListener('scroll', function() {
		if(this.scrollTO) clearTimeout(this.scrollTO);
		this.scrollTO = setTimeout(function() {
			triggerEvent(this, 'scrollEnd'); 
		}, 500);
	});
	window.addEventListener('scrollEnd', function() {
		// la fonction adéquate !
	});

forEach pour NodeList

IE ne comprend pas la fonction forEach pour les listes d'éléments retournées avec document.querySelectorAll('.CLASSE').
Alors, il faut rajouter ce petit bout de code :

	if (!NodeList.prototype.forEach) {
		NodeList.prototype.forEach = Array.prototype.forEach;
	}

Et après, tout va bien, on peut gentiment utiliser forEach comme ceci :

	var liste = document.querySelectorAll('.CLASSE');
	liste.forEach(function (elt) {
		// le code
	}

forEach pour HTMLCollection

Les objets de type HTMLCollection sont des "array-like" mais la fonction forEach n'existe pas.
Alors, il faut rajouter ce petit bout de code :

	if (!HTMLCollection.prototype.forEach) {
		HTMLCollection.prototype.forEach = Array.prototype.forEach;
	}

Et après, tout va bien, on peut gentiment utiliser forEach comme ceci :

	var liste = document.querySelectorAll('.CLASSE').children;
	liste.forEach(function (elt) {
		// le code
	}

smoothScroll

Pour un smoothScroll animé lorsqu'on clique sur une ancre.
Par défaut, la vitesse de scroll est de 500ms mais on peut la modifier en ajoutant un data-speed à la balise <a>.
Scroller jusqu'à l'ancre #ancre

	var smoothScroll = function (anchor, duration) {
		// Calculate how far and how fast to scroll
		var headerH = document.getElementById('main-header').offsetHeight; //lorsqu'on a un header fixed
		var headerTop = document.getElementById('main-header').offsetTop; //lorsqu'on a un header fixed
		var startLocation = window.pageYOffset;
		var endLocation = anchor.getBoundingClientRect().top + startLocation - headerH - headerTop;
		var distance = endLocation - startLocation;
		var increments = distance/(duration/16);
		var checkAnimation;
		var w = window,
			d = document,
			e = d.documentElement,
			g = d.getElementsByTagName('body')[0];

		// Scroll the page by an increment, and check if it's time to stop
		var animateScroll = function () {
			window.scrollBy(0, increments);
			runAnimation = requestAnimationFrame(animateScroll);
			checkAnimation();
		};
		var travelled;
		var docHeight = Math.max(g.scrollHeight, e.scrollHeight, g.offsetHeight, e.offsetHeight, g.clientHeight, e.clientHeight);
		var windowHeight = w.innerHeight||e.clientHeight||g.clientHeight;
		// If scrolling down
		if ( increments >= 0 ) {
			// Stop animation when you reach the anchor OR the bottom of the page
			checkAnimation = function () {
				travelled = window.pageYOffset;
				if ( (travelled >= (endLocation - increments)) || ((windowHeight + travelled) >= docHeight) ) {
					console.log("stop scroll");
					cancelAnimationFrame(runAnimation);
					window.scrollTo(0, endLocation);
					scrollingFromClick = false;
				}
			};
		}
		// If scrolling up
		else {
			// Stop animation when you reach the anchor OR the top of the page
			checkAnimation = function () {
				travelled = window.pageYOffset;
				if ( travelled <= (endLocation + increments || 0) ) {
					cancelAnimationFrame(runAnimation);
					window.scrollTo(0, endLocation);
					scrollingFromClick = false;
				}
			};
		}
		// Loop the animation function
		runAnimation = requestAnimationFrame(animateScroll);
	};

Je suis l'ancre #ancre

Dimensions fenêtre et document

Quelques lignes de code cross-browser bien pratiques.
Récupération objets nécessaires (window, body, document, documentElement) :

	var w = window,
		d = document,
		e = d.documentElement,
		g = d.getElementsByTagName('body')[0];

Largeur et hauteur fenêtre :

	var windowWidth = w.innerWidth||e.clientWidth||g.clientWidth;
	var windowHeight = w.innerHeight||e.clientHeight||g.clientHeight;

Largeur et hauteur document :

	var docWidth = Math.max(g.scrollWidth, e.scrollWidth, g.offsetWidth, e.offsetWidth, g.clientWidth, e.clientWidth);
	var docHeight = Math.max(g.scrollHeight, e.scrollHeight, g.offsetHeight, e.offsetHeight, g.clientHeight, e.clientHeight);