mootools + css + highlight

jeudi 8 avril 2010 | graphisme, tutorials

Petit script bonbon du jour : highlight !

Prérequis :
faire un xhtml
ajouter une ligne pour charger mootools (lastMoo.js dans mon exemple)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>high</title>
<script type="text/javascript" src="lastMoo.js"></script>
<script type="text/javascript">
<!-- on va travailler cette partie -->
</script>
<style type="text/css">
<!--
<!-- on va travailler cette partie -->
-->
</style>
</head>
<body>
<!-- on va travailler cette partie -->
</body>
</html>

1re étape :
Remplir de blocs carrés notre page.
Un peu de maths : je veux n carrés de 50 px de large dans une window (une page) de 1005 px de large.
20 blocs, ça passe, 21 ça dépasse (1050 px)…
Techniquement en xhtml/css on laissera donc déborder le 21e bloc en ajoutant un conteneur de 1050 px de large pour nos n blocs et en masquant l’overflow (les barres de scrolling).

Tout ça c’est bien mais on va le faire automatiquement pour la largueur et la hauteur et pour n’importe quelle largeur de window.
Pour les débutants on pourrait copier/coller 500 fois « 

mais ce n’est pas beaucoup plus difficile de le faire via Mootools.
En CSS ceci suffit :

<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}

.bloc{
float:left;
background: #eee;
}
-->
</style>

Pour le javascript

var squareSize=50;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;

La première ligne définit la taille de mon bloc (ici 50 sur 50 px).
La deuxième calcule le nombre de bloc qui rentre + 1
en détaillant
(la largueur de mon navigateur / taille du bloc)
.toInt( ) pour arrondir en dessous (20,9).toInt()=20 et j’ajoute 1.
La troisième s’occupe de la hauteur.

Pour continuer, il faut créer un conteneur pour mettre mes N blocs, celui-ci sera plus large que ma page mais l’overflow du body est masqué. Je le nomme full

<body>
<div id="full">
<!-- ici on injectera nos div-->
</div>
</body>

Je continue mon javascript :)
Je vais mettre ma div full à la taille calculée :

var squareSize=40;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;

$('full').setStyle('width',winx*squareSize);
$('full').setStyle('height',winy*squareSize);

J’ai besoin d’injecter mon bloc dans full

new Element('div', {
	'class':'bloc',
	'styles': {
        'width':squareSize+'px',
        'height':squareSize+'px'
    }
}).inject($('full'));

et de le faire plusieurs fois (exactement, le nombre de bloc par ligne x le nombre par colonne)

for(var i=0;i<(winx*winy);i++){
new Element('div', {
	'class':'bloc',
	'styles': {
        'width':squareSize+'px',
        'height':squareSize+'px'
    }
}).inject($('full'));
}

voici maintenant l’étape Frankestein, via motools l’effet highlight tient en une ligne

$('.bloc').highlight('#aaa','#fff');

ici je l’applique au premier bloc en classe ‘.bloc’ et il nous manque une technique pour lui dire à quel moment ou comment doit-il se déclencher, sinon il sera en highlight dès le lancement.
On peut ajouter un paramètre en mouseover

el=$('.bloc');
el.addEvent('mouseover', function () {
	var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
	el.highlight(color1,'#fff');
	});

ci-dessus, j’ai ajouté une variable el mais ça ne change pas beaucoup et color1, qui nous donnera une couleur en hexa aléatoire (#——–) avec très peu de vert via $random(0,5).
Il manque une technique pour le faire sur tous les blocs !

$$('.bloc').each(function (el) {
	el.addEvent('mouseover', function () {
	var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
	el.highlight(color1,'#fff');
	});
});

ce n’est pas forcement clair pour les débutants mais ça donne une idée ?
Dernière ligne mais qui sera notre début, on charge tous ça à la fin du chargement du dom html :

window.addEvent('domready', function(){    
/* notre script */
)};

Version complète

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>high</title>
<script type="text/javascript" src="lastMoo.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){

var squareSize=40;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;

$('full').setStyle('width',winx*squareSize);
$('full').setStyle('height',winy*squareSize);

for(var i=0;i<(winx*winy);i++){
new Element('div', {
	'class':'bloc',
	'styles': {
        'width':squareSize+'px',
        'height':squareSize+'px'
    }
}).inject($('full'));
}

$$('.bloc').each(function (el) {
	el.addEvent('mouseover', function () {
	var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
	el.highlight(color1,'#fff');
	});
});
}) //
</script>
<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}

.bloc{
float:left;
background: #eee;
}

-->
</style>
</head>

<body>
<div id="full">
<!-- ici on injecte nos div-->
</div>
</body>
</html>

ci besoin :
mon lastmoo mootools.js
ou ici : http://mootools.net/download


tags : ,

Comments are closed.