Javascript werkt.. maar niet in IE6/7

[peaceful_turing]

Ik ken geen Javascript, maar toch is het me gelukt om dit in elkaar te flanzen:

code:

//Sequence of the background colors from the menu items, from left to right.
var backgrounds = ["blue", "green", "pink", "purple"];

//Gives the menu item wich has the class 'active' the same background as what it should get in the function 'MenuColorChange'.
function MenuActiveColor() { 
    var ActiveLi = $('.active').attr('id');
    var Number = ActiveLi.replace(/[^0-9]/g, '');
    var ActualNumber = Number - 1;
    document.getElementById(ActiveLi).setAttribute('style', "background: url(\"images/" + backgrounds[(ActualNumber % backgrounds.length)] + ".png\") no-repeat top;");
}

//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
function MenuColorChange() {
    for (var i = 0; i <= 10 ; i++) {
        document.getElementById("custom-menu-item-id-" + (i + 1)).setAttribute('onMouseOver', "this.style.backgroundImage='url(images/" +  backgrounds[(i % backgrounds.length)] + ".png)';");
        document.getElementById("custom-menu-item-id-" + (i + 1)).setAttribute('onMouseOut', "this.style.background='none'; MenuActiveColor();");
    }
}

// Load both functions when the document loads.
window.onload = function() {
    MenuActiveColor();
    MenuColorChange();
}

Ik heb heel veel geprobeerd te vervangen etc, maar ik kom er maar niet achter waarom dit niet draait in IE6/7.

Zien jullie het zo snel?


Bedankt,

Joachim

[Cyphax]

Ik denk dat het komt omdat je setAttribute gebruikt. Dat werkt niet goed in IE6 en IE7.

Hier heb je misschien wat aan: http://www.codingforums.com/showthread.php?t=44455

[Voor 35% gewijzigd door Cyphax op 30-06-2011 18:07]

[R4gnax]

JavaScript:

$( document ).ready( function() {
    var BACKGROUNDS = [ "blue", "green", "pink", "purple" ];
    
    $( ".custom-menu-item" )
        .each( function( index ) {
            $( this ).data(
                "menu-item-bg",
                "url(\"images/" + BACKGROUNDS[ index % BACKGROUNDS.length ] + ".png\")"
            );
        })
        .bind( "mouseenter", function( event ) { 
            $( this ).css({ "background-image" : $( this ).data( "menu-item-bg" ) });
        })
        .bind( "mouseleave", function( event ) {
            $( this ).not( ".active" ).css({ "background-image" : "none" });
        });
        .filter( ".active" )
        .css({ "background-image" : $( this ).data( "menu-item-bg" ) });                
    })
});

Als je dan toch jQuery gebruikt, neem dan even de moeite om te lezen hoe de library werkt en vermijdt een hoop sores.

[peaceful_turing]

R4gnax schreef op donderdag 30 juni 2011 @ 18:38:

JavaScript:

$( document ).ready( function() {
    var BACKGROUNDS = [ "blue", "green", "pink", "purple" ];
    
    $( ".custom-menu-item" )
        .each( function( index ) {
            $( this ).data(
                "menu-item-bg",
                "url(\"images/" + BACKGROUNDS[ index % BACKGROUNDS.length ] + ".png\")"
            );
        })
        .bind( "mouseenter", function( event ) { 
            $( this ).css({ "background-image" : $( this ).data( "menu-item-bg" ) });
        })
        .bind( "mouseleave", function( event ) {
            $( this ).not( ".active" ).css({ "background-image" : "none" });
        });
        .filter( ".active" )
        .css({ "background-image" : $( this ).data( "menu-item-bg" ) });                
    })
});

Bedankt voor de moeite!
Het script werkt alleen nog niet, terwijl wel alle data overgenomen lijkt te zijn .

[Voor 6% gewijzigd door peaceful_turing op 01-07-2011 09:25]

[peaceful_turing]

