La théorie par l'exemple

Pour commencer ce tutoriel, je vais vous expliquer le principe (simple) de l'effet que nous souhaitons réaliser et nous allons le tester sur un exemple.

Un élément défixé est un élément par défaut, positionné dans la page, qui bouge en même temps qu'elle, lorsque vous faites défiler celle-ci : il reste à la place qui est la sienne par rapport aux autres éléments.
Un élément fixé est un élément qui est positionné par rapport à la fenêtre de votre navigateur internet préféré. Que vous montiez ou descendiez dans la page, l'élément reste au même endroit sur votre écran.

Pour fixer un élément, on fait appel au CSS. C'est la propriété position qui, lorsqu'elle prend la valeur fixed, applique cet effet. Ainsi, on peux fixer un élément ayant la classe .fixe de la manière suivante :

Code:

.fixe {
  position: fixed;
}

A propos de position:

Une fois fixé, il faut positionner l'élément comme bon vous semble. C'est là qu'interviennent les propriétés top, left, right et bottom. Elles prennent comme valeur la distance que vous souhaitez placer entre votre élément et respectivement le haut, la gauche, la droite et le bas de votre écran.
Il va de soi qu'il est inutile de détailler les 4 propriétés, 2 suffisent amplement à positionner votre élément. Nous allons voir ça dans l'exemple qui suit.

Enfin, pour switcher entre les deux états (fixé/défixé) d'un élément lors d'un clic, il nous faut faire appel à un soupçon de javascript !

C'est ce que nous allons tester tout de suite !

Le CSS

Commençons par le CSS. Nous allons créer 2 éléments différents, que nous repérons avec les sélecteurs suivants :

1. Le premier définira notre élément exemple, nous utiliserons une div qui définit un élément bloc quelconque, repéré par l'identifiant #exemple.
   
2. Le second est une simple classe .fixe permettra de fixer tout élément qui comporte cette classe.

Code:

/* Design général de notre élément, pour le visualiser sur l'exemple */
div#exemple {
  background-color: red;
  width: 100px; /* largeur de l'élément */
  height: 100px; /* hauteur de l'élément */
  margin: 0; /* marge extérieure de l'élement */

  /* Position de l'élément sur la page lorsqu'il est fixé */
  top:0px;
  left:0px;
}

/* La partie intéressante pour fixer un élément */
.fixe {
  position: fixed;
}

Pour placer ces codes dans la feuille de style de votre forum, rendez-vous sur Panneau d'Administration > Affichage > Couleurs > Feuilles de style CSS.

Le Javascript

Nous allons utiliser certaines fonctionnalités qui dépendent de la librairie jQuery. Pas de panique, cette librairie (très puissante et très connue), qui nous met à disposition un certain nombre de fonctions, est incluse par défaut dans FA.

Ainsi, vous avez simplement à vous préoccuper d'installer le code suivant dans vos scripts : Panneau d'Administration > Modules > Gestion des codes javascript.

Code:

$(document).ready(function() {
    /* Element sur lequel on va appliquer l'effet - Modifiable */
    var element = 'div#exemple';

    /* Inutile de toucher au code ci-dessous */
    $(element).click(function() {
        if($(this).hasClass('fixe')) {
            $(this).removeClass('fixe');
        } else {
            $(this).addClass('fixe');
        }
    });
});

Pour ceux qui s'intéressent au code:

Tester l'effet

Nous allons enfin tester notre splendide effet. Pour cela il nous faut rajouter dans le HTML une div d'identifiant #exemple.

Pour ma part, je suis allé dans Panneau d'Administration > Affichage > Page d'Accueil > Généralités pour mettre dans le message d'accueil le code suivant :

Code:

<div id="exemple"></div>

Validez et testez à présent sur votre forum. En cliquant sur le carré rouge fraîchement créé, celui-ci doit aller se ficher en haut à gauche de votre écran et y rester. Cliquez à nouveau dessus pour le replacer où il était !

Voilà sur le principe, à présent, nous allons voir une mise en pratique qui peut être intéressante. Il nous faudra changer un chouïa le script JS pour ne plus avoir à cliquer sur l'élément mais sur un bouton extérieur afin de fixer/défixer notre élément, mais ne vous en faites pas, je fournis les codes complexes.

Application pratique - Barre de navigation

Nous allons donc mettre en pratique notre exemple pour créer une barre de navigation fixable/défixable sur votre forum. Si vous avez tout compris jusque là, ça ne devrait pas être bien plus complexe.



Vous l'aurez compris, il va nous falloir toucher à 3 choses :

1. Les templates afin d'y apporter les modifications sur le HTML : la structure du forum
   
