{"id":10,"date":"2012-09-06T21:37:06","date_gmt":"2012-09-06T20:37:06","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=10"},"modified":"2024-11-05T14:24:20","modified_gmt":"2024-11-05T13:24:20","slug":"un-dancefloor-en-jquery","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","title":{"rendered":"Un dancefloor en jQuery"},"content":{"rendered":"\n

Aujourd’hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever<\/em> (demo<\/a>).<\/p>\n\n\n\n

Tout d’abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie.<\/p>\n\n\n\n

Ici le dancefloor sera une simple <div> avec un identifiant dancefloor<\/em>, \u00e0 laquelle on applique en css une largeur pr\u00e9d\u00e9finie, ainsi qu’un overflow<\/em> non autoris\u00e9.<\/p>\n\n\n\n

Pour remplir le dancefloor de ses cases, j’ai d\u00e9cid\u00e9 de proc\u00e9der en jQuery comme suit:<\/p>\n\n\n

\n$('#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>');\n<\/pre><\/div>\n\n\n
Ensuite, pour r\u00e9partir les cases en 5 lignes de 5 colonnes, on applique aux cases (qui ont toutes la classe tile<\/em>) le style suivant:<\/p>\n\n\n
\n.tile {\n    width: 100px;\n    height: 100px;\n    float: left;\n}\n<\/pre><\/div>\n\n\n
Pour d\u00e9finir toutes les couleurs que prendront nos cases, on utilise une variable de type array<\/em> qui contiendra les codes hexa des couleurs.<\/p>\n\n\n
\nvar colors = ['#2219B2','#343085',[...],'#FFD240','#FFDE73'];\n<\/pre><\/div>\n\n\n
Maintenant que nous avons d\u00e9fini la grille ainsi que les couleurs, il nous faut maintenant attribuer ces couleurs aux diff\u00e9rentes cases. Nous allons proc\u00e9der de la mani\u00e8re suivante: pour chaque case du tableau, on injecte une couleur de fond, choisie al\u00e9atoirement dans le tableau, via CSS.<\/p>\n\n\n
\nfor(i=1;i<17;i++){\n    var Color = Math.floor(Math.random()*20);\n    $('#'+i).css({'background-color':colors[Color]});\n}\n<\/pre><\/div>\n\n\n
Enfin, pour rafra\u00eechir les couleurs automatiquement, il suffit de r\u00e9p\u00e9ter r\u00e9guli\u00e8rement la fonction ci-dessus \u00e0 l’aide de la fonction setInterval()<\/em>.<\/p>\n\n\n
\nvar refresh = setInterval(function(){\n    for(i=1;i<17;i++){\n        var Color = Math.floor(Math.random()*20);\n        $('#'+i).css({'background-color':colors[Color]});\n    }\n},500);\n<\/pre><\/div>\n\n\n
Au final, le code jQuery complet donne:<\/p>\n\n\n
\n$(document).ready(function(){\n    \/\/On d\u00e9finit un ensemble de couleurs\n    var colors = ['#2219B2','#343085','#0E0874','#554DD8','#7872D8','#580EAD','#522881','#370470','#8742D6','#9C6AD6','#0C5AA6','#26527C','#04396C','#408AD2','#679ED2','#FFC300','#BF9E30','#A67F00','#FFD240','#FFDE73'];\n            \n    \/\/On peuple la div #dancefloor de cases carr\u00e9es\n    $('#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>');\n            \n    \/\/On d\u00e9finit les couleurs au d\u00e9marrage\n    for(i=1;i<17;i++){\n        \/\/On choisit al\u00e9atoirement une couleur parmis les 20 d\u00e9finies\n        var startingColor = Math.floor(Math.random()*20);\n        $('#'+i).css({'background-color':colors[startingColor]});\n    }\n\n    \/\/On rafraichit toutes les 0.5 secondes\n    var refresh = setInterval(function(){\n        for(i=1;i<17;i++){\n            var Color = Math.floor(Math.random()*20);\n            $('#'+i).css({'background-color':colors[Color]});\n        }\n    },500);\n});\n<\/pre><\/div>\n\n\n
Sur ce, je vous dis \u00e0 bient\u00f4t pour de nouvelles aventures !<\/p>\n","protected":false},"excerpt":{"rendered":"
Aujourd’hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d’abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[5],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-dancefloor"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-a","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":40,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","url_meta":{"origin":10,"position":0},"title":"Un effet de porte en jQuery","author":"geekc","date":"26\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l'image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte. Avant tout, il faut comprendre comment s'organiseront les diff\u00e9rentes couches: \u00e0 la base, on trouve la couche contenant le texte (z-index: 0)juste\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":10,"position":1},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/12\/un-compteur-de-caracteres-en-jquery\/","url_meta":{"origin":10,"position":2},"title":"Un compteur de caract\u00e8res en jQuery","author":"geekc","date":"12\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte. Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de r\u00e9alisation. Une longueur maximale autoris\u00e9e est un minimum. Ensuite, comme\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":10,"position":3},"title":"Carte interactive des rues sans m\u00e9gots avec OpenLayers","author":"geekc","date":"01\/07\/2019","format":false,"excerpt":"Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet,\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1143,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/24\/gloubi-script-horloge-illustree\/","url_meta":{"origin":10,"position":4},"title":"Gloubi script – une horloge illustr\u00e9e","author":"geekc","date":"24\/03\/2023","format":false,"excerpt":"Aujourd\u2019hui, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 la version gloubi d\u2019un script que j\u2019ai \u00e9galement d\u00e9j\u00e0 cr\u00e9\u00e9 de mon c\u00f4t\u00e9\u00a0: l\u2019horloge illustr\u00e9e. La version gloubi est visible ici, tandis que la cr\u00e9ation de ma propre version, faite avec jQuery, est pr\u00e9sent\u00e9e ici. Pr\u00e9sentation de la version gloubi Pour commencer, on cr\u00e9\u00e9\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":162,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/12\/jquery-une-horloge-sous-forme-de-diagramme\/","url_meta":{"origin":10,"position":5},"title":"[jQuery] Une horloge sous forme de diagramme","author":"geekc","date":"12\/10\/2012","format":false,"excerpt":"Avant de m'essayer \u00e0 l'horloge pr\u00e9sent\u00e9e dans l'article pr\u00e9c\u00e9dent, je m'\u00e9tait pos\u00e9 la question de trouver une forme plus originale d'afficher l'heure. Apr\u00e8s quelques recherches et essai, je suis arriv\u00e9 \u00e0 ce r\u00e9sultat. Le but de cet article est de vous expliquer le code que j'ai utilis\u00e9. Structure d'une barre:\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}