Problem mit Animation per Javascript
Eingetragen von devfake (12)am 08.06.2012 - 14:59 Uhr in
Hallo,
ich hab folgendes Problem: Ich habe über Javascript eine Animation, die auf die tags im quellcode raufgreift. Jedoch funktioniert das ganze nicht in der page.tpl.php, wenn ich diese aber index.php umbenenne, und extra aufrufe, klappt es...auch firebug zeigt wenn ich den
tag anschaue, "Die angegebene URL konnte nicht geladen werden" :/ Kann mir da jemand helfen?
Der javascript code:
function runFader(){
window.meinFader = new Fader("teaserBereich");
window.setTimeout(function(){meinFader.next();}, 5000);
}
function Fader(id) {
this.id = id;
this.images = document.getElementById(this.id).getElementsByTagName("img");
this.counter = 0;
this.fade = function (step) {
var fader = this;
step = step || 0;
this.images[this.counter].style.opacity = step/100;
this.images[this.counter].style.filter = "alpha(opacity=" + step + ")"; // IE?
step = step + 2;
if (step <= 100) {
window.setTimeout(function () {
fader.fade(step);
}, 10);
} else {
window.setTimeout(function () {
fader.next();
}, 5000);
}
};
this.leftcomein = function (leftpos){
var fader = this;
leftpos = leftpos || 1030;
leftpos = leftpos - 10;
this.images[this.counter].style.left = leftpos + "px";
this.images[this.counter].style.opacity = 1;
this.images[this.counter].style.filter = "alpha(opacity=100)";
if(leftpos > 0){
window.setTimeout(function () {
fader.leftcomein(leftpos);
}, 1);
} else {
window.setTimeout(function () {
fader.next();
}, 5000);
}
};
this.rightcomein = function (rightpos){
var fader = this;
rightpos = rightpos || -1030;
rightpos = rightpos + 10;
this.images[this.counter].style.left = rightpos + "px";
this.images[this.counter].style.opacity = 1;
this.images[this.counter].style.filter = "alpha(opacity=100)";
if(rightpos < 0){
window.setTimeout(function () {
fader.rightcomein(rightpos);
}, 1);
} else {
window.setTimeout(function () {
fader.next();
}, 5000);
}
};
this.upcomein = function (toppos){
var fader = this;
toppos = toppos || -340;
toppos = toppos + 5;
this.images[this.counter].style.top = toppos + "px";
this.images[this.counter].style.opacity = 1;
this.images[this.counter].style.filter = "alpha(opacity=100)";
if(toppos < 0){
window.setTimeout(function () {
fader.upcomein(toppos);
}, 2);
} else {
window.setTimeout(function () {
fader.next();
}, 5000);
}
};
this.bottomcomein = function (toppos){
var fader = this;
toppos = toppos || 340;
toppos = toppos - 5;
this.images[this.counter].style.top = toppos + "px";
this.images[this.counter].style.opacity = 1;
this.images[this.counter].style.filter = "alpha(opacity=100)";
if(toppos > 0){
window.setTimeout(function () {
fader.bottomcomein(toppos);
}, 2);
} else {
window.setTimeout(function () {
fader.next();
}, 5000);
}
};
this.next = function () {
this.counter++;
//alle ausblenden bei erreichen von images.length
if(this.counter < this.images.length){
this.images[this.counter].style.zIndex = "1";
}
//Bei Ende der Bildersammlung Index von Bild 1 auf 1
//alle Anderen Idex auf 0 und den Counter auf 0 setzen
if (this.counter == this.images.length){
this.images[0].style.zIndex = "1";
for(var i = 1; i < this.images.length; i++ ){
this.images[i].style.zIndex = "0";
}
this.counter=0;
}
//weiter abspielen
if (this.counter < this.images.length) {
var num;// parseInt(Math.random() * ( 0 + 5 ));
num = 0;
switch(num){
case 0:
this.fade();
break;
case 1:
this.leftcomein();
break;
case 2:
this.rightcomein();
break;
case 3:
this.upcomein();
break;
case 4:
this.bottomcomein();
break;
}
}
};
}
function members(tableID, ListID){
this.memberTableID = tableID;
this.memberListID = ListID;
this.id="";
this.init = function(){
var obj = document.getElementById(this.memberListID);
//alert(this.memberListID);
if(obj != null){
obj.className = "full";
}
//alert(this.memberTableID);
obj = document.getElementById(this.memberTableID);
if(obj != null){
obj.className = "hidden";
}
}
this.show = function(){
document.getElementById(this.id).className = "visible";
//alert(this.id + " shown")
}
this.hide = function(){
var obj = document.getElementById(this.memberTableID).getElementsByTagName("tr");
var i=0;
for(i; i < obj.length;i++){
obj[i].className = "hidden";
}
//alert("alle hidden");
}
this.run = function(id){
this.id = id;
this.hide();
this.show();
}
this.side = function(){
var obj = document.getElementById(this.memberListID);
//alert(this.memberListID);
if(obj.className != "side"){
obj.className = "side";
}
obj = document.getElementById(this.memberTableID);
if(obj.className != "visible"){
obj.className = "visible";
}
}
}Dieser wird im quellcode über onload vorgeladen. Liegt vllt darin das problem? Das es über index.php klappt, aber über page.tpl.php nicht.
danke schonmal
- Anmelden oder Registrieren um Kommentare zu schreiben
Binde die JavaScript Datei
am 08.06.2012 - 15:22 Uhr
Binde die JavaScript Datei über den .info-File Deines Themes ein, das ist einfacher.
Du hast offenbar ein Problem mit dem korrekten Pfad zu Deinem Script. Wenn der Pfad mit einem / anfängt, ist es ein absoluter Pfad bezogen auf Deine Url. Hier wird nur die Domain davor gesetzt. Fängt er ohne / an, ist es ein relativer Pfad. Dann wird die aktuelle URL komplett davor gesetzt und dann stimmen, außer bei der Startseite, die Pfade nicht.
Beste Grüße
Werner
Danke für deine Antwort.
am 08.06.2012 - 15:41 Uhr
Danke für deine Antwort. Jedoch habe ich das JS schon über die .info datei eingebunden. Kann man auch ein onload über die .info einbinden? Und auch das / bzw. ohne / funktioniert auch nicht. Es ist einfach nur sehr komisch das es geht, wenn die datei index.php heißt :/
Hab die Lösung gefunden :o
am 09.06.2012 - 18:42 Uhr
Hab die Lösung gefunden :o
Man muss beim![]()
tag den kompletten pfad angeben, von der RICHTIGEN index.php aus dem drupal ordner. Zum Beispiel:
<img src="sites/all/themes/trappen/bilder/teaser/1.jpg">Du denkst aber immer noch an
am 09.06.2012 - 19:40 Uhr
Du denkst aber immer noch an die Unterschiede zwischen relativem und absolutem Pfad?
Beste Grüße
Werner
Ganz sicher (; Vielen dank.
am 13.06.2012 - 10:52 Uhr
Ganz sicher (; Vielen dank.