Je suis entrain de développer un site interne à PriceMinister. J’ai envie de faire le site très sérieusement, en respectant tous les standards en vigueur, et l’intégré au maximum au navigateur.
J’ai décidé de le rendre très sérieux et épuré, avec une pointe de javascript pour apporter le fun et le confort d’usage.
Je suis parti sur une base WordPress qui apporte le confort d’usage pour ceux qui l’alimenterons, et j’ai pour l’occasion étendu mon plugin Identikit pour qu’il gère l’identité des articles et des catégories. Je publierai prochainement la v2 sur ce site.
Donc c’est une adaptation pour prototype.js d’un script de Johnvey qui est visible sur son site. Quand vous survolez les liens de son menu, le slogan change. J’aime beaucoup cette idée, je l’ai donc adapté pour servir ma démarche.
Je voulais un effet dans le genre pour afficher l’attribut title de toutes mes balises a. D’autres s’amusent à afficher cette donnée dans des infobulles, mais je trouve cette mode un peu indigeste. Cette méthode reste très discrète comme vous pouvez le voir dans la vidéo. Ainsi, quand l’utilisateur survole un lien, la div id="blog-description" se met à jour. Pour le moment il ne fonctionne que sous Firefox, mais je vais l’adapter pour qu’ils fonctionnent sur d’autres navigateurs. Voici la bête :
var Scrambler = Class.create();
Scrambler.prototype = {
initialize: function() {
this.cs = new Array("!","~","@","#","$","%","^","&","*","(","+","=","_","D","p","-","C","e");
this.base = $('blog-description').innerHTML;
this.timer = null;
this.eid = 'blog-description';
this.words = '';
this.cnt = 0;
$$('a').each( function(e) {
if( e.getAttribute('title') != null ) {
e.onmouseover = function() { myScrambler.scrambled( this.getAttribute('title') ); }
e.onmouseout = function() { myScrambler.reset( this.base ); }
}
} );
},
scrambled: function(ph) {
this.loops = 0;
this.cnt = 0;
this.words = ph.split(" ");
for(var i=this.words.length-1; i; i--) this.loops = Math.max(this.loops, this.words[i].length);
clearTimeout(this.timer);
this.timer = setTimeout(this.m_scrPhrase, 45);
},
reset: function() {
if(this.base != $('blog-description').innerHTML)
this.scrambled(this.base);
},
m_scrPhrase: function() {
var out = "";
if(myScrambler.cnt++ >= this.loops) {
clearTimeout(myScrambler.timer);
out = myScrambler.phrase;
} else {
for(var i=0; i = ln) return wd;
var out = wd.substring(0, po);
var i = ln - po;
do { out += this.cs[Math.floor(Math.random() * 20)]; } while(--i);
return out;
},
}
function initScrambler() { myScrambler = new Scrambler(); }
Event.observe(window, 'load', initScrambler, false);