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
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
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é
Identité et citoyenneté numérique — Enseigner avec le numérique Le site web Pédagogie numérique en action est un espace qui « a pour objet de faciliter les initiatives mises en œuvre pour assurer la réussite du virage au 21e siècle » notamment dans le domaine de l’éducation à l’ère numérique. Il s’adresse plus particulièrement aux écoles et aux conseils scolaires de langue française de l’Ontario. Outre les documents de fondement et autres écrits de référence, le site met tout particulièrement en valeur le jeu éducatif iCN, identité et citoyenneté numérique. Disponible en version primaire (élèves de la 3e à la 6e année) et en version secondaire (élèves de la 7e à la 10e année), cet outil ludique et éducatif interactif s'organise en 7 modules ayant trait au monde du numérique : données, identité, littératie, transactions, éthique, dépendance et discrimination. En complément, trois séries d’activités pédagogiques accompagnant ces 2 modules iCN sont mis à la disposition sur le site TacTIC du CFORP. Sources Réseaux et médias sociaux
Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web