[Mootools] Script werkt niet, firebug error...

[_eXistenZ_]

Ik ben voor een site een menuutje in elkaar aan het knutselen met Mootools.

Daarbij heb ik de volgende (bijzonder simpele om errors te hunten) code gemaakt:

JavaScript:

window.addEvent('domready', function(){

    var menubutton = $('div#menubutton');
    var menu = $('div#menu');
    var fx = new Fx.Styles(menu, {
        duration: 200,
        wait: false
    });

    menubutton.addEvent('click', function(){
        fx.start({
            'display': 'block'
        });
    });

});

Verder heb ik in html een menuknoop div#menubutton gemaakt, en een menuutje div#menu.
De bedoeling is dat als ik op div#menubutton klik, div#menu het beeld in fade.

Dit werkt echter niet, en Firebug geeft de volgende error:

menubutton has no properties
http://www.blaat.nl/dev/project1/js/standard/javascript.js
Line 10

Ik ben beginneling met javascript / Mootools, en zie niet in wat ik fout doe...
Het mootools forum kende deze problemen ook niet, enkel met andere classes enzo, waar ik niks aan had. (Hier heb ik dus al rondgekeken.) Hiervoor had ik namelijk een ander probleem dat ik kon oplossen door de niet-gecompresste versie van MT te pakken, maar hiervoor hadden ze geen antwoord.

Natuurlijk kon ik dit vragen op het Mootools forum, maar GoT is veel leeter

[ Voor 6% gewijzigd door _eXistenZ_ op 02-09-2007 15:24 . Reden: Even URLetje van Firebug error aangepast. ]

[SchizoDuckie]

Heet is misschien ook wel practisch als je een demo'tje online zet. Ik krijg namelijk het idee dat je gewoon $('menubutton') en $('menu') moet gebruiken. (als je daarmee een handle naar een div met respectievelijk id menu en id menubutton wilt krijgen.

Welke tutorial heeft je gezegd dat je die div#menubutton moet gebruiken ?

[ Voor 17% gewijzigd door SchizoDuckie op 02-09-2007 15:31 ]

[_eXistenZ_]

De demo staat online op http://www.exhost.nl/temp/mootoolsdemo.html (Valid XHTML 1.0 strict).

In de demo's op de site zelf gebruiken ze ook vaak zat dingen als

JavaScript:

var dezediv = $('div#diediv');

Hier kan je iets dergelijks terugvinden.
Volgens mij kan je alles wat je in CSS op deze manier aanduidt ook zo overnemen in Mootools.

[SchizoDuckie]

_eXistenZ_ schreef op zondag 02 september 2007 @ 18:53:
De demo staat online op http://www.exhost.nl/temp/mootoolsdemo.html (Valid XHTML 1.0 strict).

In de demo's op de site zelf gebruiken ze ook vaak zat dingen als

JavaScript:

var dezediv = $('div#diediv');

Hier kan je iets dergelijks terugvinden.
Volgens mij kan je alles wat je in CSS op deze manier aanduidt ook zo overnemen in Mootools.

Dát is dus waar je de mist in gaat,als je goed kijkt zie je in de demo van Fx.elements dat ie daar een collectie van elementen terug krijgt ipv 1 element doordat hij $$ gebruikt ip $.

Dat is ook een van de verschillen tussen $() en $$().
$ == document.getElementById
$$ == document.getElementsBySelector.

Je kán wel meerdere elementen terugkrijgen met een $() maar daar gaan we het ff niet over hebben

Ik heb even wat geprutst, er zit alleen nog geen effect overheen, maarja hoe wil je een display:none naar display: block uitsmeren over 200ms ?

[ Voor 15% gewijzigd door SchizoDuckie op 02-09-2007 19:49 ]

[_eXistenZ_]

Ondertussen heb ik zelf ook niet stilgezeten, en ben er achter hoe een en ander in elkaar steekt

Het moest $('menu') zijn idd, niet div#menu
Ik doe nu een fx.style opacy van 0 naar 1, en het werkt perfect.

Bedankt voor de hulp iig.

Hier nog mijn script:

JavaScript:

window.addEvent('domready', function(){

    var menu = $('menu');
    var menubutton = $('menubutton');
    var menufx = new Fx.Style(menu, 'opacity', {
        duration: 750,
        transition: Fx.Transitions.Quad.easeOut,
        wait: false
    });

    menubutton.addEvent('click', function(){
        menufx.start(0,1);
    });

    menu.addEvent('mouseleave', function(){
        menufx.start(1,0);
    });

});