[JS] slaat functie over of geeft geen waarde aan variabele

[Theske]

Goedemorgen,
Ik heb een menu balk die met behulp van javascript wordt aangestuurd. Omdat ik de verschillende menubalken verschillende kleuren wil geven maak ik gebruik van meerdere div styles. Wat nou het probleem is dat ik die verschillende styles niet opgevraagd kan krijgen.
De menubalk roep ik als volgt aan....

HTML:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu1(this, event, menu1, 1, '160px')" onMouseout="delayhidemenu()">Het Bureau</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu1(this, event, menu2, 2, '160px')" onMouseout="delayhidemenu()">Onze Principes</a> |
<!-- enz.... -->

En vervolgens krijg je deze js functies::

JavaScript:

function dropdownmenu1(obj, e, menucontents, menustyle, menuwidth){
dropdownmenu(obj, e, menucontents, menustyle, menuwidth)
menudiv(menustyle)
}

function menudiv(menustyle){
var menustylenr=menustyle
}

if (ie4||ns6){

if (menustylenr == 1) 
document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 2)
document.write('<div id="dropmenudiv2" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
// enz....

}

Met mijn inzicht zou ik denken dat wanneer en in de link , de onMouseover, als menustyle een 1 is aangeven hij gaat voor de optie if(menustylenr==1), enz...
Dit doet hij dus niet, hij klapt nu geen enkele menu balk uit.
Wanneer ik boven de functie 'dropdownmenu1' hetvolgende doe::

JavaScript:

var menustylenr =2

Dan pakt hij, zoals aangegeven, de div id 'dropmenudiv2'. Dit dan alleen wanneer menustyle=2 is doorgegeven vanuit de onMouseover functie. De rest klapt uit dus niet uit.

Hij slaat dus of de functie menudiv over of hij neemt wel die functie maar geeft de variabele menustylenr geen/niet de juiste waarde mee.
Ik hoop dat jullie begrijpen wat ik allemaal bedoel en dat jullie me ermee kunnen helpen....

[frickY]

Bij je functiecall geeft je "menu1" en "menu2" mee als vars, ipv strings. Zet ze tussen quotes.

[Theske]

menu1, menu2 enzz die doen het allemaal goed, daar is verder helemaal niks mis mee...
het gaat om de waardes na menu1... de 'gewone' 1,2,3.... Ook bij deze heb ik quotes geprobeerd, maar helaas werkte dat ook niet

edit::
de menu1,menu2 enz.. staan op deze manier in de JS code.. en dat werkt verder allemaal goed...

JavaScript:

var menu1=new Array()
menu1[0]='<a href="index.php?m=1">Missie</a>'
menu1[1]='<a href="nieuws.htm">Nieuws</a>'
menu1[2]='<a href="kwaliteit.htm">Kwaliteit</a>'
menu1[3]='<a href="vestigingen.htm">Vestigingen</a>'
menu1[4]='<a href="geschiedenis.htm">Geschiedenis</a>'
menu1[5]='<a href="intranet.htm">Intranet</a>'

[ Voor 52% gewijzigd door Theske op 09-11-2005 08:35 ]

[André]

Alert menustyle op diverse plekken en je zult snel genoeg zien waar het mis gaat

[Theske]

Ik heb 'm op verschillende plekken geprobeerd en het is allemaal weer lekker vaag
Ik krijg nooit een alert behalve wanneer ik de variabele 'menustylenr' de waarde '2' meegeef, dan krijg ik een alert wanneer ik met mijn muis over het tweede menubalkje ga. En als ik 'm de waarde 1 mee geef, dan alleen bij menubalk 1.
Ik vraag om menustyle te alerten, maar ik krijg die alleen te zien wanneer in menustylenr een waarde meegeef

Dusssss:::

JavaScript:

var menustylenr =2

var ie4=document.all
var ns6=document.getElementById&&!document.all


function dropdownmenu1(obj, e, menucontents, menustyle, menuwidth){
dropdownmenu(obj, e, menucontents, menustyle, menuwidth)
menudiv(menustyle)
alert(menustyle) // ik krijg alleen hier de alert te zien wanneer ik over de tweede balk heenga
}

function menudiv(menustyle){
var menustylenr=menustyle
alert(menustyle) // en hier, dit is dus alleen wanneer ik de variabele menustylenr een waarde meegeef
}

Edit:::
In de functie dropdownmenu1 ziet hij volgens mij dus wel de 4e parameter 'menustyle', maar hij geeft hem niet verder door naar de functie menudiv ofso. Want in de functie dropdownmenu wordt hij ook meegestuurd en daar doet hij wel gewoon zijn werk --->

JavaScript:

