Un menu pour mobile avec MODX

Avec la généralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille réduite de leur affichage lors de la conception de votre site. Un élément essentiel du design d’un site est le menu principal de navigation. Pour les terminaux mobiles, une des solutions est de remplacer le classique combo liste de liens non ordonnée (<ul>) + css par une liste déroulante (<select>) et du JavaScript.

Menu pour smartphone
Continuer la lecture

[jQuery] Une fenêtre modale

Bonjour à tous, aujourd’hui nous allons voir comment réaliser une fenêtre modale en jQuery.

Qu’est-ce que c’est ?

Wikipédia donne la définition suivante:

Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et de l’écran. Elle est en général associée à une question à laquelle il est impératif que l’utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit.

Comme une démonstration vaut mieux qu’un long discours, j’ai mis en place une page de test.

Principe

Le principe utilisé ici est très simple:

  1. on place une div au-dessus de la page, grace à un z-index élevé. Cette div permet de masquer et de bloquer toute interaction avec le reste du document.
  2. on rajoute au-dessus de cette div une autre div faisant office de «fenêtre»
Continuer la lecture

[jQuery] Une horloge sous forme de diagramme

Avant de m’essayer à l’horloge présentée dans l’article précédent, je m’était posé la question de trouver une forme plus originale d’afficher l’heure. Après quelques recherches et essai, je suis arrivé à ce résultat.

Continuer la lecture

[Illustrator/jQuery] Comment réaliser une carte interactive (2/2)

À la fin de la première partie de ce tutoriel (voir ici) nous avions :

  • un dossier images contenant la carte
  • un fichier HTML comprenant notre map HTML
  • notre fichier Illustrator

Partie 2: Rendre la carte interactive à l’aide de jQuery

Les zones de maps n’étant pas stylisables via CSS, nous sommes obligés de passer par jQuery (ou tout autre framework JavaScript).

Principe utilisé: la carte de France est l’image de fond d’une division, la map HTML est appliquée sur une image transparente, qui au survol d’une zone surligne la région correspondante.

Continuer la lecture

Un effet de porte en jQuery

Aujourd’hui nous allons voir comment créer en jQuery et jQuery UI un effet de porte, avec l’image se séparant en 4 par les coins, révélant ainsi un texte.

Avant tout, il faut comprendre comment s’organiseront les différentes couches:

  • à la base, on trouve la couche contenant le texte (z-index: 0)
  • juste au-dessus, on trouve la couche contenant les morceaux d’image (z-index: 1)
  • tout en haut, on trouve la couche servant de masque au tout (z-index: 2)
Continuer la lecture

Un compteur de caractères en jQuery

Aujourd’hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caractères pouvant encore être accepté dans des champs de texte.

Pour commencer, il faut décider du nombre de variables utiles à ce genre de réalisation. Une longueur maximale autorisée est un minimum. Ensuite, comme variables pouvant être utiles il y a:

  • un seuil à partir duquel alerter l’utilisateur
  • pouvoir définir des couleurs différentes selon l’état du champ (en-dessous du seuil, au-dessus du seuil, au-dessus du maximum)
Continuer la lecture

Un dancefloor en jQuery

Aujourd’hui, je vais vous expliquer comment créer en jQuery un effet de dancefloor à la Saturday Night Fever (demo).

Tout d’abord, de quoi est composé un tel « plancher de danse » ? Tout simplement de différents carrés/cases, le tout contenu dans une surface définie.

Ici le dancefloor sera une simple <div> avec un identifiant dancefloor, à laquelle on applique en css une largeur prédéfinie, ainsi qu’un overflow non autorisé.

Pour remplir le dancefloor de ses cases, j’ai décidé de procéder en jQuery comme suit:

$('#dancefloor').html('<div class="tile" id="1"></div><div class="tile" id="2"></div>[...]<div class="tile" id="15"></div><div class="tile" id="16"></div>');

Ensuite, pour répartir les cases en 5 lignes de 5 colonnes, on applique aux cases (qui ont toutes la classe tile) le style suivant:

.tile {
    width: 100px;
    height: 100px;
    float: left;
}

Pour définir toutes les couleurs que prendront nos cases, on utilise une variable de type array qui contiendra les codes hexa des couleurs.

var colors = ['#2219B2','#343085',[...],'#FFD240','#FFDE73'];

Maintenant que nous avons défini la grille ainsi que les couleurs, il nous faut maintenant attribuer ces couleurs aux différentes cases. Nous allons procéder de la manière suivante: pour chaque case du tableau, on injecte une couleur de fond, choisie aléatoirement dans le tableau, via CSS.

for(i=1;i<17;i++){
    var Color = Math.floor(Math.random()*20);
    $('#'+i).css({'background-color':colors[Color]});
}

Enfin, pour rafraîchir les couleurs automatiquement, il suffit de répéter régulièrement la fonction ci-dessus à l’aide de la fonction setInterval().

var refresh = setInterval(function(){
    for(i=1;i<17;i++){
        var Color = Math.floor(Math.random()*20);
        $('#'+i).css({'background-color':colors[Color]});
    }
},500);

Au final, le code jQuery complet donne:

$(document).ready(function(){
    //On définit un ensemble de couleurs
    var colors = ['#2219B2','#343085','#0E0874','#554DD8','#7872D8','#580EAD','#522881','#370470','#8742D6','#9C6AD6','#0C5AA6','#26527C','#04396C','#408AD2','#679ED2','#FFC300','#BF9E30','#A67F00','#FFD240','#FFDE73'];
            
    //On peuple la div #dancefloor de cases carrées
    $('#dancefloor').html('<div class="tile" id="1"></div><div class="tile" id="2"></div><div class="tile" id="3"></div><div class="tile" id="4"></div><div class="tile" id="5"></div><div class="tile" id="6"></div><div class="tile" id="7"></div><div class="tile" id="8"></div><div class="tile" id="9"></div><div class="tile" id="10"></div><div class="tile" id="11"></div><div class="tile" id="12"></div><div class="tile" id="13"></div><div class="tile" id="14"></div><div class="tile" id="15"></div><div class="tile" id="16"></div>');
            
    //On définit les couleurs au démarrage
    for(i=1;i<17;i++){
        //On choisit aléatoirement une couleur parmis les 20 définies
        var startingColor = Math.floor(Math.random()*20);
        $('#'+i).css({'background-color':colors[startingColor]});
    }

    //On rafraichit toutes les 0.5 secondes
    var refresh = setInterval(function(){
        for(i=1;i<17;i++){
            var Color = Math.floor(Math.random()*20);
            $('#'+i).css({'background-color':colors[Color]});
        }
    },500);
});

Sur ce, je vous dis à bientôt pour de nouvelles aventures !