Animations en jQuery - enrichissez vos pages web Voici venir le chapitre le plus fun de ce cours : les animations. jQuery propose par défaut une série de fonctions d'animation et de transition qui permettent d'animer des éléments du DOM. Les effets (effects) sont des animations prédéfinies, on en a déjà utilisé un dans les chapitres précédents : fadeOut, qui permet de faire disparaitre un élément avec un fondu. Il existe différents effets que je vous invite à tester : Tester/ressources/exemple/cours-jquery/ch4_exemple1.html Exemple 1 Quelques effets jQuery Les effets que vous avez vus ci-dessus sont simples et pratiques, mais on peut encore faire mieux avec jQuery et la fonction animate(). Cette fonction prend en paramètre un ensemble de propriétés CSS, et elle va se charger de faire une animation linéaire pour chacune de ces propriétés, entre leur état actuel, et l'état défini dans ses paramètres. Petit exemple : j'ai une div carré situé en haut à gauche de la page : Ici j'y ajoute une animation avec les propriétés CSS left et top. Exemple 2
Comment définir l’apparence de ses liens? CSS permet d'appliquer des styles différents aux liens suivant leur état: normal, visité, survolé, cliqué. Pour cela, on utilise les pseudo-classes suivantes: :link (état par défaut); :visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur); :hover (état survolé); :focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans); :active (état cliqué). (Notons que si :link et :visited sont réservés aux liens (élément HTML a), les pseudo-classes :hover, :focus et :active peuvent s'appliquer à d'autres éléments.) Ordre des déclarations Attention à l'ordre des déclarations! Il faut donc définir une priorité pour savoir quel état doit s'appliquer. L'ordre classique (par priorité croissante) est le suivant: link < visited < hover < focus < active. On peut encore simplifier en se passant de la pseudo-classe :link.
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
Cheat Sheet Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c
Comparing Angular, Aurelia and React: Is there a next-gen JS framework that rules them all? Angular is by far the most popular Javascript framework on the market. With the developer preview of Angular 2.0 now available, we decided to check how the developer preview of the framework compares to its main competitors, React and Aurelia. Does Angular remain king, or will one of the others take its place on the throne? The main reason for Angular's popularity is that it's quite easy to create a robust single page app. As such, Angular has proven to be a refreshing alternative to other frameworks from the 'jQuery era', which didn't advocate a clean division between logic (JS), representation (HTML DOM) and layout (CSS). For starters, getting to know Angular may take some time. Secondly, you may run into performance issues because of a high number of watches, filters, a complex DOM structure and so on. Angular was initially released in 2009. If HTML5 and ES6 are all that jazz, do we still need a framework that seamlessly 'glues' together all of the spare parts? Angular 2.0 React Aurelia
Cacher/Afficher un div avec du "style" ! [ Scripts des membres ] De ridertahiti - le 01-07-2010 modification pour cacher les autre div avant d'ouvrir le div cliqué moi j'ai mis comme argument sur ma fonction (lien, taille,image) image c'est l'image que je clique comme j'ai fait plusieurs déroulement function Suite(lien,taille,image){ if(image == 1) { var objet = document.getElementById('popup'); var objetold = document.getElementById('popup2'); if(objetold.style.display == "block"){ objetold.style.overflow = 'hidden'; objetold.style.display = "none"; objetold.style.height = "0"; } } if(image == 2) { var objet = document.getElementById('popup2'); var objetold = document.getElementById('popup'); if(objetold.style.display == "block"){ objetold.style.overflow = 'hidden'; objetold.style.display = "none"; objetold.style.height = "0"; } if(objet.style.display == "none" || ! var hFinal = taille; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !) objet.style.height = hActuel + 'px'; timer = setInterval(fct,40); //Toute les 40 ms
Modèles de menus CSS Voici des modèles de menus de sites web réalisés en feuilles de styles CSS sans tableaux. Structure des menus Les menus sont structurés sous forme de listes : listes non ordonnées (ul, li) ou listes de définition (dl, dt, dd) pour les menus déroulants ou menus spéciaux avec titres et sous-parties. Vous êtes invités à voir la source HTML des menus avec un clic droit / "afficher source". Normes et Standards Tous les menus de la liste sont conformes aux Standards de langage actuel (XHTML Strict) tels qu'ils sont définis par le W3C. L'ensemble des menus est compatible avec la plupart des navigateurs internet respectant les Standards. Galerie de menus CSS : Horizontal simple 1 Vertical simple 1 Puces 1 Boutons 1 Graphique 1 : Médiéval Graphique 2 : Expérimental Graphique 3 : Portrait Graphique 4 : Smileys Graphique 5 : Coquelicots Graphique 6 : Minou Graphique 7 : Indéfinissable ! Menu Graphique 8 : Venise Menu Graphique 9 : Kitsch
Exemple de menu fixe en CSS solution avec "padding-top" Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page. Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames". Cette page a été testée et s'affiche correctement sur : Emmet Documentation A Real-World Comparison of Front-End Frameworks with Benchmarks by Jacek Schae UPDATE: There is a newer version of this article A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)This article is a refresh of A Real-World Comparison of Front-End Frameworks with Benchmarks from December 2017.medium.freecodecamp.org Over the last couple of years we have seen an explosion of front-end frameworks. First of all, to make a meaningful comparison we need a few things: Real World App - Something more than a “todo”. So how do we get such a project? Now we have a baseline spec, we need a standard set of tests/metrics to compare them. Performance. At the time of writing (Dec 2017) the RealWorld project is available in the following frameworks: Metric #1: Performance First meaningful paint test with Lighthouse Audit that ships with Chrome. The sooner you paint, the better the experience for the person who is using the App. Metric #2: Size Transfer size is from the Chrome network tab. Smaller file = faster download and less to parse. Conclusion
Leçon 7: L'identification et le regroupement d'éléments (class et id) Parfois, on veut appliquer un style spécial à un élément ou à un groupe d'éléments particuliers. Dans cette leçon, nous étudierons comment utiliser les attributs class et id pour définir les propriétés d'éléments sélectionnés. Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Le regroupement d'éléments dans une classe Supposons que nous ayons deux listes de liens vers les différents cépages utilisés pour des vins blancs et des vins rouges. <p>Cépages de vins blancs :</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul><p>Cépages de vins rouges :</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul> Afficher un exemple Pour y parvenir, nous répartissons les liens en deux catégories. Résumé