olivier evrard

*********************
*********************

Cours n°2.3

jQuery (.scrollTop)

  1. Téléchargez le dossier de départ
  2. Analysez l’exemple fourni
  3. Travaillez l’image dans Photoshop (gif) puis exportez
  4. Importez textes et image dans l’HTML
  5. Codez le CSS pour être le plus proche possible de l’objectif
  6. Have fun !

Dossier de départ

Demandez la clé usb du prof

Performances au chargement

Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :

  • de placer les appels aux librairies en fin de page avant </body>
  • de placer les appels aux feuilles de style CSS avant, dans la section <head> grâce au tag link
  • de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c’est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html) | source: Alsacréations

Exemple :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
 ...
 <script src="jquery.js"></script>
 <script src="mon_script.js"></script>
</body>

</html>

Autres fonctions jQuery

.fadeOut

Quand je clique sur « img », « img » disparait…

$(document).ready(function() {
   $("img").click(function() {      
$("img").fadeOut(700);       
 });
});

.css

Quand je clique sur « a », « body » change de background-color…

$(document).ready(function() {
   $("a").click(function() {      
$("body").css( "background-color", "#00FF00" );      
 });
});

.html

Quand je clique sur « a », le texte du « h1 » change…

$(document).ready(function() {
   $("a").click(function() {      
$("h1").html( "Bien joué !" );     
 });
});

*********************