Cyphax schreef op donderdag 30 juni 2011 @ 18:05:
Ik denk dat het komt omdat je setAttribute gebruikt. Dat werkt niet goed in IE6 en IE7.

Bedankt, dat was em!
Ik heb het verandert in dit:

JavaScript:

var Background = backgrounds[(ActualNumber % backgrounds.length)];
document.getElementById(ActiveLi).style.background = "url('images/" + Background + ".png') no-repeat top";

De eerste functie function 'MenuActiveColor' werkt nu in beide browsers.

In de 2e functie 'MenuColorChange', staat ook een setAttribute, maar dan iets ingewikkelder; met onmouseover. Hoe moet ik deze dan definiëren?

JavaScript:

document.getElementById("custom-menu-item-id-" + (i + 1)).setAttribute('onmouseover', "this.style.backgroundImage='url(images/" +  backgrounds[(i % backgrounds.length)] + ".png)';");
document.getElementById("custom-menu-item-id-" + (i + 1)).setAttribute('onmouseout', "this.style.background='none'; MenuActiveColor();");

[Voor 64% gewijzigd door peaceful_turing op 01-07-2011 10:16]

[Cyphax]

killking463 schreef op vrijdag 01 juli 2011 @ 09:54:
[...]

In de 2e functie 'MenuColorChange', staat ook een setAttribute, maar dan iets ingewikkelder; met onmouseover. Hoe moet ik deze dan definiëren?

Ik zou de tip van R4gnax ter harte nemen en jquery daar ook voor gebruiken (die eventhandling). Die lui hebben dat al voor je gedaan.
http://api.jquery.com/bind/

[MueR]

Waarom gebruik je niet gewoon CSS eigenlijk?

[peaceful_turing]

MueR schreef op vrijdag 01 juli 2011 @ 10:28:
Waarom gebruik je niet gewoon CSS eigenlijk?

Dan is de hele functie weg... de backgrounds zijn de kleuren uit mn huisstijl. De functies geven de menuitems in een vaste volgorde verschillende backgrounds (als je erover zweeft), en als de li de class 'active' bevat, krijgt die li dezelfde background als wanneer je erover zweeft (dus in dezelfde vaste volgorde). Omdat er een CMS achter komt, is dit noodzakelijk. Nl.; als het menu gewijzigd wordt (de volgorde o.i.d.), moeten de kleuren in een vaste volgorde blijven, en niet opeens verwisseld of zelfs weg zijn...

Cyphax schreef op vrijdag 01 juli 2011 @ 10:25:
[...]

Ik zou de tip van R4gnax ter harte nemen en jquery daar ook voor gebruiken (die eventhandling).

Ik zou het graag doen, maar het script werkt niet . En aangezien ik geen ervaring met jQuery heb, kan ik de fout ook niet ontdekken. Daarom probeerde ik het op te lossen aan de hand van Cyphax' tip .

[Voor 23% gewijzigd door peaceful_turing op 01-07-2011 11:27]

[Cyphax]

killking463 schreef op vrijdag 01 juli 2011 @ 11:16:
[...]

Ik zou het graag doen, maar het script werkt niet .

Het ging toch om de event handler koppelen wat niet lukte? Die twee regels die je gaf? Als je die twee regels vervangt door gelijkaardige jquery-code, dan kan het zijn dat je daar gewoon klaar mee bent. De link die ik gaf geeft je uitleg. Als je dat probeert en het lukt niet, dan kan je dat even posten.

Als er iets anders niet werkt waardoor je dit niet kunt proberen, wat gaat er dan nu nog mis? Dat is me even onduidelijk op het moment.

[peaceful_turing]

Cyphax schreef op vrijdag 01 juli 2011 @ 11:34:
[...]

Het ging toch om de event handler koppelen wat niet lukte? Die twee regels die je gaf? Als je die twee regels vervangt door gelijkaardige jquery-code, dan kan het zijn dat je daar gewoon klaar mee bent. De link die ik gaf geeft je uitleg. Als je dat probeert en het lukt niet, dan kan je dat even posten.

