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:
2de pagina
script textkleur:
script vliegtekst:
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()">
<span><font size="25" face="Arial" animeer="spiral"
style="position: relative; left: 10000">Welkom op deze pagina. Dit is het huiswerk van les 25 </font></span>
<span><font size="5" face="Arial" animeer="dropWord"
style="position: relative; left: 10000">Gemaakt door Benny Stinkens </font></span><br><br><br><br>
<span><font size="25" face="Arial" color="yellow" animeer="zoomIn"
style="position: relative; left: 10000">Deze les gaat over </font></span><br>
<span><font size="25" face="Arial" color="red" animeer="zoomOut"
style="position: relative; left: 10000">Java Script</font></span><br><br><br><br><br>
<span><font size="5" face="jokerman" animeer="flyLeft"
style="position: relative; left: 10000">Javascript is een programmeertaal,</font></span>
<span><font size="5" face="jokerman" animeer="flyRight"
style="position: relative; left: 10000">speciaal geschreven om internet-toepassingen te realiseren.</font></span><br>
<span><font size="5" face="jokerman" animeer="flyTop"
style="position: relative; left: 10000">Je kan zelf scripts schrijven</font></span>
<span><font size="5" face="jokerman" animeer="flyBottom"
style="position: relative; left: 10000">of kant en klare scripts downloaden</font></span><br>
<span><font size="5" face="jokerman" animeer="flyTopLeft"
style="position: relative; left: 10000">Op het internet </font></span>
<span><font size="5" face="jokerman" animeer="flyTopRight"
style="position: relative; left: 10000">kan je enorm </font></span>
<span><font size="5" face="jokerman" animeer="flyBottomLeft"
style="position: relative; left: 10000">veel verschillende </font></span>
<span><font size="5" face="jokerman" animeer="flyBottomRight"
style="position: relative; left: 10000">leuke scripts vinden.</font></span><br>
<span><font size="5" face="jokerman" animeer="flyTopRightWord"
style="position: relative; left: 10000">Je kan een script rechtstreeks in een pagina plaatsen,</font></span>
<span><font size="5" face="jokerman" animeer="flyBottomRightWord"
style="position: relative; left: 10000"> maar de voorkeur gaat naar externe Javascripts</font></span><br><br><br><br>
<span><font size="5" face="jokerman" animeer="flyRight"
style="position: relative; left: 10000">Geïnteresseerd ? </font></span>
<span><font size="5" face="jokerman" animeer="flyLeft"
style="position: relative; left: 10000">Kijk dan eens op de <a href="html/2de_pagina.htm">volgende pagina</a></font></span>
</body>
</html>
2de pagina
<html><head><title>2de pagina</title>
<link href="../stylesheets/les_25.css"rel="stylesheet"type="text/css" />
<!--
Dit script is gedownload vanaf JavaScript.nl
-->
<!-- PLAATS DIT DEEL VAN HET SCRIPT TUSSEN <HEAD> EN </HEAD> -->
<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"><font face="Times New Roman" size="'+(i%5?3:4)+'">.</font><\/div>');
if(i < 26){ // De wijzers
document.write('<div id="Punt'+i+'" style="position:absolute;left:-10;top:-10;cursor:default;z-index:50"><font face="Arial" size="4">.</font></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><br>');
}
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><font color="'+color[x]);
document.c.document.write('">'+ctext+'</font></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 = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
outString += ih
outString += "</SPAN>"
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 += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "</SPAN>"
}
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)
}