Javascript geht in IE aber nicht FF

A

anmi

Grünschnabel
Hallo ihr Profis,
wie das Thema schon sagt habe ich ein Problem mit einem Javascript auf meiner Homepage.
Es Handelt sich um ein Script wo kleine Leuchtpunkte um den Mauscursor blinken.
Leider verstehe ich selber von Java bzw. Javascript nicht wirklich viel.
Wenn ich die Seite im IE 8 aufrufe, bekomme ich den gewünschten Effekt. Unter FF 4, tut sich da leider gar nichts.

Code: 
if ((typeof window.event) &&
window.attachEvent &&
document.getElementById &&
document.firstChild &&
document.firstChild.filters){

(function(){
var colours = new Array("#ff0000","#00ff00","#ffffff","#ff00ff","#ffff00","#00aaff","#9f9f9f", "#000000");
var n = colours.length;
var dy = 0;
var dx = 0;
var ry = 0;
var rx = 0;
var v1 = 0.08;
var v2 = 0;
var y = 0;
var x = 0;
var ref = [];
var pulseCounter = [];
var pulsePath = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,30,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
var pulse = [];
var d = document;
var ref2;

if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref2 = d.documentElement;
else{
 if (d.body &&
 typeof d.body.clientWidth == "number")
 ref2 = d.body;
}

var idx = document.getElementsByTagName('div').length;
var pix = "px";

document.write('<div id="con'+idx+'" style="position:absolute;top:0px;left:0px;">'
+'<div style="position:relative">');

for (i = 0; i < n; i++){
document.write('<div id="lights'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;height:50px;width:50px;font-family:Courier New;'
+'font-size:10px;color:#ffffff;padding-top:18px;text-align:center">.<\/div>');
}

document.write('<\/div><\/div>');

for (i = 0; i < n; i++){
ref[i] = document.getElementById("lights"+(idx+i)).style;
pulseCounter[i] = i * 4;
}

function mouse(){
y = window.event.clientY;
x = window.event.clientX - 16;
}
document.attachEvent("onmousemove",mouse);

function stars(){
for (i = 0; i < n; i++){
 pulseCounter[i]++;
 if (pulseCounter[i] >= pulsePath.length){
  pulseCounter[i] = 0;
 }
 pulse[i] = pulsePath[pulseCounter[i]];
 ref[i].filter = 'glow(color='+colours[i]+', strength='+pulse[i]+')';
 ref[i].top = ry + Math.cos((20*Math.sin(v2/20))+i*70)*100*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
 ref[i].left = rx + Math.sin((20*Math.sin(v2/20))+i*70)*180*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
}
v2 += v1;
document.getElementById("con"+idx).style.top =ref2.scrollTop + pix;
}

function delay(){
ry = dy += (y-dy) * 0.05;
rx = dx += (x-dx) * 0.05;
stars();
setTimeout(delay,40);
}
delay();
})();
}

Eingeunden in die html Seite habe ich es im head Teil folgendermaßen:
Code: 
<script src="js/gardecursor.js" type="text/javascript"></script>


kann man da etwas tun, damit es auch im FF läuft?

Danke schon mal für eure Mühe.

Edit: hab das Testweise mal hier online gestellt:
http://anmi.bplaced.net/test2.html
 
Zuletzt bearbeitet:
Das Script scheint bewusst nur für den IE gemacht zu sein. Mit der äußeren If-Abfrage schließt du alle anderen Browser aus

