background preloader

Inclure jQuery de manière optimisée

Inclure jQuery de manière optimisée
jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici, en détails, quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement. Appel classique à la librairie (fichier téléchargé) De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.x.x.min.js. Fichier et compression Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Voyez les différences entre la version non minifiée et la version minifiée. Performances au chargement Vous obtiendrez ainsi : <! <! Démo

http://www.alsacreations.com/astuce/lire/916-librairie-javascript-jquery-script.html

Related:  JavaScript

API Google Maps JavaScript version 3 Tutoriels et exemples en Français Référence Google Maps API V3 Retrouvez les 3 versions de l'API Google Maps JavaScript V3 traduites en Français : Référence Google Maps API V3 expérimentale (Experimental Version)Référence Google Maps API V3 production (Release Version)Référence Google Maps API V3 archivée (Frozen Version) Comment insérer des vidéos Youtube HTML5 sur votre site ? - Framasoft Framafox Lorsqu'on insère une vidéo Youtube dans une page web, on se retrouve avec un super player flash et notre vidéo en FLV qui se joue dedans. Impecc... Pour faire ça, il suffit simplement de copier coller le code qui se trouve sous la vidéo youtube. Ce qui donne un truc comme ça : Bon, ça on le savait tous. Rien de nouveau sous le soleil...

Un menu déroulant adapté aux mobiles La percée des terminaux mobiles tels que smartphones et tablettes impose de nouvelles règles en terme d'ergonomie et de webdesign spécifiques aux écrans de taille réduite. Les menus de navigation déroulants posent de nombreux problèmes d'accessibilité dans des conditions d'usage "classique", et ceux-ci se voient décuplés dans le monde du Web mobile où la navigation verticale est à privilégier (l'affichage sous forme de colonnes côte à côte doit être prohibé sur de petits écrans). La technologie CSS3 des Media Queries va permettre de réaliser une intégration adaptée aux écrans de petite taille en détectant deux largeurs que nous aurons définies par avance, en amont du projet (ici "moins de 1000 pixels" et "moins de 540 pixels"). En action ! Voici ci-dessous les captures d'écran des différents états du menu selon les tailles d'écran respectives. Menu "classique" (écrans de plus de 1000px) :

Créer des menus simples en CSS Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dynamisez vos sites web avec Javascript ! - Javascript Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web !

Astuces d'Absolacom » Gestionnaire de fichier en ligne: AjaxBrow Dans la série des test sur les gestionnaires de fichier en ligne, voici ajaxbrowser (à ne pas confondre avec AjaxPlorer qui arrive dans le prochain test) Ajax dans le nom? Je m’attends à de la rapidité et de l’ergonomie. L’installation Simplicime. Il suffit de télécharger le fichier php d’installation, de le copier dans le répertoire voulu, de donner les droits à www-data (classique) et de lancer son navigateur sur le fichier d’installation. Menu déroulant HTML/CSS dropdown menu - Media queries Description Menu média queries contenant un sous niveau. Utilisation des média queries pour réussir une intégration sur smartphone. Accessible avec la touche tab, si javascript est activé.

Introduction - Référence du DOM Gecko « Référence du DOM Cette section consiste en une brève introduction conceptuelle au DOM : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents HTML et XML, la manière d'y accéder, et comment cette API présente les informations de référence et exemples. Présentation du DOM Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et une manière d'accéder à cette structure depuis des programmes, permettant à ceux-ci de modifier la structure du document, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes.

Sélectionner les frères d'un élément en CSS Également appelés les "combinateurs d'adjacence", ces sélecteurs avancés permettent de cibler des éléments proches d'un autre élément. Il existe à l'heure actuelle deux sélecteurs de ce type : le combinateur d'adjacence directe, et le combinateur d'adjance indirecte. Le sélecteur d'adjacence directe Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs.

Comment utiliser la dernière version de jQuery dans WordPress ? Si vous souhaitez utiliser la dernière version de jQuery en lieu et place de la version imposée dans WordPress dans la partie publique (thème) et admin, ajoutez ces lignes dans le fichier functions.php de votre thème (le créer au besoin) : wp_deregister_script('jquery'); wp_register_script('jquery',' false, ''); wp_enqueue_script('jquery'); L'adresse mentionnée est celle hébergée par le service Google APIs, qui propose de fournir les librairies JavaScript les plus courantes sur des serveurs publics et performants. Dans l'exemple présent, la version est indiquée par la chaîne /1/ qui sélectionnera automatiquement la dernière version de la branche 1.x.

Related: