background preloader

Inclure la librairie jQuery de manière optimisée - Alsacréations

Inclure la librairie jQuery de manière optimisée - Alsacréations
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 Related:  JavaScript

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. Mais comment faire pour insérer une vidéo Youtube qui soit affichée en HTML5 (avec la balise vidéo) ou en flash selon le navigateur de vos visiteurs ? Si je prend par exemple l'url de la dernière bande annonce de TRON, voici ce que j'obtiens : J'adapte un peu l'url pour avoir ceci : C'est à dire pour avoir le player directement, qui sera soit du HTML5 si votre navigateur le supporte, soit du flash si votre browser est à la masse ;-) Ensuite, un petit coup de iFrame magique comme ceci : EDIT : Sur les conseils de Diti, j'ai testé avec une balise object et ça à l'air de le faire un peu plus dans les normes. [Source et photo]

jQuery: The Write Less, Do More, JavaScript Library 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) Carte Map Google Maps API V3 L'API Google Maps JavaScript version 3 vous permet de créer, modifier et personnaliser des cartes géographiques à l'aide de la classe google.maps.Map. Grâce aux caractéristiques de l'objet google.maps.MapOptions vous pouvez définir les propriétés d'une carte selon vos besoins : centrer la carte, définir le type de carte, activer ou désactiver le contrôle panoramique, etc. Ces cartes sont interactives. Enfin, différents types d'informations peuvent venir s'afficher sur la carte Google, comme par exemple un itinéraire, une image, un polygone, une polyline, une info bulle, un Street view, un fichier KML KMZ. Accéder à la liste de nos exemples et tutoriels : Carte Map c'est ici !

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) : Menu sur écrans réduits (automatiquement déployé) : Menu en version mobile (déployé sur une colonne) :

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. Pas bon: le fichier d’install reste en place à la fin de l’installation et pas de message disant de le supprimer. Les paramétrages Quand on se rend sur le site, il est demandé de créer un utilisateur d’administration. Pas bon: si quelqu’un tombe sur le site avant moi, il peut créer son admin et je n’ai pas accès à mon site. Les paramétrages s’ouvrent ensuite directement. Les réglages sont assez limités, autant pour les users que pour les droits. Utilisation Premier point négatif: pas de message quand on se trompe dans l’identifiant/mot de passe. Je me connecte en tant qu’utilisateur sans droits, un clic sur un fichier permet de modifier le nom du fichier (même s’il ne sera pas effectif), c’est assez perturbant. En vrac: Conclusion

SheepIt! - Form Cloning Jquery Plugin - Home Dynamic form cloning with Jquery What is SheepIt? SheepIt is a jQuery plugin that allows you to clone form elements dynamically. It is very useful to develop advanced forms that require the same type of load data multiple times. For example, if you have a form as follows: In which a person's data is loaded (Name, Surname and Telephone), sheepIt can transform the phone into a multiform field dynamic so as to able the user load more than one phone per person. In addition, for ease of use, sheepIt added advanced controls that allow the user to modify the form dynamically adding or removing clones. Features Configuration optionsLimit the number of forms, Form controls customizable, number of initial forms, delete confirmation etc. Requirements Jquery V1.4+ Download Basic demo Include required files Javascript code HTML template Result Download the complete example Download - example1.rar

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 ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture !

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é. Si JS n'est pas activé le menu prend sa forme dépliée. Télécharger cette exemple (3ko) Code Html <nav id="navigation" role="navigation"><ul id="menu" role="menubar"><li><a href="#"><span>Blog</span></a></li><li class="sub"><a href="#"><span>Features</span></a><ul><li><a href="#"><span>Sub cat 1</span></a></li><li><a href="#" class="current"><span>Sub cat 2</span></a></li><li><a href="#"><span>Sub cat 3</span></a></li></ul></li><li><a href="#" class="current"><span>Services</span></a></li><li class="sub"><a href="#"><span>Archives</span></a><ul><li><a href="#"><span>Sub 1</span></a></li><li><a href="#"><span>Sub 2</span></a></li></ul></li><li><a href="#"><span>Contact</span></a></li></ul></nav> Javascript Lorsque javascript est activé, alors un attribut class="drop" est ajouté à ul#menu. Média queries Contact

Firefox: 46 features you might not know about ✩ Mozilla Hacks – Ever since the release of Firefox 3 we’ve been doing a lot of work to add new capabilities for web developers. We thought it would be worth it to make a post that actually listed all of the features that we knew about and people might not know about. This contains everything that we’ve done over the last three releases or so, but calls out stuff that’s new in 3.6. Enjoy! @font-face Display online fonts (supports WOFF and TTF fonts) pointer-events Click through elements :-moz-locale-dir(ltr/rtl) Know if you are in a ltr or rtl context :indeterminate pseudo-class For “indeterminate” radio and checkboxes Media Queries Select CSS depending on the media (size, aspect-ratio, colors, orientation, resolution). has new classes to detect if you’re on a touch device. Structural pseudo-classes :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, … -moz-border-radius Rounded borders CSS Transforms Scale, translate, skew and rotate your elements CSS Gradients Use linear and radial gradients as backgrounds

jQuery API

Related: