[Javascript] Flash menu tevoorschijn laten komen

Pro web-ontwikkeling
#1

Ik heb een Flash menu dat ik tevoorschijn wil laten komen over de website heen, bovenaan de website. Dit menu moet niet meebewegen met het scrollen of zo. Gewoon een stilstaande navigatie, maar wel in Flash. Ik heb geprobeerd dit met css dropdowns op te lossen, maar dat werkte helaas niet. Zie ook [url=http://forum.macosx.nl/viewtopic.php?t=59784&highlight=]dit draadje[/url]. Nu is javascript dus aan de beurt. Helaas heb ik daar weinig kaas van gegeten.

Het lijkt op zich wel een beetje op php, dus het is me wel gelukt de originele code aan te passen, maar ik heb toch enige hulp nodig. Zoals ik het nu snel even heb opgelost heb ik 2 linkjes gemaakt die de functie in de javascript aanroepen. Helaas werken die linkjes maar 1 keer. Daarna komt de navigatie niet meer tevoorschijn. Weet iemand hoe ik dat kan fixen?

Daarnaast zou ik graag de aan en uit functie op 1 link/knop willen zetten, zodat je steeds op 1 knop kunt klikken om de navigatie te openen en te sluiten. Is dat ook mogelijk?

Overigens sta ik open voor elke andere mogelijke/betere oplosing.

De code die ik tot zover gefabriceerd en aangepast heb:

[code:1:557f74fd31]<html>
<head>
<title>Navigatie</title>
<style type="text/css">

#nav {
position: absolute;
background-color: transparent;
height: 600px;
width: 900px;
top: 0px;
left: 100px;
z-index: 5;
border: 1px solid red;
}

#tekst {
position: absolute;
z-index: 1;
width: 300px;
left: 50%;
margin-left: -150px;
}

</style>
<SCRIPT LANGUAGE="JavaScript1.2">

var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);

function openNav() {
if(!ns && !ie && !w3) return;
if(ie) navDiv=eval(‘document.all.nav.style’);
else if(ns) navDiv=eval(‘document.layers[“nav”]’);
else if(w3) navDiv=eval(‘document.getElementById(“nav”).style’);
if (ie||w3)
navDiv.visibility=“visible”;
else
navDiv.visibility =“show”;
}
function closeNav() {
if (ie||w3)
navDiv.display=“none”;
else
navDiv.visibility =“hide”;
}

//End–>
</script>

</head>
<body>

<div id="nav" style="visibility: hidden">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="900" HEIGHT="600" id="test" ALIGN="">
<PARAM NAME=movie VALUE="nav.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<EMBED src="nav.swf" quality=high WIDTH="900" HEIGHT="600" NAME="test" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

</div>

<a href="#" onClick="openNav()";>aan</a>
<a href="#" onClick="closeNav()";>uit</a>

<div id="tekst">
Blablabla
</div>

</body>
</html>[/code:1:557f74fd31]

#2

Inmiddels heb ik na veel gepruts 1 linkje aan beide acties kunnen koppelen. Nu rest alleen nog de vraag hoe ik het zo krijg dat het meerdere keren werkt. Ik kan nu 1 keer de navigatie tevoorschijn laten komen en weer weg klikken. Daarna werkt het pas weer als ik de pagina refresh, maar dat is niet de bedoeling. Wie o wie heeft een oplossing?

De link heb ik veranderd in:

[code:1:461993b733]<a href="#showNav" name="showNav" id="showNavButton" onClick="showNav()";>test</a>[/code:1:461993b733]
en de javascript:

[code:1:461993b733]<SCRIPT LANGUAGE="JavaScript1.2">
<!–
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);

function showNav() {

if &#40;document.getElementById&#40;&quot;showNavButton&quot;&#41;.name == &quot;showNav&quot;&#41; &#123;
    document.getElementById&#40;&quot;showNavButton&quot;&#41;.name=&quot;hideNav&quot;;
    document.getElementById&#40;&quot;showNavButton&quot;&#41;.href=&quot;#showNav&quot;;

    if&#40;!ns &amp;&amp; !ie &amp;&amp; !w3&#41; &#123; return &#125;;
    if &#40;ie&#41; &#123;
        navDiv=eval&#40;'document.all.nav.style'&#41;;
    &#125; else if&#40;ns&#41; &#123;
        navDiv=eval&#40;'document.layers&#91;&quot;nav&quot;&#93;'&#41;;
    &#125; else if&#40;w3&#41; &#123;
        navDiv=eval&#40;'document.getElementById&#40;&quot;nav&quot;&#41;.style'&#41;;
    &#125;
    if &#40;ie||w3&#41; &#123;
        navDiv.visibility=&quot;visible&quot;;
    &#125; else &#123;
        navDiv.visibility =&quot;show&quot;;
    &#125;
&#125; else &#123;
    document.getElementById&#40;&quot;showNavButton&quot;&#41;.name=&quot;showNav&quot;;
    document.getElementById&#40;&quot;showNavButton&quot;&#41;.href=&quot;#hideNav&quot;;

    if &#40;ie||w3&#41; &#123;
        navDiv.display=&quot;none&quot;;
    &#125; else &#123;
        navDiv.visibility =&quot;hide&quot;;
    &#125;
&#125;

}

//End–>
</script>
[/code:1:461993b733]

#3

Yes, ik heb het voor elkaar! Vrij simpel op zich, maar ik denk dat ik me te veel op de javascript heb gefocussed. Het lag namelijk aan de css wijziging door de javascript. Het viel mij ineens op dat bij het verbergen display="none" gebruikt wordt en bij het zichtbaar maken visibility="visible". Beide display en visibility moeten gebruikt worden, anders werkt het niet. Nu nog even testen in ie.

Uit de originele code:

[code:1:607a836c7f]
// Div met navigatie zichtbaar maken
if (ie||w3) {
navDiv.visibility="visible";
} else {
navDiv.visibility ="show";
}

// Div met navigatie verbergen
if (ie||w3) {
navDiv.display="none";
} else {
navDiv.visibility ="hide";
} [/code:1:607a836c7f]

Dit is veranderd:

[code:1:607a836c7f]
// Div met navigatie zichtbaar maken
if (ie||w3) {
navDiv.visibility="visible";
navDiv.display="inline";
} else {
navDiv.visibility ="show";
navDiv.display="inline";
}

// Div met navigatie verbergen
if (ie||w3) {
navDiv.visibility="hidden";
navDiv.display="none";
} else {
navDiv.visibility ="hide";
navDiv.display="none";
}
[/code:1:607a836c7f]