java-script werkt perfect in IE maar niet in FF, chroome, safari en anderen?

boterblommeken · 15 jan 2012

Huiswerk les 25
Beste specialisten.

Bovenstaande URL leidt naar een oefenpagina van me waar in ik een huiswerkopgave gemaakt heb voor java-script.
De inhoud is op dit moment niet belangrijk omdat ik maar aan het testen ben.

Mijn probleem is zoals de titel al zegt:
De pagina's werken zoals ze moeten in IE, maar niet in fire-fox, google chroome en safari?

Kan mij iemand aub vertellen wat ik fout doe?

Er zijn scripts die in de pagina staan en er zijn er ook die extern zijn.
Een gewoon script, afgehaald en niets aan veranderd werkt zelfs niet in FF, maar wel in IE?

Wat ik nog raar vind is mijn hoofdpagina?
Zoals gezegd werkt het script "vliegtekst" wel in IE maar niet in de andere browsers.
Maar nog iets raars is dat mijn tekst op de goede plaats staat in IE, maar in FF staat deze oneindig ver naar rechts?

Ben eens benieuwd wat ik nu weer verkeerd gedaan heb.
Alvast bedankt aan de mensen die me willen helpen.

Hier volgen de broncode's:
indexpagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Huiswerk les 25</title>
<link href="stylesheets/les_25.css"rel="stylesheet"type="text/css">
<script type ="text/javascript" language= "JavaScript" src="html/vliegtekst.js"></script>
</head>

<body onload="animatie()">
Welkom op deze pagina. Dit is het huiswerk van les 25 

Gemaakt door Benny Stinkens 

Deze les gaat over 

Java Script 

Javascript is een programmeertaal,

speciaal geschreven om internet-toepassingen te realiseren. 

Je kan zelf scripts schrijven

of kant en klare scripts downloaden 

Op het internet 

kan je enorm 

veel verschillende 

leuke scripts vinden. 

Je kan een script rechtstreeks in een pagina plaatsen,

 maar de voorkeur gaat naar externe Javascripts 

Geïnteresseerd ? 

Kijk dan eens op de <a href="html/2de_pagina.htm">volgende pagina</a>

</body>
</html>

2de pagina

<html><head><title>2de pagina</title>
<link href="../stylesheets/les_25.css"rel="stylesheet"type="text/css" />



<script type="text/javascript">
// Gemaakt door Jeffrey Nieuwenburg - Bestscripts

for (i=0;i<60;i++){ // Objecten maken
var hoek = i * 6;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = 85 + Math.round(80 * Math.sin(piHoek));
var boven = 85 + Math.round(80 * Math.cos(piHoek));
document.write('<div style="position:absolute;left:'+links+';top:'+boven+';cursor:default">.<\/div>');
if(i < 26){ // De wijzers
document.write('<div id="Punt'+i+'" style="position:absolute;left:-10;top:-10;cursor:default;z-index:50">.</div>');
}
}
if (!window.opera) document.write('<div id="Digi" style="position:absolute;left:57px;top:0px;width:60px;height:15px;border:1px solid #DDDDDD;font:12px Arial;cursor:default;text-align:center"><\/div>');

function Tik(){
var Nu = new Date();
var Min = Nu.getMinutes();
var Uur = Nu.getHours();
var Sec = Nu.getSeconds();

for(i=0;i<26;i++){
var hoek = (i < 10) ? Math.round(Sec*6)i<19)?Math.round(Min*6):Math.round((Uur*30)+((Min/2)));
var minaantal = (i<10)?0i<19)?10:19;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = 85 + Math.round(((i-minaantal)*8) * Math.sin(piHoek));
var boven = 85 + Math.round(((i-minaantal)*8) * Math.cos(piHoek));
with(document.getElementById("Punt"+i).style){
color = (i < 10) ? "green" : (i < 19) ? "blue" : "red";
left = links+"px";
top = boven+"px";
}
}
if(!window.opera) document.getElementById("Digi").innerHTML = (Uur<10?"0"+Uur:Uur)+":"+(Min<10?"0"+Min:Min)+":"+(Sec<10?"0"+Sec:Sec);
setTimeout("Tik()",1000);
}

window.onload = Tik;
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript" SRC="tekstkleur.js"></SCRIPT>

</body>
</html>

script textkleur:

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this = initArray.arguments;
}
}
var ctext = "<h2> Op deze pagina vind je scripts die op de pagina zelf geschreven zijn en externe scripts door elkaar.</h2>";
var speed = 1000;
var x = 0;
var color = new initArray(
"red",
"green",
"blue",
"black",
"orange"
);
if(navigator.appName == "Netscape") {
document.write('<layer id="c"><center>'+ctext+'</center></layer> ');
}
if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<div id="c"><center>'+ctext+'</center></div>');
}
function chcolor(){
if(navigator.appName == "Netscape") {
document.c.document.write('<center>'+ctext+'</center>');
document.c.document.close();
}
else if (navigator.appVersion.indexOf("MSIE") != -1){
document.all.c.style.color = color[x];
}
(x < color.length-1) ? x++ : x = 0;
}
setInterval("chcolor()",1000);

script vliegtekst:

dynamicanimAttr = "animeer"
animateElements = new Array()
currentElement = 0
speed = 50 // hoe groter het getal, hoe trager
stepsZoom = 8
stepsWord = 8
stepsFly = 12
stepsSpiral = 25
steps = stepsZoom
step = 0
outString = ""

