Rails on the road

Volevo usare il Lavalamp in uno dei nostri progetti, ma esistono due versioni una per il jQuery e una per le MooTools, peccato che io usi prototype (testato con Prototype JavaScript framework, version 1.6.0.2).

Dopo aver fatto una ricerca poco felice su un effetto simile in prototype, l’ho rifatto! Mi sembra che funzioni abbastanza bene. Comunque provatelo e ditemi se vi da dei problemi.

    1 var LavaLamp = Class.create({
    2   initialize: function(obj, options) {
    3     var actualElement = ""
    4     Event.observe($(obj), 'mouseover', function(event){
    5       // Internet Explorer
    6       if (event.srcElement){actualElement = event.srcElement.id}
    7       // Netscape and Firefox
    8       else if (event.target){actualElement = event.target.id} 
    9     }.bind(this));
   10     
   11     var myarray = new Array();
   12     this.menu = $(obj), this.current = this.menu.select('li.current').first();
   13     
   14     this.menu.select('li').each(function(item){
   15       Event.observe(item, 'mouseover', function(event){this.slide(item, actualElement)}.bind(this));
   16       Event.observe(item, 'mouseout', function(event){this.slide(this.current, actualElement)}.bind(this));
   17     }.bind(this));
   18  
   19     new Element.insert(this.menu, '<li style="display:none;" class="background"><div class="left"></div></li>')
   20     this.bgitem = this.menu.select('li.background').first();
   21     this.setCurrent(this.current);
   22   },
   23   
   24   slide: function(to, act) {
   25     if(!this.current || (this.current == to && act != "")) return;
   26     new Effect.Parallel([
   27       new Effect.Move(this.bgitem, {sync: true, x: to.offsetLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.linear}), 
   28       new Effect.Morph(this.bgitem, {sync: true, style: {width: to.getWidth()+'px'}})
   29     ])
   30   },
   31  
   32   setCurrent: function(item){
   33     this.bgitem.setStyle({left: (item.offsetLeft)+'px', width: (item.offsetWidth)+'px'});
   34     this.current = item;
   35     this.bgitem.show();
   36   }
   37 })
   38  
   39 Event.observe(window, 'load', function() {
   40   new LavaLamp('lavalamp')
   41 });

Usate un ul e li per il vostro menu con id lavalamp e classe lavalampfx e ricordare di dare un id ad ogni li del menu, anche un numero progressivo:

    1 <ul id="lavalamp" class="lavalampfx">
    2   <li id="1"><a href="#">a</a></li>
    3   <li id="2"><a href="#">a</a></li>
    4   <li id="3"><a href="#">a</a></li>
    5   <li id="4"><a href="#">a</a></li>
    6   <li id="5"><a href="#">a</a></li>
    7 </ul>

Il css:

    1 .lavalampfx {width:500px; overflow: hidden}
    2 .lavalampfx li {float: left; list-style: none;margin-right:17px}
    3 .lavalampfx li.background {background: url("lava.gif") no-repeat right -30px; width: 9px; height: 30px;z-index: 8;position: absolute}
    4 .lavalampfx li.background .left { background: url("lava.gif") no-repeat top left;height: 30px;margin-right: 9px}
    5 .lavalampfx li a {color: #fff;z-index: 10;position: relative;top:5px;margin:0 7px}

Il file lava.gif è la caramella che starà intorno al menu.

Qui non si vede l’animazione ma vi assicuro che funziona con safari 4, firefox 3.5, explorer 7 (con gli altri browser non l’ho testato, ma credo funzioni!)