firefox_nl.php

1: <html>
2: <head><title>firefox</title>
3: <LINK REL="stylesheet" TYPE="text/css" HREF="../net16.css">
4: <style>img{margin:0;padding:0;}
5: </style>
6: </head>
7: <body>
8: <img src="iptracker.php" height="1" width="1" border="0">
9: <b class=wijz>
10: <?php
11: date_default_timezone_set("CET");
12: echo "laatste wijziging: " . date ("Y-m-d, H:i.", filemtime("firefox_nl.php"));
13: ?>
14: </b>
15: <?php
16: include("firefox.inc");
17: ?>
18: <p>Internet Explorer is wat fout-toleranter dan andere browsers, als iets werkt met IE werkt het misschien niet met FireFox. Wat javascript betreft heeft IE soms niet-standaard oplossingen, FF houdt zich wel aan de <A HREF="http://www.w3.org/" TARGET="_blank">W3C</A> standaard. Het treintje rijdt zowel met IE en FF als met Chrome. (zie ook: <A HREF="../statistiek_nl.php">statistiek</A> over browsergebruik.)
19:
20: <p>Firefox kent 'window.onload' niet, dat is hier opgelost.
21:
22: <p>In IE kan: <tt>trein.style.pixelLeft</tt>, dat is niet volgens W3C, daar moet het zo:
23: <p><tt>var el = document.getElementById('trein');<br>
24: el.style.left</tt>
25:
26: <p>Gelukkig slikt IE dat ook.
27:
28: <br><br>
29: <p>klik voor <A HREF="shoco_firefox.php">de code</A>
30: </body></html>

firefox_en.php

1: <html>
2: <head><title>firefox</title>
3: <LINK REL="stylesheet" TYPE="text/css" HREF="../net16.css">
4: <style>img{margin:0;padding:0;}
5: tt{font-family:monospace; font-size:100%;}
6: </style>
7: </head>
8: <body>
9: <img src="iptracker.php" height="1" width="1" border="0">
10: <b class=wijz>
11: <?php
12: date_default_timezone_set("CET");
13: echo "last change: " . date ("Y-m-d, H:i.", filemtime("firefox_en.php"));
14: ?>
15: </b>
16: <?php
17: include("firefox.inc");
18: ?>
19: <p>Internet Explorer is more error-tolerant than other browsers, if something works in IE it may not work in FireFox. Referring to javascript, IE sometimes uses non-standard solutions, FF more closely follows the <A HREF="http://www.w3.org/" TARGET="_blank">W3C</A> standard. The little train rides under IE, FF and Chrome. (also see ook: <A HREF="../statistics_en.php">statistics</A> about browser usage.)
20:
21: <p>One of the problems is 'window.onload', that is solved here
22:
23: <p>In IE this works: <tt>trein.style.pixelLeft</tt>, not according to W3C, there you have to say:
24: <p><tt>var el = document.getElementById('trein');<br>
25: el.style.left</tt>
26:
27: <p>IE accepts that, too.
28:
29: <p>Click to see <A HREF="shoco_firefox.php">the code</A>
30: </body></html>

firefox.inc

1: <div style="background-image: URL(achter_trein.gif); background-repeat:repeat-x;">
2: <div style="overflow:hidden; height:150px; width:100%">
3: <DIV id='trein' STYLE="position:relative; left:20; top:70;">
4: <IMG SRC="trein_r.gif" name="im_">
5: </DIV>
6: <SCRIPT><!--
7: var tel = 0;
8: var v = 5;
9: function rechts(imgName){ if (document.images)document[imgName].src = eval(imgName + "r.src");}
10: function links(imgName){ if (document.images)document[imgName].src = eval(imgName + "l.src");}
11: function snel(imgName){ if (document.images)document[imgName].src = eval(imgName + "s.src");}
12: function heen_en_weer() {
13:     var el = document.getElementById('trein');
14:     el.style.left = parseInt(el.style.left) + stap;
15:     if (parseInt(el.style.left)>ws){stap = -v; links('im_'); tel++;}
16:     else if (parseInt(el.style.left)<-400){stap = v; rechts('im_');}
17:     if(tel==4){snel('im_'); el.style.left = 0; stap = 3*v; tel++;}
18:     if(tel>8){snel('im_'); el.style.left = ws; stap = -3*v; tel = 0;}
19:     setTimeout("heen_en_weer()",15);
20:
21: }
22: if (document.images) {
23:     im_r = new Image(); im_r.src = "treintje_r.gif";
24:     im_l = new Image(); im_l.src = "treintje_l.gif";
25:     im_s = new Image(); im_s.src = "sneltrein.gif";
26: }
27:
28: var browserName=navigator.appName;
29: if(browserName=="Microsoft Internet Explorer")    window.onload=heen_en_weer;
30:
31: else if (document.addEventListener) document.addEventListener("DOMContentLoaded", heen_en_weer, false);
32:
33: ws = window.screen.width;
34: stap = v;
35: rechts('im_');
36: //--></SCRIPT>
37: </div>