2. Le CSS pour y placer notre style spécifique et définir l'apparence de nos éléments (fixé/défixé)
   
3. Le JS pour passer dynamiquement d'un élément fixé à un élément défixé lors d'un événement (le clic).

Petite amélioration cependant, nous allons cette fois rajouter un bouton au bout de la barre de navigation afin de fixer/défixer celle-ci. En effet, ce sera toujours mieux d'éviter que l'effet ne se lance tout seul dès lors qu'on clique sur la barre de navigation (ce qui ne serait pas génial).

Le Template

Rendez-vous dans Panneau d'Administration > Affichage > Templates > Général et choisissez le template qui fait intervenir votre barre de navigation : overall_header.

Il nous faut repérer notre barre. Ce ne devrait pas être trop complexe quand on sait qu'il s'agit de repérer le mot clef suivant : {GENERATED_NAV_BAR}.

Vous devriez avoir quelque chose comme ça :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
   <tr>
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
   </tr>
</table>

Nous allons faire 2 choses ici :

1. Placer un identifiant sur la barre de navigation, afin de pouvoir la fixer par la suite. Nous l'appellerons fix-navbar pour qu'il soit explicite (bonne pratique) et unique (principe d'un identifiant)
   
2. Ajouter une cellule en bout de barre contenant une simple image. Nous lui mettrons un identifiant fix-control histoire d'y accéder rapidement par la suite également.

Ce qui nous donne, si vous avez tout suivi :

Code:

<table id="fix-navbar" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
   <tr>
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
      <td><img id='fix-control' src='' /></td>
   </tr>
</table>

Le CSS

Passons au style maintenant. Rendez-vous dans Panneau d'Administration > Affichage > Couleurs > Feuilles de style CSS.

Il s'agit ici de :

1. Créer une classe .fixe qui définira la position fixée de notre élément
   
2. Eventuellement styliser notre barre de navigation, si besoin.
   

Dans mon cas, le CSS est le suivant :

Code:

.fixe {
  position: fixed;    /* Fixe l'élément */

  /*
    Spécifique à mon forum d'exemple.
    Je rajoute une marge à gauche de 78px pour compenser 
    celle perdue lorsque la position passe en valeur fixed
  */
  margin-left: 78px;
}

#fix-navbar {
  /* A vous de styliser la barre comme bon vous semble, via l'identifiant que nous y avons placé ! */
  background-color: grey;    /* Je choisis de mettre un fond gris pour que vous puissiez voir l'exemple */
  bottom: 0;    /* Je choisis de fixer ma barre en bas de mon écran dans mon cas */
}

Normalement, ça ne nécessite pas plus d'explication et vous devriez être capable de placer seul la barre si vous avez suivi le tuto jusque là !

Le Javascript

Rendez-vous dans Panneau d'Administration > Modules > Gestion des codes Javascript.

Cette fois, nous allons modifier un chouïa le script pour :

1. Distinguer le bouton (sur lequel on clique) de l'élément à fixer (la barre toute entière)
   
2.  Changer également l'image du cadenas, en fonction de l'état (fixé ou non) de la barre.

Cela nous donne :

Code:

$(document).ready(function() {
    /* Variables modifiables */
    var element = '#fix-navbar';
    var control = '#fix-control';
    var iconFixe = 'http://upload.cssactif.com/image/97lock.png';
    var iconDefixe = 'http://upload.cssactif.com/image/18unlock.png';

    /* Inutile de modifier le code ci-dessous */
    $(control).attr('src',iconFixe);  /* Charge l'image par défaut du bouton */
    $(control).click(function() {
        if($(element).hasClass('fixe')) {
            $(control).attr('src',iconFixe);
            $(element).removeClass('fixe');
        } else {
            $(control).attr('src',iconDefixe);
            $(element).addClass('fixe');
        }
    });
});

Bien entendu, je vous laisse personnaliser les variables suivantes :

• element : il s'agit de l'identifiant de l'élément à fixer (ici l'identifiant de notre barre de navigation)
  
• control : il s'agit de l'identifiant de notre élément qui contrôle le changement d'état (ici l'identifiant de notre image-bouton)
  
• iconFixe : il s'agit de l'URL de l'image à cliquer pour fixer la barre (ici, cadenas fermé)
  
• iconDefixe : il s'agit de l'URL de l'image à cliquer pour défixer la barre (ici, cadenas ouvert)

Et voici, ça devrait fonctionner à présent


Pour terminer sur les mots de l'auteur d'origine de ce tutoriel :

James a écrit:

Je crois que vous avez maintenant tout.

Bonne continuation, James.