function animatie()
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(!ie4)
{
if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))
{
for (index=document.layers.length-1; index >= 0; index--)
{
layer=document.layers[index]
if (layer.left==10000)
layer.left=0
}
}
return
}
for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if(null != animation)
{
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
{
ih = el.innerHTML
outString = ""
i1 = 0
iend = ih.length
while(true)
{
i2 = startWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, false, "")
if(i2 == iend)
break
i1 = i2
i2 = endWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, true, animation)
if(i2 == iend)
break
i1 = i2
}
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
if(animation == "zoomIn" || animation == "zoomOut")
{
ih = el.innerHTML
outString = ""
outString += ih
outString += ""
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
}
}
i = 0
for (index=document.body.sourceIndex; index < document.all.length; index++)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if (null != animation)
{
if(animation == "flyLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyRight")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyTop" || animation == "dropWord")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottom")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyTopLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyTopRight" || animation == "flyTopRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottomLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "spiral")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "zoomIn")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else if(animation == "zoomOut")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
el.initLeft = el.style.posLeft
el.initTop = el.style.posTop
animateElements[i++] = el
}
}
window.setTimeout("animate();", speed)
}
function offsetLeft(el)
{
x = el.offsetLeft
for (e = el.offsetParent; e; e = e.offsetParent)
x += e.offsetLeft;
return x
}
function offsetTop(el)
{
y = el.offsetTop
for (e = el.offsetParent; e; e = e.offsetParent)
y += e.offsetTop;
return y
}
function startWord(ih, i)
{
for(tag = false; i < ih.length; i++)
{
c = ih.charAt(i)
if(c == '<')
tag = true
if(!tag)
return i
if(c == '>')
tag = false
}
return -1
}
function endWord(ih, i)
{
nonSpace = false
space = false
while(i < ih.length)
{
c = ih.charAt(i)
if(c != ' ')
nonSpace = true
if(nonSpace && c == ' ')
space = true
if(c == '<')
return i
if(space && c != ' ')
return i
i++
}
return -1
}
function outWord(ih, i1, i2, dyn, anim)
{
if(dyn)
outString += ""
outString += ih.substring(i1, i2)
if(dyn)
outString += ""
}
function animate()
{
el = animateElements[currentElement]
animation = el.getAttribute(dynamicanimAttr, false)
step++
if(animation == "spiral")
{
steps = stepsSpiral
v = step/steps
rf = 1.0 - v
t = v * 2.0*Math.PI
rx = Math.max(Math.abs(el.initLeft), 300)
ry = Math.max(Math.abs(el.initTop), 300)
el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry)
}
else if(animation == "zoomIn")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
el.style.posLeft = 0
}
else if(animation == "zoomOut")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
el.style.posLeft = 0
}
else
{
steps = stepsFly
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
steps = stepsWord
dl = el.initLeft / steps
dt = el.initTop / steps
el.style.posLeft = el.style.posLeft - dl
el.style.posTop = el.style.posTop - dt
}
if (step >= steps)
{
el.style.posLeft = 0
el.style.posTop = 0
currentElement++
step = 0
}
if(currentElement < animateElements.length)
window.setTimeout("animate();", speed)
}

Klik om te vergroten...

boterblommeken · 16 jan 2012

Met verder te zoeken heb ik dit ergens op het internet gevonden:

Also, in firefox zit een foutenconsole. Heel handig. Doe dit:

1. open je pagina
2. druk ctrl+ shift + j
3. klik op 'wissen' (als er wat staat)
4. refresh de pagina
5. druk ctrl+ shift + j en bekijk je errors

Voor de specialisten onder jullie zal dit wel niets nieuws zijn, maar voor de mensen die net als ik amateur zijn kan dit wel eens handig zijn, dacht ik?

Ik heb dat dus gedaan en het resultaat is:

document.layers is undefined

blijkbaar komt dit uit het "vliegscript" want als je verder kijkt vind je dit:

for (index=document.layers.length-1; index >= 0; index--)

Mijn probleem is dat ik nog steeds niet de fout hier in kan vinden, maar mischien jullie wel?
Het rare er van is dat dit script is afgehaald van het net en ikzelf heb er niets aan gewijzigd.

Icemar · 16 jan 2012

Als je dit vervangt

Code:

if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))

met dit

Code:

if (document.getElementById)
{
   var layers = document.getElementsByTagName('*');
   for (var i = 0; i < layers.length; i++)
   {
      if (parseInt(layers[i].style.left) == 10000)
      {
         layers[i].style.left = '0';
      }
   }
}
else if (document.layers)

Dan werkt het ook in andere browsers
suc6 ermee

boterblommeken · 16 jan 2012

Dag butterflyice,

Ik heb dit aangepast in het script "vliegtekst".
De verbetering die merkbaar is:
De tekst op de indexpagina is nu zichtbaar (was voordien helemaal naar rechts verdwenen)
Maar in IE komt de tekst van alle kanten aangevlogen terwijl in FF de tekst gewoon in één keer op de pagina staat.

In het script textkleur heb ik nog niets aangepast omdat ik niet juist weet wat en waar.
ik denk dat het hier ergens moet gaan gebeuren?

if(navigator.appName == "Netscape") {
document.write('<layer id="c"><center>'+ctext+'</center></layer> ');
}
if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<div id="c"><center>'+ctext+'</center></div>');
}

Alvast bedankt voor je hulp.

Icemar · 16 jan 2012

Dit ligt aan het script wat je gebruik dat is echter alleen geschikt voor IE niet voor andere browsers.

Dat is een nadeel van veel oudere scripts wil je iets wat wel werkt in de andere browsers dan moet je kijken wat voor javascript ook met jquery werkt want deze zijn wel compatible.

boterblommeken · 17 jan 2012

Ik vreesde er al voor, dus ga ik een beetje zoekwerk verrichten want van jquery ken ik helemaal niets.

Bedankt.

java-script werkt perfect in IE maar niet in FF, chroome, safari en anderen?

boterblommeken

boterblommeken

Icemar

Steunend lid

boterblommeken

Icemar

Steunend lid

boterblommeken