Javascript: 
if ((typeof window.event) &&

window.attachEvent &&

document.getElementById &&

document.firstChild &&

document.firstChild.filters){
 
Interessant,
aber auch wenn ich die 9 Zeilen und die letzte geschweifte Klammer entferne, funktioniert es nicht im FF.
Im IE funktioniert es aber auch ohne diese Zeilen noch.
 
Die Abfrage ist ja nicht nur dazu da, die anderen auszusperren...der danach folgende Code ist eben nur im IE funktionsfähig. Wenn du die Prüfung weg nimmst und noch diese Zeilen änderst, funktioniert es quasi im FF, aber nicht mehr im IE.

Javascript: 
//Vorher
function mouse(){
y = window.event.clientY;
x = window.event.clientX - 16;
}
document.attachEvent("onmousemove",mouse);

//Nachher
function mouse(e){
y = e.clientY;
x = e.clientX - 16;
}
document.addEventListener('mousemove', mouse, true);

Der Code müsste komplett aufgeräumt und Cross-Browser fähig gemacht werden. Auch sollte man unter anderem document.write komplett entfernen.
 
das scheint ja echt kompliziert zu sein mit dem Javascript

mir ist auch gerade aufgefallen das die Animation im IE9 auch nur funktioniert wenn ich die äußerste Schleife weg nehme

Wenn ich das richtig verstehe, müsste man erst abfragen mit welchem Browser der Nutzer kommt, und dann dementsprechend den richtigen Code ausführen.
Ich denke mal das übersteigt meinen Horizont im Javascripting um einiges. (der Horizont ist auf dem Gebiet bei mir ja leider nicht recht hoch)
 
Damit sollte es funktionieren.
Du wirst allerdings in Browsern != IE ohne zusätzlichen Code keinen Glow-Effekt erzeugen können, da hier die nur im IE implementierten Filter zum Einsatz kommen.

Wenn ich mit der Aussage falsch liege korrigiert mich bitte.

Javascript: 
(function(){
    var colours = new Array("#ff0000","#00ff00","#ffffff","#ff00ff","#ffff00","#00aaff","#9f9f9f", "#000000");
    var n = colours.length;
    var dy = 0;
    var dx = 0;
    var ry = 0;
    var rx = 0;
    var v1 = 0.08;
    var v2 = 0;
    var y = 0;
    var x = 0;
    var ref = [];
    var pulseCounter = [];
    var pulsePath = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,30,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
    var pulse = [];
    var d = document;
    var ref2;
    
    if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) {
        ref2 = d.documentElement;
    } else {
        if (d.body && typeof d.body.clientWidth == "number"){
            ref2 = d.body;
        }
    }
    
    var idx = document.getElementsByTagName('div').length;
    var pix = "px";
    
    document.write('<div id="con'+idx+'" style="position:absolute;top:0px;left:0px;">' + '<div style="position:relative">');
    
    for (i = 0; i < n; i++){
        if(document.attachEvent){
            document.write('<div id="lights'+(idx+i)+'" style="position:absolute;'
            + 'top:0px;left:0px;height:50px;width:50px;font-family:Courier New;'
            + 'font-size:10px;color:#ffffff;padding-top:18px;text-align:center">.<\/div>');   
        } else {
            document.write('<div id="lights'+(idx+i)+'" style="position:absolute;'
            + 'top:0px;left:0px;height:3px;width:3px;font-family:Courier New;'
            + 'font-size:0px;color:#ffffff;padding-top:0px;text-align:center">&nbsp;<\/div>');
        }
    }
    
    document.write('<\/div><\/div>');
    
    for (i = 0; i < n; i++){
        ref[i] = document.getElementById("lights"+(idx+i)).style;
        pulseCounter[i] = i * 4;
    }
    
    var mouse;
    if(document.attachEvent){
        mouse = function(){
            y = window.event.clientY;
            x = window.event.clientX - 16;
        }
        document.attachEvent("onmousemove",mouse);
    } else if (document.addEventListener) {
        mouse = function(e){
            y = e.clientY;
            x = e.clientX - 16;
        }
        document.addEventListener('mousemove', mouse, true);
    }
    
    function hexColor(x, min, max){
        min = !min ? 0 : ( min < 0 || min > 15 ? 0 : min);
        max = !max ? 0 : ( max < 0 || max > 15 ? 0 : max);
        var rv = "";
        for(var i = 0; i < x; i++){
            rv += parseInt(Math.random()*(max-min) + min).toString(16);
            
        }
        //alert(max + " . " + min + " - " + rv);
        return rv;
    }
    
    function stars(){
        for (i = 0; i < n; i++){
            pulseCounter[i]++;
            
            if (pulseCounter[i] >= pulsePath.length){
                pulseCounter[i] = 0;
            }
            
            pulse[i] = pulsePath[pulseCounter[i]];
            if(!window.attachEvent){
                ref[i].background = "#"+ hexColor(6, 4, 12);
                ref[i].height = "3px";
                ref[i].width = "3px";
            }
            ref[i].filter = 'glow(color='+colours[i]+', strength='+pulse[i]+')';
            ref[i].top = ry + Math.cos((20*Math.sin(v2/20))+i*70)*100*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
            ref[i].left = rx + Math.sin((20*Math.sin(v2/20))+i*70)*180*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
        }
        v2 += v1;
        document.getElementById("con"+idx).style.top =ref2.scrollTop + pix;
    }
    
    function delay(){
        ry = dy += (y-dy) * 0.05;
        rx = dx += (x-dx) * 0.05;
        stars();
        setTimeout(delay,40);
    }
    delay();
})();

Edit: IE9 kann ich nicht testen.
 
Zuletzt bearbeitet von einem Moderator:
Ah, ok
im FF seh ich das jetzt auch, aber das sieht da dann eher bescheiden aus.
Daher wurde das bestimmt im Original auf den IE beschränkt.
Muss ich mir mal Gedanken machen, ob ich jetzt lieber das Original nehme und das es im IE gut aussieht und im FF nicht stört. Oder ob ich es im FF mit drin lasse.

mal schauen

Danke erstmal für eure Hilfe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück