[js][ie] toggle menu werkt niet in ie6

[dossiewossie]

Ik heb een kaart van nederland waarop ik absoluut gepositioneerde anchors plaats met een rondje als achtergrond.
Elk rondje staat voor een depot van een bedrijf.

De bedoeling is dat als je op een rondje klik, het bijbehorende verborgen div zichtbaar wordt gemaakt.
Dit werkte, ook in ie. Maar daarna wou ik dat de achtergrond van de anchor veranderde naargelang hierop het laatst geklikt was ofniet (een groter rondje).

Nu werkt het naar behoren in firefox, maar ie slaat op hol.

de js functie:

JavaScript:

    c_naam= false;
        
    function toggle_depot(obj)
    {
        
        
    
        naam = obj.id;
        naam_content = obj.id + '_content';
        
        if(c_naam == naam)
        {
            
        }
        else if (c_naam == false)
        {
        document.getElementById(naam_content).style.display = 'block';  
        document.getElementById(naam).style.backgroundImage= "url('on.gif');";
        c_naam = naam;  
        }
        else
        {
        c_naam_content = c_naam + '_content';   
        document.getElementById(c_naam_content).style.display = 'none'; 
        document.getElementById(naam_content).style.display = 'block';  
        document.getElementById(naam).style.backgroundImage= "url('on.gif');";
        document.getElementById(c_naam).style.backgroundImage= "url('off.gif');";

        c_naam = naam;
        }       
        
        
    }   
        

de aanroep:

HTML:

<div id="content">
    <!-- begin content div-->   
    
        <div class="depot" id="name1_content">
        <a style=""font-weight:bold">name 1</a><br>
            <br>
            <a>adres</a>
        </div>  

        <div class="depot" id="name2_content">
        <a style=""font-weight:bold">name 2</a><br>
            <br>
            <a>adres</a>
        </div>  
        
        <div class="depot" id="name3_content">
        <a style=""font-weight:bold;">name 3</a><br>
            <br>
            <a>adres</a>
        </div>                  
    <!-- einde content div -->  
    </div>
    
    <div id="ned">
        <div style="position:relative;width:300px;height:362px;">
    <!-- begin content div -->      
        <a onclick="toggle_depot(this);" class="depot_ins" id="name1"> </a>
        <a onclick="toggle_depot(this);" class="depot_ins" id="name2"> </a>
        <a onclick="toggle_depot(this);" class="depot_ins" id="name3"> </a>
    <!-- einde content div -->      
        </div>
    </div>

Ik zoek me een ongeluk of misschien de anchor geen background mag hebben ofzo, maar ik heb vooralsnog niets gevonden.

[dossiewossie]

Na een hoop gekloot lijkt dit wel te werken:

JavaScript:

document.getElementById(naam).style.background= 'url(on.gif) no-repeat';

Geen aanhalingstekens om de url van het plaatje, wat in de css (volgens mij) wel moet.

[Cartman!]

Nee hoor, dat moet niet.

http://www.w3schools.com/css/pr_background.asp

Had je daar kunnen vinden.
Btw, check je style="" ook

[dossiewossie]

Ja, kheb em net al door de validator gehaald en ff de foutjes eruit gehaald

[Michali]

IE schijnt problemen te hebben met het veranderen van CSS background met JS. Dit heb ik zelf ook eens ondervonden. Ik heb het toen opgelost door het zetten van het plaatje iets te vertragen via een timeout:

JavaScript:

setTimeout(
  function()
  {
    document.getElementById(naam).style.background= 'url(on.gif) no-repeat';
  },
  1
);

Vraag me niet waarom dit wel werkt. Als je dit zo gaat toepassen kan ik je aanraden wel even te gaan uitzoeken wat het verschil tussen globale en lokale variabelen is, en wat de keyword 'var' daar mee te maken heeft.

[dossiewossie]

Michali schreef op woensdag 01 november 2006 @ 13:20:
IE schijnt problemen te hebben met het veranderen van CSS background met JS. Dit heb ik zelf ook eens ondervonden. Ik heb het toen opgelost door het zetten van het plaatje iets te vertragen via een timeout:

JavaScript:

setTimeout(
  function()
  {
    document.getElementById(naam).style.background= 'url(on.gif) no-repeat';
  },
  1
);

Vraag me niet waarom dit wel werkt. Als je dit zo gaat toepassen kan ik je aanraden wel even te gaan uitzoeken wat het verschil tussen globale en lokale variabelen is, en wat de keyword 'var' daar mee te maken heeft.

Hmm, hij werkt nu wel, ik hoop niet dat ik strax op mn bek ga in een andere browser.

En over de scope van de variabelen, zijn er negatieve gevolgen merkbaar als ik het zo implementeer?

Voor de netheid kan ik natuurlijk de variabelen die ik binnen de functie declareer en daarna niet meer nodig heb een globale scope geven, maar ze worden toch steeds weer overschreven, dus dan kom ik toch ook niet in de problemen? toch?

[Michali]

Het probleem heeft hier te maken met de closure. De anomieme functie, die gebruik maakt van globale variabel naam, krijgt een timeout. Stel dat dit 1 seconde is (het is nu 1 ms), en je daarbinnen de functie toggle_depot aanroept. Dan wordt naam overschreven voordat de functie is uitgevoerd. Met een lokale variabel had je daar geen last van, omdat de lokale variabel naam voor beide functies dan een andere variabel is.

Als een variabel lokaal is, declareer hem dan altijd lokaal. Dit kan je ook problemen schelen bij het maken van een loopje:

JavaScript:

function start()
{
    for ( i = 0; i < 10; i++ )
    {
        print(i);
    }
}

function print(a)
{
    for ( i = 0; i < 5; i++ )
    {
        document.body.innerHTML += "(" + a + ", " + i + ")<br/>";
    }
}

start();

Wat denk je bijvoorbeeld wat er gaat gebeuren als je dit uitvoert?

[ Voor 5% gewijzigd door Michali op 01-11-2006 14:01 ]

[dossiewossie]

True, true.

Je hebt gelijk, voorkomen is beter dan genezen.

Ben nieuw met javascript, dus ik kan maar beter gelijk de juiste werkwijze aannemen.

Weet je toevallig nog in welke browser je die settimeout nodig had?

Want ik heb em hier niet nodig voor ie6

[Michali]

Voor IE6

Maar ik weet niet of je hetzelfde probleem hebt dan. Mijn probleem was dat als ik dynamisch een css background zette, deze helemaal niet werd weergegeven. Pas als ik het vertraagd deed, werkte dit wel.