Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

setTimeout (Opgelost)

MissLizzy - 19/09/2010 23:31 (laatste wijziging 20/09/2010 19:13)

Nieuw lid

Ben bezig JavaScript te leren. Ik wil graag het menu van een website waar ik mee bezig ben uitbreiden met submenu's en heb daarvoor gebruik gemaakt van de functie showLayer en hideLayer. De functies worden aangeroepen door onMouseover en onMouseout. Ik ben na veel proberen, lezen, googlen en weer proberen al een eindje op weg, maar het volgende krijg ik niet voor elkaar.
Met setTimeout heb ik gezorgd dat de submenu's zichtbaar blijven als je met de muis de button uit het hoofdmenu verlaat. Voorlopig heb ik even de waarde 3000 gebruikt (is toch 3 seconden?). De submenu's worden zichtbaar, maar verdwijnen niet als de ingestelde tijd is verstreken. Inmiddels ben ik erachter waarom setTimeout niet werkt: het is een method van het object window en werkt niet bij links.
Wat ik dan weer niet begrijp is waarom na toevoeging van setTimeout de submenu's zichtbaar bleven nadat ik met de muis van de button van het hoofdmenu bewoog naar de buttons van het submenu.
Voornaamste vraag is nu: hoe krijg ik het voor elkaar om de submenu's pas te laten verdwijnen nadat ik of de button van het hoofdmenu verlaat en naar een andere button van het hoofdmenu ga of nadat ik via de button van het hoofdmenu de buttons van de bijbehorende submenu's verlaat? Ik geef de code zoals ik hem nu hem, dus inclusief setTimeout.
De functie hideLayer wordt nu niet gebruikt, omdat ik niet zo goed weet wat ik er mee aan moet.

Dit zijn de JavaScript functies:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<script language="JavaScript">
//functie om een submenu te laten zien
function showLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "visible";
}

//functie om een submenu te verbergen
function hideLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "hidden";
}

//functie om een submenu tijdelijk zichtbaar te maken
function timedLayer(layerid) {
var layer = document.getElementById(layerid);
var time = setTimeOut("hideLayer(layerid)", 3000);
layer.style.visibility = "hidden";
}
</script>

en dit is de html van één van de menu opties met bijbehorende submenu's:
<div id="collectieLayer">
     <a href="museumcollectie.html"><img src="images/buttons_navigatie_vrijwilligers_ih.jpg"></a><br>
     <a href="historie.html"><img src="images/buttons_navigatie_contact_ih.jpg"></a><br>
     </div>
     <a href='#' onMouseover="showLayer('collectieLayer');" onMouseout="timedLayer('collectieLayer');">
     <img src="images/buttons_navigatie_collectie_ih.jpg" align="right" border="0"></a>

<script language="JavaScript">
//functie om een submenu te laten zien
function showLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "visible";
}
 
//functie om een submenu te verbergen
function hideLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "hidden";
}
 
//functie om een submenu tijdelijk zichtbaar te maken
function timedLayer(layerid) {
var layer = document.getElementById(layerid);
var time = setTimeOut("hideLayer(layerid)", 3000);
layer.style.visibility = "hidden";
}
</script>
 
en dit is de html van ��n van de menu opties met bijbehorende submenu's:
<div id="collectieLayer">
     <a href="museumcollectie.html"><img src="images/buttons_navigatie_vrijwilligers_ih.jpg"></a><br>
     <a href="historie.html"><img src="images/buttons_navigatie_contact_ih.jpg"></a><br>
     </div>
     <a href='#' onMouseover="showLayer('collectieLayer');" onMouseout="timedLayer('collectieLayer');">
     <img src="images/buttons_navigatie_collectie_ih.jpg" align="right" border="0"></a>

Martijn schreef:

Code tags ;)

2 antwoorden

Gesponsorde links

pinquin - 20/09/2010 15:44 (laatste wijziging 20/09/2010 15:57)

HTML interesse

Hoi MissLizzy,

Als eerst is het setTimeout dus de 'o' van 'out' is zonder hoofdletter 'O' dus gewoon 'o'.
Ten tweede krijg ik een javascript error "layerid is not defined"
Dus ik heb een globale variable aangemaakt die dit opvangt (layer_id).

