Ga naar inhoud

[JavaScript] Layer tevoorschijn toveren?


Aanbevolen berichten

Ik heb een probleem, en wel dat het mij niet lukt om bij het laden van de pagina een layer tevoorschijn te toveren als het ware een popup. (Is dat een correcte Nederlandse zin?) Ik heb het geprobeerd met onderstaande broncode maar het vreemde is dat de code (handmatig) pas werkt nadat je 1 keer schijnbaar geen reactie krijgt. Daarna werkt het. Meerdere keren de functie aanroepen bij onload werkt niet. Het laten zien en verbergen is dus niet het probleem, maar het feit dat het niet werkt met de onload functie in JavaScript. [code:1:7a1ed9ee4c]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Popup Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all"> <!-- div#UCmessage { position: absolute; width: 30%; left: 30%; top: 20%; z-index: 1; display: none; margin: 0; padding: 5%; background-color: yellow; border: 3px solid black; } --> </style> <script type="text/javascript"> <!-- var isDOM=(document.getElementById)?true:false var isOpera=isDOM && window.opera function setBrowser() { if (navigator.appVersion.charAt(0) == "4"){ if (navigator.appName.indexOf("Explorer") >= 0){ isIE4 = true;} else{ isNav4 = true;}} else if (navigator.appVersion.charAt(0) > "4"){ isNav6 = true;} } function showHideUCmessage() { if(isDOM && !isOpera){ if(getIdProperty( "UCmessage", "display") == "none"){ setIdProperty( "UCmessage", "display", "block" ); }else{ setIdProperty( "UCmessage", "display", "none" ); } } } function getIdProperty( id, property ) { if (isNav6) { var styleObject = document.getElementById( id ); if (styleObject != null) { styleObject = styleObject.style; if (styleObject[property]) { return styleObject[ property ]; } } styleObject = getStyleBySelector( "#" + id ); return (styleObject != null) ? styleObject[property] : null; } else if (isNav4) { return document[id][property]; } else { return document.all[id].style[property]; } } function getStyleBySelector( selector ) { if (!isNav6) { return null; } var sheetList = document.styleSheets; var ruleList; var i, j; /* look through stylesheets in reverse order that they appear in the document */ for (i=sheetList.length-1; i >= 0; i--) { ruleList = sheetList[i].cssRules; for (j=0; j<ruleList.length; j++) { if (ruleList[j].type == CSSRule.STYLE_RULE && ruleList[j].selectorText == selector) { return ruleList[j].style; } } } return null; } function setIdProperty( id, property, value ) { if (isNav6) { var styleObject = document.getElementById( id ); if (styleObject != null) { styleObject = styleObject.style; styleObject[ property ] = value; } } else if (isNav4) { document[id][property] = value; } else if (isIE4) { document.all[id].style[property] = value; } } function onWindowLoad() { setBrowser(); showHideUCmessage(); // alert('Functie onWindowLoad succesvol aangeroepen.'); } window.onload = onWindowLoad(); //--> </script> </head> <body> <!-- Tijdelijk Under Construction bericht --> <div id="UCmessage"> <h1>Under Construction</h1> <p>Er wordt op dit moment aan de site gewerkt, het kan dus zijn dat sommige pagina's niet werken of dat er zich fouten voordoen.<br /><br />Excuses voor het ongemak.<br /><br /><a href="javascript:showHideUCmessage();">Dit bericht sluiten.</a></p> </div> <p><a href="javascript:showHideUCmessage();">CSS Pop-up tonen/verbergen.</a></p> </body> </html>[/code:1:7a1ed9ee4c]Please help... :( - Bas
Link naar reactie
Riiiiiiight.... :-? Maar het werkt wel! :D Het vage is alleen dat ik nu in onWindowLoad() 2x de functie showHideUCmessage() moet aanoepen om hem direct te tonen terwijl het volgens mij al met 1x zou moeten werken... Heel vreemd, maar in ieder geval bedankt! Edit: het werkt alleen in N7, IE5.5 doet niets... Argh! [url=http://www.basje.com/test/showhidelayer.php]Check[/url]. - Bas
Link naar reactie
IE55 blijft hangen op de "isNav6"; [code:1:5fc95341a3] function setBrowser() { if (navigator.appVersion.charAt(0) == "4"){ if (navigator.appName.indexOf("Explorer") >= 0){ isIE4 = true;} else{ isNav4 = true;}} else if (navigator.appVersion.charAt(0) > "4"){ isNav6 = true;} } [/code:1:5fc95341a3] moz heeft nergens last van...
Link naar reactie
Aan een eventhandler geef je een referentie naar een functie op en niet een aanroep van een functie. Dus dit is [color=red:2192d02b65][b:2192d02b65]fout[/b:2192d02b65][/color:2192d02b65]: [code:1:2192d02b65] window.onload = onWindowLoad(); [/code:1:2192d02b65] En dit is [b:2192d02b65][color=green:2192d02b65]goed[/color:2192d02b65][/b:2192d02b65]: [code:1:2192d02b65] window.onload = onWindowLoad; [/code:1:2192d02b65] Of dat van enige invloed is op je probleem weet ik niet, maar voor de volledigheid vermeld ik het even.
Link naar reactie
Mensen, het werkt, heel erg bedankt! :D Zowel de opmerkingen van teacher als van Annie hebben hiertoe geleid. Nu nog even een vraagje: in N7 en IE6 zie je dat bij het laten zien en verbergen van de layer de hele inhoud een beetje verplaatst... Hoe komt dit? Natuurlijk zou ik de div helemaal onderaan alle content kunnen zetten, maar toch zou ik graag een verklaring hiervoor horen. Kijk voor de code even in de bron van het [url=http://www.basje.com/test/showhidelayer.php]werkende voorbeeld[/url]. - Bas
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...