2 Javascripts in einer Datei - nix geht mehr

[FL]

Hi habe so ein tolles Javascript im INet gefunden, mit dem man Texte in Form von einem Kreis rotieren lassen kann. Nun wollte ich aber zwei Texte rotieren lassen, also habe uch das SCRIPT MIT ANDEREN BEZEICHNUNGEN nochmal eingefügt:

<script language="JavaScript">
rotation = new Array();

//rotation[x] = new Array("href","linkname","beschreibung/desc");
rotation[0] = new Array("#","Morphologie","Link1");
rotation[1] = new Array("#","Phänografie","Link2");
rotation[2] = new Array("#","Sportpsychologie","Link3");
rotation[3] = new Array("#","Sportpädagogik","Link4");
rotation[4] = new Array("#","Biomechanik","Link5");
rotation[5] = new Array("#","Trainingslehre","Link6");
rotation[6] = new Array("#","Theorie der Sportarten","Link7");
rotation[7] = new Array("#","Sportbiologie","Link8");
rotation[8] = new Array("#","Sportmedizin","Link9");

screenb = screen.availWidth;
screenh = screen.availHeight
r = 120;         // radius
xoff = (screenb / 2) - 73;      // x offset
yoff = 3300;      // y offset

x1 = xoff + 0; //Bildposition links
y1 = yoff - 0;  //Bildposition oben

descleft = xoff - 99; //desc-Position links
desctop = yoff + 55; //desc-Position oben

pi = Math.PI;    // PI
inc = (pi/r);  //  (links drehen)
// inc = -(pi/190); //  (rechts drehen)

document.write("<style type="text/css">.desc{left:" + descleft + ";top:" + desctop + ";}</style>");

function showObject(object) {object.visibility = VISIBLE;}

function hideObject(object) {object.visibility = HIDDEN;}

function slideLogo(from, to) {
 if (from < to) {
  company.top = (from += 20); //standard. 4
  setTimeout('slideLogo(' + from + ',' + to + ')', 30); //standard. 75
  }
 else initObjects();
}

function initObjects() {
objects = new Array();

for(x=1; x<=rotation.length; x++){
eval("objects.push(fly" + x + ");");
}

pos = new Array();

pos[0] = 0;
 for (x=1; x<objects.length; x++) {
  pos[x] = parseFloat(pos[x - 1] + ((2 * pi) / objects.length));
  }
rotateObjects();
}

function rotateObjects() {
 for (x=0; x<pos.length; x++) {
  pos[x] += inc;
 objects[x].visibility = 'visible';
  objects[x].left = (r * Math.cos(pos[x])) + xoff;
  objects[x].top = (r * Math.sin(pos[x])) + yoff;
  }
rotateTimer = setTimeout("rotateObjects()",60);
}

