jQuery: The Write Less, Do More, JavaScript Library 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) :
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. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Remarquez l'identifiant placé sur la balise <ul>. Capture d'écran du résultat: On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>:
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
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é. 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. Le menu est accessible avec la touche tab. Média queries Médias utilisés...
Creative CSS3 Animation Menus Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: The CSS Example 1
jQuery API 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. La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur. Vous pouvez donc vous lâcher et l'utiliser dans vos intégrations. Syntaxe de base Pour cibler le frère d'un élément, nous allons avoir besoin du symbole +. element1 + element2 { } Ici les styles seront appliqués uniquement à element2 directement frère de element1. C'est un bon moyen de cibler un élément dans un cas particulier, comme un p situé juste après un titre, ou pour appliquer des styles à des éléments semblables, sauf le premier de la fratrie. Voir l'exemple Exemple
Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
7 jQuery Parallax and Scrolling Effect Plugins Parallax precisely is a variance in the actual position of any object that is seen beside different lines of sight. The word Parallax is derived from a Greek word, parallaxis which basically means alteration. This term is relatively a new trend in the world of web designing. You can use Parallax scrolling in order to create interesting web design and exciting 3D illusion. Parallax Slider – Responsive jQuery Plugin Parrallax Effect is powerful jQuery Plugin Sliders. Advertisement jQuery Scroll Path Scrollpath plugins define custom rotations, scroll paths and uses canvas syntax to draw arcs and lines. Static Background This scrolldeck.js demo page is built from the jQuery Parallax plugin demo. jParallax jParallax is another amazing plugin which turns nodes into absolutely positioned layers that move in response to the mouse. Stellar.js It is a jQuery plugin that provides parallax scrolling effects to any scrolling element. scrolldeck A jQuery plugin for making scrolling presentation decks.