mootools slide

Door W W op 15-12-2008 23:01

1.693 views

Ik probeer een divje te laten verdwijnen door middel van de functie slide in het mootools platform. Ik ben een totale leek in javascript en mootools maar i kdacht dmv documentatie dat het wel mee zal vallen. Jammer ;)

De html van mijn Divje wat moet verdwijnen


<div id="submenu">
					<div id="submenu-middle">
							<ul>
								<li><a href="">Bel mij terug</a></li>
								<li><a href="">Offerte aanvragen</a></li>
								<li></li>
							</ul>
							<ul>
								<li><a href="">Nieuws archief</a></li>
								<li><a href="">Sitemap</a></li>
								<li></li>
							</ul>
					</div>
					<div id="submenu-bottom">
						<div>
							<a href="#" id="submenu-toggle" onclick="">^</a>
						</div>
					</div>
				</div>

Mootools >> http://www.mediaflux.nl/new/mootools.js

Javascript:


		<script src="mootools.js" type="text/javascript"></script>
		
		<script language="javascript" type="text/javascript">
				var Slider = new Fx.Slide('submenu-middle');

				$('submenu-toggle').addEvent('click', function(e){
					e.stop();
					Slider.toggle();
				});
	
		</script>

Kan iemand mij een beetje op weg helpen? mvg.

Joren de Wit

15-12-2008 23:05

$('submenu-toggle')

Ik zie in je html code nergens een element met dat id terug? Dat levert het probleem op...

Tip: werk in firefox met de firebug addon, dan krijg je nette foutmeldingen in dit soort situaties.

W W

15-12-2008 23:08

<a href="#" id="submenu-toggle" onclick="">^</a>

In de documentatie stonden ook A elementen die met een id werken.

Joren de Wit

15-12-2008 23:14

Mijn fout, die had ik niet gezien. Heb je het al met firefox en de firebug addon geprobeerd te testen? Zo ja, kreeg je een foutmelding?

W W

15-12-2008 23:21

Sorry voor de late reactie, moest het ff installeren ;)

Anyway, foutmelding:
this.element has no properties
http://www.mediaflux.nl/new/mootools.js

Jelmer -

15-12-2008 23:34

Komt het niet doordat je $('submenu-toggle') probeert op te zoeken in het document nog voor het klaar is met opbouwen (of zelfs ontvangen) van de HTML code?

Zo als ik het nu zie lijkt het erop dat je die method aanroept zodra Javascript voor de eerste keer wordt uitgevoerd. Dat is voordat het hele document is geladen. Je moet wachten tot onload, of oncontentloaded, alvorens je de DOM hiërarchie kan doorlopen. Volgens mij heet het event in MooTools domready.

W W

15-12-2008 23:49

Jelmer schreef op 15.12.2008 23:34
Komt het niet doordat je $('submenu-toggle') probeert op te zoeken in het document nog voor het klaar is met opbouwen (of zelfs ontvangen) van de HTML code?

Zo als ik het nu zie lijkt het erop dat je die method aanroept zodra Javascript voor de eerste keer wordt uitgevoerd. Dat is voordat het hele document is geladen. Je moet wachten tot onload, of oncontentloaded, alvorens je de DOM hiërarchie kan doorlopen. Volgens mij heet het event in MooTools domready.

Hier heb je inderdaad gelijk in.

Ik heb het kunnen fixen doormiddel van de volgende code


		<script language="javascript" type="text/javascript">
			window.addEvent('domready', function() {
				var Slider = new Fx.Slide('submenu-middle');

				$('submenu-bottom').addEvent('click', function(e){
					e.stop();
					Slider.toggle();
				});
			});
	
		</script>

Reageren

Inloggen om te reageren