Als er iets anders niet werkt waardoor je dit niet kunt proberen, wat gaat er dan nu nog mis? Dat is me even onduidelijk op het moment.

Het ging erom dat het hele script niet werkt in IE6/7. Waar de oorzaak lag was voor mij niet duidelijk. Nu ik jouw tip opvolgde, bleek dus dat de oorzaak lag bij 'setAttribute', dus dan lijkt me logisch dat ik dáár een oplossing voor zoek toch? Of snap ik het nu niet ?

[Amras]

Gebruik dan i.p.v. setAttribute de volgende manier om een eventhandler te koppelen:

JavaScript:

document.getElementById('bladiebla').onmouseover = function() {
    // code hier
}

Of lees wat over jQuery en doe het nog eenvoudiger. Dat je iets niet kunt, wil niet zeggen dat je het niet kunt leren natuurlijk.

[MueR]

killking463 schreef op vrijdag 01 juli 2011 @ 11:16:
Dan is de hele functie weg... de backgrounds zijn de kleuren uit mn huisstijl. De functies geven de menuitems in een vaste volgorde verschillende backgrounds (als je erover zweeft), en als de li de class 'active' bevat, krijgt die li dezelfde background als wanneer je erover zweeft (dus in dezelfde vaste volgorde). Omdat er een CMS achter komt, is dit noodzakelijk. Nl.; als het menu gewijzigd wordt (de volgorde o.i.d.), moeten de kleuren in een vaste volgorde blijven, en niet opeens verwisseld of zelfs weg zijn...

CSS is wat vooruit gegaan hoor.

HTML:

<!DOCTYPE html>
<style type="text/css">
li { color: white; display: block; list-style-type: none; padding: 5px; }
li:nth-child(4n+1) { background-color: blue; }
li:nth-child(4n+2) { background-color: red; }
li:nth-child(4n+3) { background-color: green; }
li:nth-child(4n+4) { background-color: black; }
</style>
<div>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>

[Cyphax]

killking463 schreef op vrijdag 01 juli 2011 @ 11:43:
[...]

Het ging erom dat het hele script niet werkt in IE6/7. Waar de oorzaak lag was voor mij niet duidelijk. Nu ik jouw tip opvolgde, bleek dus dat de oorzaak lag bij 'setAttribute', dus dan lijkt me logisch dat ik dáár een oplossing voor zoek toch? Of snap ik het nu niet ?

Jawel maar wat je met die setAttribute probeert te doen is een event definiëren (die onClick bijvoorbeeld), en dàt kun je anders doen dan via setAttribute. En aangezien je jquery al gebruikt is dat waarschijnlijk niet zo heel veel werk.

MueR schreef op vrijdag 01 juli 2011 @ 12:05:
[...]

CSS is wat vooruit gegaan hoor.

HTML:

<!DOCTYPE html>
<style type="text/css">
li { color: white; display: block; list-style-type: none; padding: 5px; }
li:nth-child(4n+1) { background-color: blue; }
li:nth-child(4n+2) { background-color: red; }
li:nth-child(4n+3) { background-color: green; }
li:nth-child(4n+4) { background-color: black; }
</style>
<div>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>

Gaat dat wel werken in IE6 en 7? Van IE6 betwijfel ik het ten zeerste.

[peaceful_turing]

Cyphax schreef op vrijdag 01 juli 2011 @ 12:09:
Gaat dat wel werken in IE6 en 7? Van IE6 betwijfel ik het ten zeerste.

Dat dacht ik ook... het probleem wordt alleen maar groter: nth-child wordt niet ondersteund door IE6/7/8....

[Voor 60% gewijzigd door peaceful_turing op 01-07-2011 12:30]

[peaceful_turing]

Ik heb nu even geen tijd, maar ik ga het proberen. Ik heb er vertrouwen in dat het gaat lukken met de tips die ik heb gehad. Al wordt het dan waarschijnlijk geen jQuery .
In ieder geval iedereen bedankt voor de input!

[Voor 3% gewijzigd door peaceful_turing op 01-07-2011 12:33]

[MueR]

killking463 schreef op vrijdag 01 juli 2011 @ 12:22:
[...]

Dat dacht ik ook... het probleem wordt alleen maar groter: nth-child wordt niet ondersteund door IE6/7/8....

Dan combineer je nth-child met CSS a la zo:

Cascading Stylesheet:

li:nth-child(4n+1), li.n1 { background-color: blue; }
li:nth-child(4n+2), li.n2 { background-color: red; }
li:nth-child(4n+3), li.n3 { background-color: green; }
li:nth-child(4n+4), li.n4 { background-color: black; }

En loop je eenmalig over het menu om die classes aan de juiste elementen toe te voegen. Scheelt heel veel javascript. KISS

[Voor 4% gewijzigd door MueR op 01-07-2011 12:51]

[R4gnax]

killking463 schreef op vrijdag 01 juli 2011 @ 09:24:
[...]

Bedankt voor de moeite!
Het script werkt alleen nog niet, terwijl wel alle data overgenomen lijkt te zijn .

Er wordt gebruik gemaakt van een class .custom-menu-item om menu items te identificeren in plaats van een hele reeks onzinnige IDs. Je HTML moet er dus wèl licht voor aangepast worden, hè?

[peaceful_turing]

Het is bijna rond .. maar nog een probleempje.
De functies werken beiden in beide browsers, maar nog niet helemaal naar wens.

JavaScript:

var backgrounds = ["blue", "green", "pink", "purple"];
function MenuColorChange() {
    for (var i = 0; i <= 10 ; i++) {
        document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
        this.style.background = "url('images/" +  backgrounds[(i % backgrounds.length)] + ".png')";
        }
        document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
        this.style.background = 'none'; 
        MenuActiveColor();
        }
    }
}

Wat er namelijk gebeurt is dat wanneer je over de items zweeft, worden ze alleen blauw... ik zie niet waar het in zit...

[Voor 4% gewijzigd door peaceful_turing op 01-07-2011 15:46]

[418O2]

Waarom los je dit niet gewoon op met

code:

li:nth-child(4n+1), li.n1 { background-color: blue; } 
li:nth-child(4n+1):hover, li.n1:hover { background:url('/images/blue.png'); }

etc. etc.

Je denk echt een heel stuk te moeilijk.

[Voor 61% gewijzigd door 418O2 op 01-07-2011 16:54]

[peaceful_turing]

418O2 schreef op vrijdag 01 juli 2011 @ 16:51:
Waarom los je dit niet gewoon op met

code:

li:nth-child(4n+1), li.n1 { background-color: blue; } 
li:nth-child(4n+1):hover, li.n1:hover { background:url('/images/blue.png'); }

etc. etc.

Je denk echt een heel stuk te moeilijk.

Hier kwam al eerder iemand mee.. zie hierboven

[peaceful_turing]

R4gnax schreef op vrijdag 01 juli 2011 @ 12:53:
[...]


Er wordt gebruik gemaakt van een class .custom-menu-item om menu items te identificeren in plaats van een hele reeks onzinnige IDs. Je HTML moet er dus wèl licht voor aangepast worden, hè?

Ook dit schijnt niet te helpen

[MueR]

killking463 schreef op vrijdag 01 juli 2011 @ 16:58:
[...]

Hier kwam al eerder iemand mee.. zie hierboven

Doe er dan eens wat mee. Op deze manier gaat dit topic niet lang meer duren. Je kan niet steeds blijven posten "dit heb ik nu en het werkt nog niet".

[peaceful_turing]

MueR schreef op vrijdag 01 juli 2011 @ 17:21:
[...]

Doe er dan eens wat mee. Op deze manier gaat dit topic niet lang meer duren. Je kan niet steeds blijven posten "dit heb ik nu en het werkt nog niet".