document.write("<div id="company" class="logo"><p><a href="#">Bewegungs-<br>lehre</a></p></div>");

for(x=1; x<=rotation.length; x++){
document.write("<div id="fly" + x + "" class="fly"><p><a onMouseOver="clearTimeout(rotateTimer);" onMouseOut="rotateObjects();" href="" + rotation[x-1][0] + "">" + rotation[x-1][1] + "</a><br></p></div>");
}

for(x=1; x<=rotation.length; x++){
document.write("<div align="center" id="desc" + x + "" class="desc"><p>" + rotation[x-1][2] + "</p></div>");
}

if (document.getElementById) {
before = "document.getElementById('";
after = "').style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.all) {
before = "document.all.";
after = ".style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.layers) {
before = "document.";
after = "";
var HIDDEN = "hide";
var VISIBLE = "show";
}

for(x=1; x<=rotation.length; x++) {
eval("var fly" + x + " = " + before + "fly" + x + after);
}

eval("var company = " + before + "company" + after);

for(x=1; x<=rotation.length; x++) {
eval("var desc" + x + " = " + before + "desc" + x + after);
}

slideLogo(0,y1);

function stop() {
inc=pi/100000000;
}
</script>

<script language="JavaScript">
rotation1 = new Array();

//rotation1[x1] = new Array("href","linkname","beschreibung/desc");
rotation1[0] = new Array("#","Mathematik","Link1");
rotation1[1] = new Array("#","Medizin","Link2");
rotation1[2] = new Array("#","Biologie","Link3");
rotation1[3] = new Array("#","Pädagogik","Link4");
rotation1[4] = new Array("#","Psychologie","Link5");
rotation1[5] = new Array("#","Pädagogik","Link6");

screenb1 = screen.availWidth;
screenh1 = screen.availHeight
r1 = 120;         // radius
xoff1 = (screenb1 / 2) - 73;      // x offset
yoff1 = 3600;      // y offset

x11 = xoff1 + 0; //Bildposition links
y11 = yoff1 - 0;  //Bildposition oben

descleft1 = xoff1 - 99; //desc-Position links
desctop1 = yoff1 + 55; //desc-Position oben

pi1 = Math.PI;    // PI
inc = (pi1/r1);  //  (links drehen)
// inc = -(pi/190); //  (rechts drehen)

document.write("<style type="text/css">.desc{left:" + descleft1 + ";top:" + desctop1 + ";}</style>");

function showObject(object) {object.visibility = VISIBLE;}

function hideObject(object) {object.visibility = HIDDEN;}

function slideLogo1(froma, toa) {
 if (froma < toa) {
  company.top = (froma += 20); //standard. 4
  setTimeout('slideLogo1(' + froma + ',' + toa + ')', 30); //standard. 75
  }
 else initObjects1();
}

function initObjects1() {
objects1 = new Array();

for(x1=1; x1<=rotation1.length; x1++){
eval("objects1.push(fly" + x1 + ");");
}

pos1 = new Array();

pos1[0] = 0;
 for (x1=1; x1<objects1.length; x1++) {
  pos1[x1] = parseFloat(pos1[x1 - 1] + ((2 * pi) / objects1.length));
  }
rotateObjects1();
}

function rotateObjects1() {
 for (x1=0; x1<pos1.length; x1++) {
  pos1[x1] += inc;
 objects1[x1].visibility = 'visible';
  objects1[x1].left = (r1 * Math.cos(pos1[x1])) + xoff1;
  objects1[x1].top = (r1 * Math.sin(pos1[x1])) + yoff1;
  }
rotateTimer1 = setTimeout("rotateObjects1()",60);
}

document.write("<div id="company" class="logo"><p><a href="#">Kinesio-<br>logie</a></p></div>");

for(x1=1; x1<=rotation1.length; x1++){
document.write("<div id="fly" + x1 + "" class="fly"><p><a onMouseOver="clearTimeout(rotateTimer1);" onMouseOut="rotateObjects1();" href="" + rotation1[x1-1][0] + "">" + rotation1[x1-1][1] + "</a><br></p></div>");
}

for(x1=1; x1<=rotation1.length; x1++){
document.write("<div align="center" id="desc" + x1 + "" class="desc"><p>" + rotation1[x1-1][2] + "</p></div>");
}

if (document.getElementById) {
before1 = "document.getElementById('";
after1 = "').style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.all) {
before1 = "document.all.";
after1 = ".style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.layers) {
before1 = "document.";
after1 = "";
var HIDDEN = "hide";
var VISIBLE = "show";
}

for(x1=1; x1<=rotation1.length; x1++) {
eval("var fly" + x1 + " = " + before1 + "fly" + x1 + after1);
}

eval("var company = " + before1 + "company" + after1);

for(x1=1; x1<=rotation1.length; x1++) {
eval("var desc" + x1 + " = " + before1 + "desc" + x1 + after1);
}

slideLogo1(0,y11);

function stop() {
inc=pi/100000000;
}
</script>

Jetzt Funktioniert nix mehr, bzw. ist das ganze nun zum Kauderwelsch geworden!!! :-(

Kann mir da jemand helfen????

Danke schon jetzt für all eure Antworten!!!

[Manuel B.]

Ich grüsse den Cosmos,

Jetzt Funktioniert nix mehr, bzw. ist das ganze nun zum Kauderwelsch geworden!!! :-(

Dann hast du irgendwo nen Fehler, bzw. stimmt irgendwas nicht.

Möge das "Self" mit euch sein

[FL]

Danke erstmal für eure Antworten!

Ja, das stimmt, dass ich noch nicht so viel mit Javascript zu tun hatte, geschweige denn ein Script zu programmieren aber ich blicke da einfach nicht durch (vielleicht denke ich zu kompliziert, sagen manche). Aber ich bin schon froh, wenn ich sie anwenden kann (odr auch nicht, wie man sieht).

Es gibt eine bessere Lösung (moderneres Script) ???
Habt ihr denn da irgendeine Anlaufstelle für mich (bitte nicht schreiben ich soll es selber machen ^siehe oben^)

Im Firefox zeigt er keine weiteren Fehler an, da hatte ich schon geguckt.

PS: Falls ihr mir doch ratet, selber nen script zu schreiben, dann sagt mir bitte wo ich es lernen kann. Bei SelfHTML sehe ich nicht durch, weil einfach zu viel mit einem Mal kommt, was mir nichts bringt und ich meinem Ziel dadurch nicht näher komme.
Ich hoffe ihr könnt mich verstehen

Danke.

[FL]

Hey!
Wollt oder könnt ihr nicht antworten?

Ich würde mich sehr freuen wenn einer von euch mal antworten würde.

[Struppi]

Wollt oder könnt ihr nicht antworten?

können.
Ich hab den Code kopiert und er macht weder im FF noch im IE etwas anderes, ausser Fehler zu produzieren, daher weiß ich nicht was passieren soll.

Struppi.

[FL]

Wenn du den zweiten Teil raus nimmst gehts!
Aber sobald ich den 2. einfüg wirds nur Mist
Kannst du mir weiterhelfen?

Gruß FL

[FL]

Dann eben nicht!
Oder erbarmt sich vielleicht doch noch jemand mir zu antworten???

[Christoph Schnauß]

hallo FL,

erbarmt sich vielleicht doch noch jemand mir zu antworten?

Sei mal nicht so ungeduldig und prüfe lieber _genau_ nach, was du bisher an Antworten erhalten hast. Und du darfst sicher sein, daß Struppi von Javascript eine Menge versteht - ich erhalte übrigens dasselbe Ergebnis wie er, wenn ich deinen angegebenen Code ausführen zu lassen versuche. Ich habe dir bereits ziemlich detailliert aufgeführt, wo es klemmt.

Wir wissen immer noch nicht exakt, welche Fehlermeldungen du bisher erhalten, verstanden und ausgewertet hast.

Grüße aus Berlin

Christoph S.

[FL]

Ich sehe einfach nicht mehr den Animationseffekt, den ich erreichen wollte, als ich den zweiten Skript eingefügt habe.

Normalerweise müsste das Wort in der Mitte ('logo') am Anfang von oben nach unten fallen an die vorgegebene Stelle (xoffset bzw. yoffset). Dort sollen sich dann alle Wörter die vorgegeben wurden um dieses eine Wort drehen.

Das ist eigentlich der Effekt, den ich erzielen möchte.

Kann  mir wirklich niemand helfen? :-(

[Struppi]

Das ist eigentlich der Effekt, den ich erzielen möchte.

Wie gesagt zweimal versucht - nur Fehlermeldungen bekommen - wie wär's wenn du schon mal diesen Meldungen nachgehst und korrigierst? Und dann am besten das ganze zeigst, damit man mal sieht wie weit du gekommen bist.

Struppi.

[FL]

achso!
ich glaube ich weiß warum es bei euch nicht geht die CSS-Angaben habt ihr natürlich noch nicht mit dabei.
Tut mir leid!!!

<style type="text/css">
                 <!--
                 body { margin:5px; margin-top:20px; }
                   a:link { font-size: 14pt; }
                   a:hover { font-size: 14pt; text-decoration:none; }

.fly
    {
    color:black;
    font:normal 14pt verdana;
    position:absolute;
    visibility:hidden;
    z-index:2;
    }

.logo
    {
    font:normal 20pt arial;
    color:black;
    position:absolute;
    visibility:visible;
    z-index:0;
    margin-left: 50%; margin-right: 50%;
    text-align:center;
    }

.desc
    {
    text-align:center;
    font:bold 14pt arial;
    color:#FA2B1D;
    position:absolute;
    width:200px;
    visibility:hidden;
    z-index:1;
    }

//-->
</style>

So ich hoffe es funktioniert jetzt.

Hier auch nochmal das Javascript:
<script language="JavaScript">
rotation = new Array();

//rotation[x] = new Array("href","linkname","beschreibung/desc");
rotation[0] = new Array("#","Morphologie","Link1");
rotation[1] = new Array("#","Phänografie","Link2");
rotation[2] = new Array("#","Sportpsychologie","Link3");
rotation[3] = new Array("#","Sportpädagogik","Link4");
rotation[4] = new Array("#","Biomechanik","Link5");
rotation[5] = new Array("#","Trainingslehre","Link6");

screenb = screen.availWidth;
screenh = screen.availHeight
r = 180;         // radius
xoff = (screenb / 2);      // x offset
yoff = 3000;      // y offset

x1 = xoff + 0; //Bildposition links
y1 = yoff - 0;  //Bildposition oben

descleft = xoff - 99; //desc-Position links
desctop = yoff + 55; //desc-Position oben

pi = Math.PI;    // PI
inc = (pi/r);  //  (links drehen)
// inc = -(pi/190); //  (rechts drehen)

document.write("<style type="text/css">.desc{left:" + descleft + ";top:" + desctop + ";}</style>");

function showObject(object) {object.visibility = VISIBLE;}

function hideObject(object) {object.visibility = HIDDEN;}

function slideLogo(from, to) {
 if (from < to) {
  company.top = (from += 20); //standard. 4
  setTimeout('slideLogo(' + from + ',' + to + ')', 30); //standard. 75
  }
 else initObjects();
}

function initObjects() {
objects = new Array();

for(x=1; x<=rotation.length; x++){
eval("objects.push(fly" + x + ");");
}

pos = new Array();

pos[0] = 0;
 for (x=1; x<objects.length; x++) {
  pos[x] = parseFloat(pos[x - 1] + ((2 * pi) / objects.length));
  }
rotateObjects();
}

function rotateObjects() {
 for (x=0; x<pos.length; x++) {
  pos[x] += inc;
 objects[x].visibility = 'visible';
  objects[x].left = (r * Math.cos(pos[x])) + xoff;
  objects[x].top = (r * Math.sin(pos[x])) + yoff;
  }
rotateTimer = setTimeout("rotateObjects()",60);
}

document.write("<div id="company" class="logo"><p><a href="#unten">Bewegungs-<br>lehre<br>und<br>Kinesiologie</a></p></div>");

for(x=1; x<=rotation.length; x++){
document.write("<div id="fly" + x + "" class="fly"><p><a onMouseOver="clearTimeout(rotateTimer);" onMouseOut="rotateObjects();" href="" + rotation[x-1][0] + "">" + rotation[x-1][1] + "</a><br></p></div>");
}

for(x=1; x<=rotation.length; x++){
document.write("<div align="center" id="desc" + x + "" class="desc"><p>" + rotation[x-1][2] + "</p></div>");
}

if (document.getElementById) {
before = "document.getElementById('";
after = "').style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.all) {
before = "document.all.";
after = ".style";
var HIDDEN = "hidden";
var VISIBLE = "visible";
}

else if (document.layers) {
before = "document.";
after = "";
var HIDDEN = "hide";
var VISIBLE = "show";
}

for(x=1; x<=rotation.length; x++) {
eval("var fly" + x + " = " + before + "fly" + x + after);
}

eval("var company = " + before + "company" + after);

for(x=1; x<=rotation.length; x++) {
eval("var desc" + x + " = " + before + "desc" + x + after);
}

slideLogo(0,y1);

</script>

[Struppi]

ich glaube ich weiß warum es bei euch nicht geht die CSS-Angaben habt ihr natürlich noch nicht mit dabei.

ich hab keine Ahnung warum du nicht auf das reagierst was wir dir seit Tagen erzählen, es ist schließlich dein Problem. Wenn ich den Code kopiere in meinem Browser (FF 2) aurufe erhalte ich nach wie vor Fehlermeldungen:

Fehler: Fehler beim Verarbeiten des Wertes für Eigenschaft 'top'.  Deklaration ignoriert.
Quelldatei: ***
Zeile: 0

ohne Einheit bei der Postionsangabe wird das nichts

Struppi.

[FL]

Oh! Sorry im Firefox habe ich schonmal nachgeschaut und da gings noch (kann mich zumindest noch wage daran erinnern ;-)) Aber du hast Recht (das bezweifele ich ja auch gar nicht). Ich bin froh das ich euch hab sonst würde ich sichergar nicht weiter kommen. Im IE funktioniert es aber!!!

Da Christoph Schnauß gesagt hat:

Ja, und offenbar ist es auch bereits in Ehren ergraut. Ich bin ziemlich aicher, daß sich für den von dir gewünschten Effekt auch ein kürzeres und etwas moderneres Script hätte auftreiben lassen.

Da möchte ich doch schon gerne wissen welches Skript er da hätte (wenn er mir überhaupt noch antworten will).

Vielen Dank bis hierher
Gruß FL

[Struppi]

Wenn du den zweiten Teil raus nimmst gehts!

Bei mir nicht, ich bekomme nur Fehlermeldung und es passiert nichts.

Struppi.

[Chris]

Hallo,

das skript hab ich zwar nicht geprüft.. aber einen tip hab ich trotzdem ;)

lade dir einfach das plugin firebug für dne firefox herunter: https://addons.mozilla.org/de/firefox/addon/1843

und schau welche fehler in welchen zeilen angezeigt werden. mit diesen informationen solltest du recht flott voran kommen.

viel spass

Chris

[Christoph Schnauß]

hallo,

lade dir einfach das plugin firebug für dne firefox herunter: https://addons.mozilla.org/de/firefox/addon/1843
und schau welche fehler in welchen zeilen angezeigt werden.

So eine Ausgabe macht Firefox auch ohne dieses Addon.

Grüße aus Berlin

Christoph S.

[chris]

hallo Christoph,

es stellt sie aber viel schöne und umfangreiche dar. wer das addon kennt, weiss die vorteile zu schätzen ;)

viele grüße
Chris

[Christoph Schnauß]

hallo,

habe so ein tolles Javascript im INet gefunden

Ja, und offenbar ist es auch bereits in Ehren ergraut. Ich bin ziemlich aicher, daß sich für den von dir gewünschten Effekt auch ein kürzeres und etwas moderneres Script hätte auftreiben lassen. Es gibt fast zwangsläufig Probleme, wenn man sich ein Script besorgt und einzusetzen versucht, das man nicht wirklich versteht.

mit dem man Texte in Form von einem Kreis rotieren lassen kann. Nun wollte ich aber zwei Texte rotieren lassen, also habe uch das SCRIPT MIT ANDEREN BEZEICHNUNGEN nochmal eingefügt

Grundsätzlich kann man das so machen, die Idee ist nicht ganz verkehrt. Allerdings mußt du dann bei der Positionierung aufpassen, zumal document.write auch ein paar Tücken hat (und "eval" auch).

<script language="JavaScript">

Hier fehlt auf jeden Fall noch das "type"-Attribut.

if (document.getElementById) {
[...]
else if (document.all) {
[...]
else if (document.layers) {

Diese "Browserweiche" ist es, die du in dieser Form heute nicht mehr verwenden solltest.

</script>
<script language="JavaScript">

Es ist nicht nötig, deinen Code in zwei Scriptbereiche aufzuteilen, du kannst alles in _einem_ Script zusammenfassen.

Jetzt Funktioniert nix mehr

Was bedeutet das? Welche Fehlermeldungen kennst du? Mit welchen Browsern hast du es probiert?
Nur als Hinweis: im Firefox gibt es eine "Fehlerkonsole", die dir die Zeilennummer im Script angibt, wo der Fehler liegt. Allerdings meldet sie dir Zeile 1 als den ersten Fehler, und "Zeile 1" ist in deinem Script fehlerfrei - dazu mußt du dann verstehen können, wo diese Fehlerkonsole zu zählen anfängt. Konkret ist es deine Variable "rotateTimer", da die Funktion "rotateObjects()" für "pos" keinen Wert zugewiesen bekommt.

Im übrigen kann dein Javascript auch mit nur einem Script nicht funktionieren - oder du hast beim Herüberkopieren noch einen Fehler gemacht.

Grüße aus Berlin

Christoph S.

[Struppi]

if (document.getElementById) {
[...]
else if (document.all) {
[...]
else if (document.layers) {

Diese "Browserweiche" ist es, die du in dieser Form heute nicht mehr verwenden solltest.

Falsch!
Diese Form der Browserweiche ist es, die man verwenden sollte, da nicht auf den Browser sondern auf das was der Browser kann getestet wird. Nur die weitere Umsetzung läßt dann zu wünschen übrig.

Struppi.