fade in internet explorer werkt niet

Status
Niet open voor verdere reacties.
W

Wneedshelp

Gebruiker
Lid geworden
9 jun 2013
Berichten
45
Goede dag

Ik ben bezig met de volgende site-->www.hetgeertje.nl/frank3
De tekst linksboven moet steeds faden in een andere tekst maar in internet explorer doet ie dat niet. De code die ik gebruik is

<script>
var interval = 4 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images.className = 'fade-out';
imageArray = images;
}
imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 80);
};
fade();

</script>

Weet iemand hoe ik dit aan moet passen zodat ie in elke browser fade?

Alvast bedankt!
 
Hoi Wneedshelp,
In het script op je pagina wordt het in- en uitfaden geregeld door aan de images afwisselend een class="fade-in" en class="fade-out" te koppelen. Ga je in de css kijken wat die classes precies zijn, dan komt uit de bus:
Code: 
img.fade-out {opacity: 0}
img.fade-in  {opacity: 1}
img {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 3s;
}
D.w.z. het al of niet tonen van 1 van de 3 images wordt gedaan door de "opacity" (ondoorzichtigheid). Een opacity:0 is niet ondoorzichtig = totaal transparant, een opacity:1 is wel ondoorzichtig = 100% aanwezig.
De overgang tussen deze waarden 0 en 1 gebeurt niet in het script, maar door de css3-eigenschap "transition" er op los te laten gedurende 3 seconden.
Nu speelt er het volgende:
  • De eigenschap opacity wordt niet ondersteund door Internet Explorer 8 en eerder (pas met ingang van IE9; zie bv. hier), en de images zijn precies bovenop elkaar gestapeld. Dus bij IE8 en eerder wordt alleen het laatste plaatje in de html (= het bovenste plaatje) getoond: thirdcar.gif , - en dat veranderd niet.
  • De eigenschap transition wordt niet ondersteund door Internet Explorer 9 en eerder (pas met ingang van IE10; zie bv. hier). Betekent: IE9 pakt wel de opacity-wissel op, maar niet het faden: de images volgen elkaar in één klap op zonder infaden.
  • Maar er staat in de css voor de transition ook het voorvoegsel "-webkit-" bij. Dat betekent dat alleen browsers met een "webkit layout machine" (= rendering machine) deze regel volgen; dat zijn: Chrome, Safari en in dit geval ook Opera. *) Dus Firefox en IE10 wisselen ook alleen in één klap, want die hebben een andere rendering machine!
Conclusie: De toepassing van de opacity- en transition-eigenschappen + het webkit-prefix maken dat dit script niet cross-browser is. Alleen Chrome, Safari en Opera kunnen infaden; Firefox, IE9 en IE10 wisselen in 1 klap zonder faden; IE8 en eerder wisselen helemaal niet.
Zet je de transition-eigenschappen er ook zonder prefix bij, kan kunnen ook Firefox en IE10 faden. IE9 blijft het in één klap doen, en IE8 en eerder doen nog steeds niets. Maar IE10 is door nog geen 25% van de IE-surfers in Nederland in gebruik (zie hier), dus dan kan meer dan 75% van de IE-gebruikers niet het faden zien.

=======
Wat nu?
Inderdaad zou het gebruik van jQuery een oplossing kunnen zijn. Dan moeten nog wel een aantal IE-problemen uit de weg geruimd worden (zie deze demo). Behalve de jQuery-bibliotheek (ca. 26kB) vraagt dat nog tientallen extra scriptregels aan IE-fixes.

Maar ... het kan ook anders, zonder jQuery. :)
Met een simpel javascript kan een opacity-overgang gemaakt worden, en met toepassing van IE-filters voor de css van de opacity is het dan opgelost.

In de praktijk:
  • Een scriptje van nog geen 4kB, aan te haken vlak voor de </body></html> van de pagina: carrousel-fader.js
  • Test: f3-fade-nw.htm
    Doet het in Firefox, Chrome, Opera, Safari en IE7, en ook in IE8 en hoger.
Toelichting:
  • In de <head> van de pagina is de css-regel -webkit-transition-duration ongedaan gemaakt (dat kan in je css-bestand geschrapt worden).
  • Ook is de incorrecte css-regel #container {background-image: url(#);} ongedaan gemaakt: dat image is er niet en kan niet gevonden worden, wat alleen maar tot vertraging van de download van de pagina kan leiden (kan ook geschrapt in je css-bestand).
  • In het begin van het script staan de settings: zowel de pauze tussen het infaden als de snelheid van het infaden kan ingesteld worden. Verder regelt alles zichzelf.
  • Mocht een bezoeker javascript hebben uitgeschakeld, dan komt er alleen het eerste image firstcar.gif.
  • Ik vond het wel zo mooi om het tweede image ook op twee regels tekst (i.p.v. 3) te zetten, dan loopt het infaden mooi soepel zonder een sprong tussen 2 en 3 regels; dat is deze f3-secondcar-nw.gif. Dit moet dan ook even in de settings van het script veranderd worden.
Met vriendelijke groet,
CSShunter

PS:
@Cross: Dit staat ook in een andere vraag: mediaspeler-wordt-niet-op-elke-computer-goed-getoond. ;)
_________
*) Opera gaat geleidelijk over van de eigen Presto rendering machine naar Webkit (zie hier). Intussen wordt al wel het webkit-prefix geaccepteerd voor de eigenschap transition (zie hier).
 
Hallo css hunter

Ik heb nu toch nog een vraag. Ik had jouw code gebruikt in mijn website. Maar nu ik het lettertype heb veranderd van de plaatjes ben ik even gaan onderzoeken waarom het 2e plaatje niet mee veranderde.

Nu zie ik dat regel 108 naar jouw pagina verwijst voor het fadeverhaal. Nu heb ik de code van http://bliksekaters.nl/tests/scripts/carrousel-fader.js opgeslagen in mijn eigen website op de pagina genaamd scriptfade.js en de zin op regel 108 veranderd in <script type="text/javascript" src="scriptfade.js"></script>
Maar dat mocht niet baten.

Wat moet ik wel doen om het beheer in eigen beheer te kijgen:-)
 
Even naar de 7e regel van je scriptfade.js gaan, en daar de vindplaats van het tweede img bij jou op de site invullen i.p.v. bij bliksekaters. Anders blijft ie het oude plaatje vertonen! ;)

PS: Ook het jwplayer.js kan je downloaden en in eigen beheer nemen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan