2 Javascripts blockieren sich gegenseitig wie daraus 1 machen??
Mase
- javascript
Hallo,
habe zwei Javascripts, die immernur einzeln funktionieren.
Immer wenn ich das zweite mit in den HTML Text setze fällt eins von beiden komplett aus! Kann man beide zusammenfassen, damit beide gleichzeitig funktionieren oder wie kann man sonst ohne externe Dateien beide Javas aktivieren? Würde mich wirklich sehr über erfolgversprechende Lösungen freuen! Vielen Dank schonmal!
Hier die beiden Scripts:
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Color Change</title>
<script type="text/javascript">
<!--
// @ Autor: Danny Rosifka
// @ publisher: javarea.de
// Bitte entfernen Sie diesen Vermerk nicht !
-->
function bgColorChangeInit() {
var element = document.getElementsByTagName("body")[0];
var colorMarker = new Array(
new Array(135, 68, 227),
new Array(34, 0, 255),
new Array(216, 217, 0),
new Array(0, 255, 163),
new Array(169, 255, 0),
new Array(255, 148, 0),
new Array(255, 0, 30),
new Array(245, 0, 75),
new Array(156, 12, 58),
new Array(178, 161, 161),
new Array(255, 255, 255)
);
var color = new Array(255,255,255,1,0);
var speed = 100;
bgColorChange(element, colorMarker, color, speed);
}
function bgColorChange(el, colorMarker, color, speed) {
e = color[4];
if(color[0] == colorMarker[e][0] & color[1] == colorMarker[e][1] & color[2] == colorMarker[e][2]) {
if((colorMarker.length - 1) > e) {
color[4]++;
} else {
color[4] = 0;
}
}
color[0] += sign(colorMarker[e][0]-color[0]);
color[1] += sign(colorMarker[e][1]-color[1]);
color[2] += sign(colorMarker[e][2]-color[2]);
el.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
window.setTimeout(function(){ bgColorChange(el, colorMarker, color, speed) }, speed);
}
function sign(x) {
if(x > 0) {
return 1;
} else if(x == 0) {
return 0;
} else {
return -1;
}
}
</script>
</head>
<body onload="bgColorChangeInit()">
Test
</body>
</html>
2.
<script type="text/javascript">
<!--
var colour="#33CCFF"; // Farbe
var sparkles=100; // Anzahl der Flocken
/*****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
* AB HIER NICHTS MEHR ÄNDERN *
*****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
document.onmousemove=mouse;
//-->
</script>
[latex]Mae govannen![/latex]
habe zwei Javascripts, die immernur einzeln funktionieren.
Immer wenn ich das zweite mit in den HTML Text setze fällt eins von beiden komplett aus!
Wundert mich nicht, denn ...
[Script 1]
<body onload="bgColorChangeInit()">
und
[Script 2]
window.onload=function() { if (document.getElementById) {
...
}}
überschreiben sich.
Du kannst nun folgendes machen:
<body onload="bgColorChangeInit()">
ersetzen durch <body>
[Script 2]
window.onload=function() {
bgColorChangeInit() // script 1
if (document.getElementById) {
...
}}
Das Problem ist, daß sich immer noch gleich benannte Variablen und Eventlistener stören würden (ich habe jetzt nicht genau nachgeschaut, ob es bei _diesen_ beiden Scripts so ist; sehe auf Anhieb nichts, aber potentiell ist dieses Problem immer da, wenn man fertige Scripts nutzt) Das würde dann Umschreiben bedeuten.
Außerdem sind HTML-Kommentare wie
<!--
-->
//-->
in den Scripts unsinnig.
Cü,
Kai
1 Milliardefaches Dankeschön!
Hätte ich nie alleine hingekriegt!
Freue mich sehr!
Sehr lieb von dir Kai!
Funktioniert einwandfrei!
LG
Mase