function dropdownmenu(obj, e, menucontents, menustyle, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()

if (menustyle == 1)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv1") : dropmenudiv1
if (menustyle == 2)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv2") : dropmenudiv2

Ik snap verder gewoon niet wat er nou aan de hand is, waarom hij het niet doet

[ Voor 30% gewijzigd door Theske op 09-11-2005 10:00 ]

[JKVA]

haal in je 'menudiv' functie eens 'var' weg. Die var zorgt ervoor dat deze variabele alleen in de scope van je functie bestaat.

[Theske]

ik heb het nu dus zo::

JavaScript:

function menudiv(menustyle){
menustylenr=menustyle
//alert(menustyle)
}

Mocht niet baten...

[JKVA]

maar is het nu wel zo dat je globale menustylenr gezet is? Dat lijkt me namelijk wel, anders krakt ie ergens.

[Theske]

je bedoelt dus of ik ergens de variabe menustylenr heb aangemaakt....
ik heb de volgende dingen geprobeerd::

JavaScript:

var menustylenr        //poging 1
var menustylenr =''    //poging 2
var menustylenr ='3'  // alleen deze werkt dus ergens (bij menubalk 3)

// hier de functie
function menudiv(menustyle){
menustylenr=menustyle
//alert(menustyle)
}

// en hier waarmee ik ze probeer 'op te vragen'
if (menustylenr == 1)
document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 2)
document.write('<div id="dropmenudiv2" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 

Still not working...

[JKVA]

even wat algemene opmerkingen:
- waarom maak je 3x dezelfde variabele aan? das vragen om fouten.
- achter statements moet je eigenlijk puntkommas zetten, het hoeft niet per-se, maar het zorgt weleens voor fouten.
- die document.write begrijp ik even niet.

[Theske]

even wat algemene opmerkingen:
- waarom maak je 3x dezelfde variabele aan? das vragen om fouten.

ik heb ze alledrie afzonderlijk geprobeerd, vandaar die //poging 1,2 erachter...

- achter statements moet je eigenlijk puntkommas zetten, het hoeft niet per-se, maar het zorgt weleens voor fouten.

ja, daar was ik ook al over aan het twijfelen, ook geprobeerd maar helaas...

- die document.write begrijp ik even niet.

daarmee maak ik die div aan en die overige functies...

Ik heb deze code trouwens van dynamicdrive.com afgehaald en hem naar mijn eigen smaak proberen te veranderen.. dat ging dus goed totdat ik verschillende kleuren wilde.

[JKVA]

Ok, maar als het gewerkt heeft, heb ik sterk de indruk dat je iets vergeten bent of iets weggehaald hebt. Vooral het feit dat je die document.writes niet in een functie hebt staan, oogt vreemd. Als ik dit zo lees, komt ie hier maar één keer doorheen en dat is tijdens het laden van de pagina.

Kun je ook de functies clearhidemenu en dynamichide even laten zien?

[Theske]

Tja, het heeft allemaal netjes gewerkt ja.
Het enige wat ik heb toegevoegd is die extra parameter in de onMouseover en de functie menudiv (omdat ik dus gebruik wil maken van verschillende styles)
hieronder de twee functies

code:

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

als je behoefte hebt kan ik ook het gehele script posten....

edit: een verkeerde functie gepost, nu dus de goeie

[ Voor 14% gewijzigd door Theske op 09-11-2005 10:52 ]

[JKVA]

het hele script is misschien wel zo handig ja

[Theske]

hierbij mijn code.. (ik heb er maar java bij gezet ipv js, voor de mooie kleurtjes

Java:

var menu1=new Array()
menu1[0]='<a href="index.php?m=1">Missie</a>'
menu1[1]='<a href="nieuws.htm">Nieuws</a>'
menu1[2]='<a href="kwaliteit.htm">Kwaliteit</a>'
menu1[3]='<a href="vestigingen.htm">Vestigingen</a>'
menu1[4]='<a href="geschiedenis.htm">Geschiedenis</a>'
menu1[5]='<a href="intranet.htm">Intranet</a>'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href="missie.htm">Algemeen</a>'
menu2[1]='<a href="nieuws.htm">Realistisch</a>'
// enz......

var menuwidth='165px' //default menu width
var menubgcolor='#929496'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
var menustylenr

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all


function dropdownmenu1(obj, e, menucontents, menustyle, menuwidth){
dropdownmenu(obj, e, menucontents, menustyle, menuwidth)
menudiv(menustyle)
//alert(menustyle)
}

function menudiv(menustyle){
menustylenr=menustyle;
//alert(menustyle)
}

if (ie4||ns6){

if (menustylenr == 1)
document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 2)
document.write('<div id="dropmenudiv2" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 3)
document.write('<div id="dropmenudiv3" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 4)
document.write('<div id="dropmenudiv4" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 5)
document.write('<div id="dropmenudiv5" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
if (menustylenr == 6)
document.write('<div id="dropmenudiv6" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
}


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menustyle, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()

if (menustyle == 1)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv1") : dropmenudiv1
if (menustyle == 2)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv2") : dropmenudiv2
if (menustyle == 3)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv3") : dropmenudiv3
if (menustyle == 4)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv4") : dropmenudiv4
if (menustyle == 5)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv5") : dropmenudiv5
if (menustyle == 6)
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv6") : dropmenudiv6

populatemenu(menucontents)


if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

[JKVA]

kun je ook de complete html geven, dan kan ik de context zien

stuur het maar als zip naar ... (e-mail maar weer weggehaald )

[ Voor 21% gewijzigd door JKVA op 09-11-2005 11:28 ]

[Theske]

done..

[JKVA]

Een vluchtige kijk op het script leert me dat die div's voor het menu alleen in de init gezet worden. Tenminste, dat zou de bedoeling zijn. Nu heb jij zelf daar een if omheen gezet op basis van een variabele die je zet tijdens een muisklik.

Nu weet ik niet precies wat je doel is:
a) je bepaalt de stijl van de site eenmalig tijdens het laden van de pagina, of
b) je bepaalt de stijl aan de hand van waar je op klikt.

Welke van de twee is het?

Als het de eerste optie is, dan kun je de meeste code laten staan, maar moet je zorgen dat tijdens het laden, dus op de plaats waar je nu je menustylenr initialiseert, een getalletje in die variabele mikt.
Als het de tweede optie is, dan moet je zorgen dat je de code met die div's in een functie zet en die aanroept, maar hoe dat zich gaat gedragen weet ik niet precies. (ik ben geen fan van in javascript html bouwen )

[Theske]

oke, bedankt voor de moeite om ernaar te kijken...
ik ga gedeeltelijk voor optie 2, het is niet de bedoeling dat er iets gebeurd wanneer er op geklikt is (behale dan het weghalen van de menubalk eruit komt), maar juist dat de menubalk uit wordt geklapt wanneer er met de muis over het kopje is gegaan. Vandaar de onMouseover.
De onMouseover geeft dus een aantal parameters door in de functie, waaronder dus de 'menustyle' die de waardes 1 t/m 6 bevat.
Nu wil ik dat wanneer er met de muis over het kopje met de waarde 1 wordt gegaan... div 1 wordt geladen, wanneer er met de muis over het kopje met de waarde 2 wordt dat dan div 2 wordt geladen enz...

Dus ook hiervoor raad je me aan om elke div in een aparte functie te zetten en dan iets als...
if menustyle==1
menustyle1()
if menustyle==2
menustyle()
enz....

of heb ik dit fout begrepen?

[JKVA]

Het gaat me vooral om de volgende code (ik heb het inspringen en de accolades even naar mijn eigen manier omgezet). Deze wordt alleen uitgevoerd tijdens het laden van de pagina. Op dat moment heeft de variabele menuStyle nog geen waarde, waardoor er dus geen één div geplaatst wordt. En al helemaal niet alle div's.

JavaScript:

    if (ie4||ns6)
    {
        if (menustylenr == 1)
            document.write('<div id="dropmenudiv1" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
        if (menustylenr == 2)
            document.write('<div id="dropmenudiv2" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
        if (menustylenr == 3)
            document.write('<div id="dropmenudiv3" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
        if (menustylenr == 4)
            document.write('<div id="dropmenudiv4" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
        if (menustylenr == 5)
            document.write('<div id="dropmenudiv5" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
        if (menustylenr == 6)
            document.write('<div id="dropmenudiv6" style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 
    }

Wat mij het slimste lijkt, is gewoon in html alle div's te plaatsen (begin eerst zonder PHP, maar gewoon simpel een aantal hard gecodeerde menu's, dan heb je meer controle) en deze div's het style-attribuut "visibility: hidden;" mee te geven (zoals je in je document.writes ook al hebt staan).
Daarna maak je een functie waarmee je de style omzet van wel naar niet visible (kan ook inline).
Als dat werkt, kijk je of je stijl van je menu netjes kan krijgen.

Nu is het namelijk lastig om de fout te vinden omdat alles tegelijk gebeurt en je niet makkelijk de fout kan traceren.

Ps. Zulke if statements zijn niet echt nuttig, volgens mij kan het beter zo:

JavaScript:

    if (ie4||ns6)
    {
        document.write('<div id="dropmenudiv"'+menustylenr+'style="visibility:hidden;width:'+menuwidth+';" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>');
    }

[Theske]

Oke, bedankt voor je reactie. Ik ga er maar weer mee aan de slag.
En die efficientere manier die jij gaf wilde ik eerst ook gaan gebruiken, maar dat werkte dus ook niet helemaal vandaar dat ik het zo had gedaan.
Maar ik ga er maar weer mee knutselen, bedankt voor de moeite en hulp!