[JS][FireFox] Style wordt niet terugveranderd

[Mithrandir]

JavaScript:

node.className = node.className.replace(" over", "");

Lijkt niet te werekn. Eerst set ik de className als " over", en dat gaat goed. Dan haal ik de " over" weer weg, en op dat moment begint FireFox te buggen; de stylesheet wordt dan nameljik niet aangepast.

Ook als ik de className replace door niets (""), werkt het nog niet.

Quist had het zelfde probleem, maar we hebben het nog niet kunnen oplossen. Is dit een FireFox bug of ligt het toch aan m'n code? Een werkend voorbeeld is overigens te vinden op www.formsma.nl/got/testscript.htm

[ Voor 7% gewijzigd door Mithrandir op 10-01-2005 19:36 . Reden: typo :+ ]

[Woudloper]

Waarom werk je met .replace? Je kan toch ook gewoon de 'ClassName' overschrijven, dus:

JavaScript:

node.ClassName = "MouseOverSelected";

[Verwijderd]

Dat is om de "over" die je erin heb gefrot er weer uit te halen, en te zorgen dat de orginele class weer gezet wordt. Maar daar gaat het eigenlijk niet over he... Die bug van FF vind ik ook een beetje raar.

[Mithrandir]

Woudloper schreef op maandag 10 januari 2005 @ 19:22:
Waarom werk je met .replace? Je kan toch ook gewoon de 'ClassName' overschrijven, dus:

JavaScript:

node.className = "MouseOverSelected";

Ook dan werkt het niet. (Staat ook in m'n startpost).

[ Voor 6% gewijzigd door Mithrandir op 11-01-2005 12:30 . Reden: foutje in woudlopers code ;) ]

[Verwijderd]

Probeer eens node.className

[Mithrandir]

Verwijderd schreef op dinsdag 11 januari 2005 @ 09:25:
Probeer eens node.className

hm, moet een typefeout zijn, ik doe 't overal zonder hoofdletter (in de goede spelling dus).

Nog steeds blijft het probleem bestaan.

[Verwijderd]

Met de url die je geeft, http://www.formsma.nl/got/testscript.htm , zie ik geen verschil tussen Firefox en IE.
Klapt bij jou het menu niet open? Bij mij wel...

Deze code zou inderdaad problemen kunnen geven, trouwens:

code:

node.className = node.className.replace(" over", "");

Er is nl een bug in Mozilla die, als je de className zet, de spaties aan het begin van de className weghaalt.
Voorbeeld:
node.className=' over' , wordt dan 'over' in Mozilla.
Als workaround zou je zoiets kunnen gebruiken (niet getest):

code:

node.className = node.className.replace(/ ?over/g, "");

[Mithrandir]

Verwijderd schreef op dinsdag 11 januari 2005 @ 13:15:
Met de url die je geeft, http://www.formsma.nl/got/testscript.htm , zie ik geen verschil tussen Firefox en IE.
Klapt bij jou het menu niet open? Bij mij wel...

Deze code zou inderdaad problemen kunnen geven, trouwens:

code:

node.className = node.className.replace(" over", "");

Er is nl een bug in Mozilla die, als je de className zet, de spaties aan het begin van de className weghaalt.
Voorbeeld:
node.className=' over' , wordt dan 'over' in Mozilla.
Als workaround zou je zoiets kunnen gebruiken (niet getest):

code:

node.className = node.className.replace(/ ?over/g, "");

code:

var nodes = document.getElementById("nav").getElementsByTagName("li");

startList = function()
{
    for(i = 0; i < nodes.length; i++)
    {
        var node = nodes[i];
        node.onmouseover = function() 
        {
            this.className += " over";
        }
        
        node.onmouseout = function() 
        {
            node.className = node.className.replace(/ ?over/g, "");
        }
    }
}

window.onload=startList;

Werkt nog steeds niet. Ook het vervangen van de className door niets (een lege string) werkte ook niet. Schijnbaar zit er iets fout bij het updaten van het menu.

[Verwijderd]

Is het probleem soms dat menu-items soms niet gesloten worden?
Dat probleem kan ik zien in Mozilla1.7, maar niet in Firefox trunk. Dus ik krijg het idee dat het een bugje is in Mozilla die inmiddels is gefixed.

Misschien kun je beter de onmouseover en de onmouseout event handlers niet op de "li" te zetten, maar op de "a" die er in zit. Maar dan moet het een en ander aangepast worden.
Ik heb zoiets dergelijks ook een keer gemaakt:
http://martijn.heelveel.info/test/tropenbosmenu.htm
Ik weet eigenlijk niet meer zo goed waarom ik dat deed, de event handlers op de links leggen, maar het had een goede reden volgens mij.

[Clay]

code:

node.onmouseout = function() {
   node.className = node.className.replace(/ ?over/g, "");
}

