background preloader

La méthode matchMedia ou les Media Queries pour JavaScript

La méthode matchMedia ou les Media Queries pour JavaScript
Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. La syntaxe de la requête média reste la même, ce qui est bien agréable. Ainsi, il sera possible de déclencher des actions complémentaires à ce que l'on peut déjà construire en CSS, que ce soit au chargement du document ou bien à n'importe quel moment à la demande en exécutant matchMedia(). <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Voir la démonstration n°2 Voir la démonstration n°3

http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Related:  JavaScriptResponsive Designjavascript

Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width Updated: There are some great options for managing Javascript when using CSS media queries in a responsive website. MediaCheck, jRespond, and Breakpoints.js all allow you to fire javascript functions based on customizable breakpoints in browser width. However, recently I was working on a small site with only a single function to be called at a smaller browser size, in conjunction with a media query, and thought I'd forgo one of these scripts and manage my change using a jQuery window width measurement. The Problem: jQuery $(window).width() and CSS3 Media Queries do not always match. Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style.

How to Create a Responsive Navigation One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages. There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second. However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

Easiest parallax in the world - Valdelama Almost no CSS and a couple of lines of Jquery are all you need for this extremely simple parallax demo. This is not really something I would recommend to use on a production site but it's a very good way to start to understand how you can write your own parallax. Warning: the demo is very basic and that's on purpose, the idea here is to really understand exactly what's going on so I have kept the code to an absolute minimum. This means that looking through the source code shouldn't be confusing for anyone. With the warning over check out the demo.

60+ Responsive Navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript) February 21, 2014 Lately, I have been really intrigued by responsive navigation bars. I did some extensive research and came up with a list of 60 plus responsive navigation bar tutorials, examples, and demos from all across the Internet. Here they are below: 1. Absolute Basic Mobile CSS Responsive Navigation Menu Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript - David Rousset - HTML5 & Gaming Technical Evangelist Une application HTML5 s’écrit bien entendu en JavaScript. Or, par rapport aux autres modèles de développements connus (clients lourds avec .NET/C++ ou même avec Silverlight), JavaScript dispose historiquement d’une limitation importante : toute son exécution s’effectue dans un seul et même thread. C’est plutôt ballot à l’heure des processeurs multi-cœurs comme les Core i5/i7 proposant jusqu’à 8 cœurs logiques voire même les derniers processeurs mobiles ARM double voire quadri-cœurs. Heureusement, nous allons voir qu’HTML5 nous propose une solution pour mieux exploiter ces nouvelles petites puces. Exposé du problème Cette limitation historique de JavaScript implique qu’un traitement important va bloquer la fenêtre principale d’affichage (la page web en cours d’utilisation).

Sticky Navigation, Without the Awkward Jump “Sticky navigation” describes a navigation bar which appears to stick to the top of the page once a user starts scrolling. It's a commonly used approach these days, as it gives users constant access to site navigation and fixes the site branding firmly in view at all times. Sometimes, however, when a navigation bar is made sticky, there's no allowance made for the fact that it's removed from the document flow, causing an awkward jump as the page content shunts upwards. Today we're going to use jQuery to implement our own sticky navigation, then we're going to use an alternative approach with the Waypoints.js plugin to give us the seamless effect we’re looking for. Follow me in my new course on Tuts+ as I walk through 15 JavaScript libraries, including Waypoint.js, demonstrating each one with clear examples and exercises.

A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges.

KinomaJS passe en open source Marvell vient d'annoncer le passage de son framework JavaScript KinomaJS en open source. KinomaJS est un framework JavaScript pour développer des applications dédiées à l'embarqué et aux objets connectés. KinomaJS, qui compte rien moins que 3 000 fichiers, est conçu pour être portable, pour avoir une faible empreinte mémoire et être peu gourmand en ressources CPU. C'est le désir d'accélérer la croissance de l'industrie de l'Internet de objets qui a motivé le passage de KinomaJS en open source, précise son éditeur Marvell.

5 jQuery.each() Function Examples OK, this is quite an extensive overview of the jQuery .each() function. This is one of jQuery’s most important and most used functions so that’s the reason why I’ve chosen to go into such detail about it and really get down and dirty about how to use it to it’s full useful potential! Firstly, what is jQuery .each() Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays and object properties. Un guide simple pour la typographie responsive : blog Scopart Le 14/12/2012 dans Développement Aujourd’hui je vous propose une traduction de l’article A simple guide to responsive typography de Cameron Chapman traitant d’un aspect peu abordé dans les techniques de responsive design. La plus grande partie des articles qui traitent du « responsive design » mettent l’accent sur 2 aspects : une grille fluide et flexible, des images fluides et flexibles.

Related: