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
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 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é
De la géométrie avec CSS Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois. Ici, rien de bien compliqué, il suffit de définir une largeur et une hauteur identiques pour chaque côté de notre élément HTML. Le principe est le même que le carré sauf que la largeur est plus grande que la hauteur (ou l'inverse selon l'effet désiré). Le rond est obtenu grâce à la propriété border-radius sur un élément carré. J'ai appris récemment que l'on pouvait donner deux valeurs au border-radius équivalant à l'arrondi de départ et l'arrondi d'arrivée d'un coin de bordure. Par exemple :
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