in de functie timedLayer() staan nu nog maar twee regels code en ik heb de onMouseover en onMouseout aangepast door er 'javascript: ' voor te zetten

en als laatste het openen van <script type="text/javascript"> aangepast.

hier is de code:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<script type="text/javascript">
var layer_id;
//functie om een submenu te laten zien
function showLayer(layerid) {
	var layer = document.getElementById(layerid);
	layer.style.visibility = "visible";
}

//functie om een submenu te verbergen
function hideLayer(layerid) {
	var layer = document.getElementById(layerid);
	layer.style.visibility = "hidden";
}

//functie om een submenu tijdelijk zichtbaar te maken
function timedLayer(layerid) {
	layer_id = layerid;
	var time = setTimeout("hideLayer(layer_id)", 3000);
}
</script>
</head>
<body>
en dit is de html van één van de menu opties met bijbehorende submenu's:
<div id="collectieLayer" style="background: #f00;">
<a href="museumcollectie.html"><img src="images/buttons_navigatie_vrijwilligers_ih.jpg" /></a><br />
<a href="historie.html"><img src="images/buttons_navigatie_contact_ih.jpg" /></a><br />
</div>
<a href='#' onMouseover="javascript: showLayer('collectieLayer');" onMouseout="javascript: timedLayer('collectieLayer');">
<img src="images/buttons_navigatie_collectie_ih.jpg" align="right" border="0" alt="no img" /></a>
</body>
</html>

<html>
<head>
<script type="text/javascript">
var layer_id;
//functie om een submenu te laten zien
function showLayer(layerid) {
	var layer = document.getElementById(layerid);
	layer.style.visibility = "visible";
}
 
//functie om een submenu te verbergen
function hideLayer(layerid) {
	var layer = document.getElementById(layerid);
	layer.style.visibility = "hidden";
}
 
//functie om een submenu tijdelijk zichtbaar te maken
function timedLayer(layerid) {
	layer_id = layerid;
	var time = setTimeout("hideLayer(layer_id)", 3000);
}
</script>
</head>
<body>
en dit is de html van ��n van de menu opties met bijbehorende submenu's:
<div id="collectieLayer" style="background: #f00;">
<a href="museumcollectie.html"><img src="images/buttons_navigatie_vrijwilligers_ih.jpg" /></a><br />
<a href="historie.html"><img src="images/buttons_navigatie_contact_ih.jpg" /></a><br />
</div>
<a href='#' onMouseover="javascript: showLayer('collectieLayer');" onMouseout="javascript: timedLayer('collectieLayer');">
<img src="images/buttons_navigatie_collectie_ih.jpg" align="right" border="0" alt="no img" /></a>
</body>
</html>

Dit werkt voor mij.

succes

gr,

MissLizzy - 06/10/2010 03:06 (laatste wijziging 06/10/2010 03:12)
Nieuw lid		Hallo Pinquin, Sorry voor mijn late reactie, maar ik ben kennelijk vergeten aan te geven dat ik een email-notificatie wilde van eventuele reacties, of dat kan niet. Zal dadelijk even kijken. Ik heb namelijk het setTimeout concept verlaten, omdat ik in een boek dat ik notabene zelf heb las dat setTimeout niet bij hyperlinks of layers werkt. Wel bij bijv. window. Inmiddels heb ik het probleem waar ik mee zat dus op een andere manier opgelost, maar dat neemt niet weg dat ik je wil bedanken voor je antwoord. Vraag me nu natuurlijk wel af hoe dat dan precies zit met die setTimeout functie. Het boek waarin ik het vond is uit de begintijd van JavaScript, is die informatie achterhaald of gewoon fout? Ik heb sowieso erg veel moeite om een goed boek te vinden over JavaScript. Heb er een paar, maar vaak moet ik allerlei stukjes informatie bij elkaar schrapen, ook van internet, om dingen of echt goed te begrijpen of om iets werkend te krijgen. Begin nu een beetje de grote lijnen te snappen, maar het leren van JavaScript kost me veel meer moeite dan HTML en CSS. P.S. Heb inmiddels gezien dat je bij instellingen van je profiel aan kunt geven of je al dan niet email wilt ontvangen als er een reactie op een post komt. Die stond standaard op geen email, vandaar. Heb ik nu dus aangepast.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten