Primi esperimenti con Mootools

**dementialsite** · 20-10-2010, 15.25.55

Ciao a tutti, sto cercando di avventurarmi nel framework Mootools (sfruttando la libreria già inclusa in Joomla!), solo che ho qualche problemino... sembra non funzionare.

Questo è il codice che ho scritto (preferirei non mettere online la pagina di prova... c'è in ballo qualcosa di grosso :-D):

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Mootools</title>
<style type="text/css">
/* nuova barra di stato */
#statusbar { position:fixed; bottom:0px; width:100%; height:32px; overflow:hidden; background-color:#000; color:#FFF; border-top:double 3px }
#startmenu { position:fixed; bottom:32px; width:40%; background-color:#000 }
</style>
<script type="text/javascript" src="/davide/joomlatest/media/system/js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {

    var startMenuSlider = new Fx.Slide ('startmenu', {mode : 'horizontal'});

    $('startmenu_toggle').addEvent ('click', function (e) {
        e = new Event (e);
        startMenuSlider.toggle ();
        e.stop ();
    });

});
</script>
</head>
<body>
<div id="statusbar">
<a id="startmenu_toggle" href="#">
    <img src="templates/demential_site_10yrs/images/start_button_off.png" alt="Press Start to begin" width="128" height="32" />
</a>
<div id="startmenu">
    <div id="menuitems">
    <div class="contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, orci quis vehicula porta, turpis libero pellentesque velit, non imperdiet diam lectus eu libero. Nullam in lectus vitae diam molestie lobortis. Sed varius faucibus turpis quis feugiat. Mauris ultrices mi eu mi tincidunt placerat. In varius adipiscing risus, ut vestibulum tortor tristique in. Cras a cursus dolor. In hac habitasse platea dictumst. Aliquam posuere enim sed risus molestie a dignissim lorem convallis. Nulla tellus nibh, interdum eu ultricies sit amet, semper sodales elit. Donec vehicula, mi vulputate blandit consectetur, orci lectus interdum eros, vitae faucibus lacus nisl posuere neque. Duis iaculis lacus egestas ligula accumsan ac tristique diam fringilla. Etiam nec quam vel nulla ultrices pretium vitae quis odio. Sed eu orci nec lorem congue auctor. Donec vulputate, nisi vitae suscipit gravida, tellus tortor blandit augue, et congue odio mauris non metus. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim placerat ante vel viverra. Curabitur porta orci a leo dictum ut mattis felis aliquam. Praesent tortor nunc, elementum id molestie vel, porta ut felis. 
    </div>
    </div>
</div>
</div>
</body>
</html>

Ecco, malgrado il codice sia praticamente identico all'esempio originale, non viene realizzato l'effetto che vorrei, e cioè che il contenuto del "Lorem Ipsum" sparisca verso sinistra quando viene cliccato il link con l'immagine. Nemmeno la console di Firefox mi segnala errori...

Qualcuno ha idea su quale sia il pezzo che manca? Non so davvero più cosa inventarmi...

Grazie a chi risponde... statemi bene...

**karl94** · 20-10-2010, 17.35.48

Il problema è che tu hai impostato la proprietà position dello stesso elemento che vuoi animare su fixed, il che sembra causare qualche problema. Prova ad animare un div che lo racchiuda.

**dementialsite** · 21-10-2010, 11.21.32

In effetti togliendo i posizionamenti qualcosa sono riuscito a fare (vabbè... a parte il fatto che una volta scomparso il DIV non riesco a ripristinarlo), ma perderei comunque un aspetto fondamentale: il risultato dovrebbe essere una specie di taskbar con i contenuti che escono da sotto (più precisi? Tipo il menu "Start" di Windows... ecco, ho detto troppo :-D). E quindi non posso in alcun modo eliminare il posizionamento...

Stavo provando a guardare anche altre tecniche (Fx.Morph e Fx.Styles tra gli altri), ma non riesco a capire come devo adattare gli esempi al mio caso. Aggiungi che non è così semplice orientarsi nella documentazione di Mootools (sarà forse perché sono abituato a quella di Java, PHP o MySQL)... i link a quelli che dovrebbero essere i "riferimenti alla documentazione" sembrano non funzionare (portano tutti ad una pagina vuota, si apre la documentazione della versione 1.3 - e non della 1.1 inclusa in Joomla - e non sempre si trovano collegamenti equivalenti).

Anche in questo caso, il semplice copia-e-incolla degli esempi non porta a nessun errore sulla Console di Firefox. Sto seriamente pensando di mettermi a scrivere da me tutto il codice che servirebbe (come, del resto, ho praticamente sempre fatto nel mio sito... quello che ho scritto io non usa alcun tipo di libreria o framework).

Vabbè... scusate lo sfogo... ma se qualcuno ha altre idee su come procedere, sono ben accette...

Statemi bene...

Discussione: Primi esperimenti con Mootools

LinkBack

Strumenti discussione

Display

Primi esperimenti con Mootools

Regole di scrittura