Archives mensuelles : septembre 2012

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

Publié le par
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 →

OpenSearch plugin

Publié le par
Répondre

Aujourd’hui, nous allons voir comment créer un plugin OpenSearch.

Today, we will see how to create a simple OpenSearch plugin.

OpenSearch plugin ?

Un plugin OpenSearch est ce qui est utilisé par votre navigateur pour effectuer une recherche, sans a avoir à se rendre sur la page du site sur lequel on veut effectuer la recherche. Cela consiste en un simple fichier XML

An OpenSearch plugin is what your browser uses to search something on a site without having to open it. It consists on a simple XML file.

OpenSearch on Firefox
Continuer la lecture →

Un effet de porte en jQuery

Publié le par
Répondre

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

Publié le par
Répondre

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

Publié le par
Répondre

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:

1
$('#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:

1
2
3
4
5
.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.

1
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.

1
2
3
4
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().

1
2
3
4
5
6
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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 !