Het lijkt me ingewikkelder dan de oplossing waar ik net om vroeg. Ik ben namelijk bíjna bij wat ik probeerde te bereiken.

Ik snapte je hier namelijk echt niet:

MueR schreef op vrijdag 01 juli 2011 @ 12:50:
[...]

Dan combineer je nth-child met CSS a la zo:

Cascading Stylesheet:

li:nth-child(4n+1), li.n1 { background-color: blue; }
li:nth-child(4n+2), li.n2 { background-color: red; }
li:nth-child(4n+3), li.n3 { background-color: green; }
li:nth-child(4n+4), li.n4 { background-color: black; }

En loop je eenmalig over het menu om die classes aan de juiste elementen toe te voegen. Scheelt heel veel javascript. KISS

[MueR]

Je snapt niet wat ik bedoel met "loop over je list heen en geef de items een class op basis van hun positie"? Pak eens een heel simpele html page (zoals MueR in "Javascript werkt.. maar niet in IE6/7") en geef de list items met javascript de classes n1 t/m n4. Dit is geen rocket science.

[peaceful_turing]

MueR schreef op vrijdag 01 juli 2011 @ 17:58:
Je snapt niet wat ik bedoel met "loop over je list heen en geef de items een class op basis van hun positie"? Pak eens een heel simpele html page (zoals MueR in "Javascript werkt.. maar niet in IE6/7") en geef de list items met javascript de classes n1 t/m n4. Dit is geen rocket science.

Ja,, dat snapte ik wel ....... maar waarom is dit nou wél de oplossing voor ie6/7? Het is nog steeds nth-child?

[MueR]

Heb je eens goed gekeken naar dat stuk CSS? Daar staan toch echt gewoon classes in, naast de nth child. Heb je dit uberhaupt geprobeerd? Nee, dat heb je niet, want je hoopt stiekem dat iemand je een kant en klaar stuk javascript geeft. Zo werkt het hier niet. Ga nou eens proberen wat ik voorstel, kijk wat IE6 en IE7 er mee doen.

[Dipsausje]

killking463 schreef op vrijdag 01 juli 2011 @ 11:16:
Ik zou het graag doen, maar het script werkt niet . En aangezien ik geen ervaring met jQuery heb, kan ik de fout ook niet ontdekken. Daarom probeerde ik het op te lossen aan de hand van Cyphax' tip .

Heb je dit er al in staan?

JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Zo niet dan zou ik dat eens toevoegen aan de head van je pagina, om met jQuery te werken moet je het wel eerst importeren in je file.

[418O2]

killking463 schreef op vrijdag 01 juli 2011 @ 16:58:
[...]

Hier kwam al eerder iemand mee.. zie hierboven

Zonder de hoverstate ja, daar kan je je tweede probleem mee oplossen.

Misschien begrijp ik het niet goed, maar wat je wil kan gewoon met css. Je moet niet met js gaan klooien als je het met css kan doen.

[n8n]

Waarom niet gewoon elke li in de backend een class geven, werkt in elke browser en is niet afhankelijk van javascript

[peaceful_turing]

Ik gebruikt tegenwoordig Stackoverflow om mijn vragen te stellen.. daar geven ze tenminste zonder zeuren antwoord op waar je om vraagt. En ze begrijpen ook dat je soms ergens niet uit komt, omdat je nog beginner bent, en dat niet elke zoekcombinatie direct in je op komt... echt een verfrissing .

[Bosmonster]

Die geweldige mededeling was wel een kickje van 2 maanden waard!

Doei!

[NMe]

killking463 schreef op dinsdag 09 augustus 2011 @ 14:19:
Ik gebruikt tegenwoordig Stackoverflow om mijn vragen te stellen.. daar geven ze tenminste zonder zeuren antwoord op waar je om vraagt. En ze begrijpen ook dat je soms ergens niet uit komt, omdat je nog beginner bent, en dat niet elke zoekcombinatie direct in je op komt... echt een verfrissing .

Fijn voor je.