Omdat dit in een for loop zit is "node" bij de volgende i overschreven door de volgende, en klopt de referentie niet meer in de eventhandler. Het zijn niet steeds nieuwe vars voor "node"

code:

this.className = this.className.replace(/ ?over/g, "");

werkt al beter

[Mithrandir]

Clay schreef op dinsdag 11 januari 2005 @ 15:57:

code:

node.onmouseout = function() {
   node.className = node.className.replace(/ ?over/g, "");
}

Omdat dit in een for loop zit is "node" bij de volgende i overschreven door de volgende, en klopt de referentie niet meer in de eventhandler. Het zijn niet steeds nieuwe vars voor "node"

code:

this.className = this.className.replace(/ ?over/g, "");

werkt al beter

Eh, dom foutje dat alleen in deze versie zit. Nu is het behaviour in mozilla helemáál buggy; de ene keer werkt het wel, de andere keer niet. Zelfs zonder refresh er tussendoor.

[edit]
Na wat onderzoek merk ik dat firefox de helft van de keren wél een onmouseout() gooit, en de andere helft van de keren niet.

code:

var nodes = document.getElementById("nav").getElementsByTagName("li");

startList = function()
{
    for(i = 0; i < nodes.length; i++)
    {
        var node = nodes[i];
        node.onmouseover = function() 
        {
            this.className += " over";
            document.getElementById("bla").innerHTML += ".";
        }
        
        node.onmouseout = function() 
        {
            this.className = node.className.replace("over", "");
            document.getElementById("bla").innerHTML += "!";
        }
    }
}

window.onload=startList;

[ Voor 37% gewijzigd door Mithrandir op 11-01-2005 16:10 ]

[Clay]

't is ook iets met dat wisselen van display. Hele stukken van het menu gaan er van knipperen, misschien dat die daardoor wat events mist. Als je bv. visibility doet ipv display gaat het zo te zien wel goed. Wat je ook kan doen is het in moz gewoon met :hover sturen zonder script.

[Verwijderd]

Clay, je hebt wel gelijk. Wanneer je echter wilt dat het menu pas sluit nadat je x aantal milliseconden er buiten bent geweest, ontkom je niet aan JavaScript.

[Mithrandir]

Wat Quist zegt Dit was maar het beginnetje.

Toch kan ik er nu nog niet meer werken of zelfs maar garanderen dat het gaat werken odner firefox, omdat maar de helft van de mouseouts() worden afgevangen. lezen

Ik zal daar eens wat mee proberen, maar ook onder IE krijg ik het bijna niet voor elkaar. Het feit dat je geen references mee kunt geven in timerfuncties is wel een groot gemis in javascript

[edit]
Ik weet hoe het op te lossen is, maar dan nog wordt de code onleesbaarder en is het dan nog moeilijker te voorspellen wat er gaat gebeuren. Al die mouseover() en mousouts() erbij maakt het helemaal een crime.

[ Voor 56% gewijzigd door Mithrandir op 11-01-2005 18:52 ]

[Clay]

Ik zal daar eens wat mee proberen, maar ook onder IE krijg ik het bijna niet voor elkaar. Het feit dat je geen references mee kunt geven in timerfuncties is wel een groot gemis in javascript

geen feit

code:

function Melp() {
   var self = this;
   this.kloek = "woei";
   this.timer = setTimeout(function(){ 
      self.spef();
   }, 50);
}

Melp.prototype.spef = function() {
   alert(this.kloek);
}

new Melp();

Werkt overigens niet in IE5.0 geloof ik, functieref in een timeout of interval.

Ik weet hoe het op te lossen is, maar dan nog wordt de code onleesbaarder en is het dan nog moeilijker te voorspellen wat er gaat gebeuren. Al die mouseover() en mousouts() erbij maakt het helemaal een crime.

Je kan ipv al die mouseovers en mouseouts ook 1 van elk op document doen, en dan gewoon het huidige element uit het event halen:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
   <title> Woei </title>
   <script type="text/javascript">
   
   window.onload = function() {
      try {
         document.addEventListener('mouseover', handleMouseOver, false);
         document.addEventListener('mouseout', handleMouseOut, false);
      } catch(inferiorBrowserException) {
         document.attachEvent('onmouseover', handleMouseOver);
         document.attachEvent('onmouseout', handleMouseOut);      
      }
   }

   function handleMouseOver(event) {
      var target = event.target || event.srcElement;
      window.status = target.nodeName;
   }

   function handleMouseOut(event) {
      var target = event.target || event.srcElement;
      window.status = target.nodeName;
   }
   
   </script>
</head>
<body>   
   <div>
      test
      <span> span </span>
   </div>
</body>
</html>

[ Voor 57% gewijzigd door Clay op 11-01-2005 20:53 ]