Hilfe für JS gesucht

**zauberman** · 29.07.2006 12:48

Hallo zusammen....

lang lang hats gedauert bis ich etz endlich auf unserer Seite das mit den animierten Fenster hinbekommen habe. ( siehe http://www.platin-tigers.de und dort unter Kitten)

Bin echt froh, weil das war ganz schön ein akt....hehehe.

Jetzt aber mal ne Frage an euch Profis:

1.
Wie muß ich das JS verändern, damit sich das Fenster erst nach rechts "öffnet" und dannach nach unten geht?

2.
Wie bekomme ich das hin, dass der Hintergrund bei dem geöffneten Fenster nicht weiß ist, sonder "unsere" Farbe #FFD397 hat?

Anbei noch das JS:

Code:

animatedWindow = new Object();

// CONFIGURATION:

animatedWindow.startWidth = 100;
animatedWindow.startHeight = 100;

animatedWindow.endWidth = 640;
animatedWindow.endHeight = 480;

animatedWindow.bgColor = '#FFD397';

animatedWindow.increment = 50;

animatedWindow.frameRate = 50;

animatedWindow.posX = 10;
animatedWindow.posY = 10;

animatedWindow.location = false;
animatedWindow.menubar = false;
animatedWindow.resizable = false;
animatedWindow.scrollbars = false;
animatedWindow.status = false;
animatedWindow.toolbar = false;

// MAIN:

animatedWindow.winIndex = 0;
animatedWindow.windows = new Array();

function isBlank(OBJ) {
   if (OBJ == null) OBJ = '';
   OBJ += '';
   var trimList = ' \f\n\r';
   while (OBJ.length > 0 && trimList.indexOf(OBJ.charAt(0)) != -1) OBJ = OBJ.substring(1);
   while (OBJ.length > 0 && trimList.indexOf(OBJ.charAt(OBJ.length - 1)) != -1) OBJ = OBJ.substring(0,OBJ.length - 1);
   return (OBJ == '') ? true : false;
   }

function isBoolean(STR) {
   return (STR == true || STR == false) ? true : false;
   }

function openAnimatedWindow(URL,STARTWIDTH,STARTHEIGHT,ENDWIDTH,ENDHEIGHT,BGCOLOR,INCREMENT,FRAMERATE,POSX,POSY,LOCATION,MENUBAR,RESIZABLE,SCROLLBARS,STATUS,TOOLBAR) {
   if (isBlank(STARTWIDTH)) STARTWIDTH = animatedWindow.startWidth;
   if (isBlank(STARTHEIGHT)) STARTHEIGHT = animatedWindow.startHeight;
   if (isBlank(ENDWIDTH)) ENDWIDTH = animatedWindow.endWidth;
   if (isBlank(ENDHEIGHT)) ENDHEIGHT = animatedWindow.endHeight;
   if (isBlank(BGCOLOR)) BGCOLOR = animatedWindow.bgColor;
   if (isBlank(INCREMENT)) INCREMENT = animatedWindow.increment;
   if (isBlank(FRAMERATE)) FRAMERATE = animatedWindow.frameRate;
   if (isBlank(POSX)) POSX = animatedWindow.posX;
   if (isBlank(POSY)) POSY = animatedWindow.posY;
   if (isBlank(LOCATION)) LOCATION = animatedWindow.location;
   if (isBlank(MENUBAR)) MENUBAR = animatedWindow.menubar;
   if (isBlank(RESIZABLE)) RESIZABLE = animatedWindow.resizable;
   if (isBlank(SCROLLBARS)) SCROLLBARS = animatedWindow.scrollbars;
   if (isBlank(STATUS)) STATUS = animatedWindow.status;
   if (isBlank(TOOLBAR)) TOOLBAR = animatedWindow.toolbar;
   var winFeaturesStr = 'width=' + STARTWIDTH + ',height=' + STARTHEIGHT;
   winFeaturesStr += ',left=' + POSX + ',screenX=' + POSX + ',top=' + POSY + ',screenY=' + POSY;
   if (isBoolean(LOCATION)) winFeaturesStr += (LOCATION) ? ',location=yes' : ',location=no';
   if (isBoolean(MENUBAR)) winFeaturesStr += (MENUBAR) ? ',menubar=yes' : ',menubar=no';
   if (isBoolean(RESIZABLE)) winFeaturesStr += (RESIZABLE) ? ',resizable=yes' : ',resizable=no';
   if (isBoolean(SCROLLBARS)) winFeaturesStr += (SCROLLBARS) ? ',scrollbars=yes' : ',scrollbars=no';
   if (isBoolean(STATUS)) winFeaturesStr += (STATUS) ? ',status=yes' : ',status=no';
   if (isBoolean(TOOLBAR)) winFeaturesStr += (TOOLBAR) ? ',toolbar=yes' : ',toolbar=no';
   var thisWinIndex = animatedWindow.winIndex;
   animatedWindow.winIndex++;
   animatedWindow.windows[thisWinIndex] = new Object();
   animatedWindow.windows[thisWinIndex].winObj = window.open('','',winFeaturesStr);
   animatedWindow.windows[thisWinIndex].winObj.document.bgColor = BGCOLOR;
   animatedWindow.windows[thisWinIndex].winObj.focus();
   animatedWindow.windows[thisWinIndex].frameRate = FRAMERATE;
   animatedWindow.windows[thisWinIndex].url = URL;
   animatedWindow.windows[thisWinIndex].endWidth = ENDWIDTH;
   animatedWindow.windows[thisWinIndex].endHeight = ENDHEIGHT;
   animatedWindow.windows[thisWinIndex].angle = Math.atan2(ENDHEIGHT - STARTHEIGHT,ENDWIDTH - STARTWIDTH);
   animatedWindow.windows[thisWinIndex].distZ = Math.sqrt(Math.pow(ENDHEIGHT - STARTHEIGHT,2) + Math.pow(ENDWIDTH - STARTWIDTH,2));
   animatedWindow.windows[thisWinIndex].incX = Math.cos(animatedWindow.windows[thisWinIndex].angle) * INCREMENT;
   animatedWindow.windows[thisWinIndex].incY = Math.sin(animatedWindow.windows[thisWinIndex].angle) * INCREMENT;
   animatedWindow.windows[thisWinIndex].incZ = INCREMENT;
   animatedWindow.windows[thisWinIndex].roundedX = STARTWIDTH;
   animatedWindow.windows[thisWinIndex].roundedY = STARTHEIGHT;
   animatedWindow.windows[thisWinIndex].currentX = STARTWIDTH;
   animatedWindow.windows[thisWinIndex].currentY = STARTHEIGHT;
   animatedWindow.windows[thisWinIndex].currentZ = 0;
   resizeAnimatedWindow(thisWinIndex);
   }

function resizeAnimatedWindow(WININDEX) {
   var animateWinObj = animatedWindow.windows[WININDEX];
   if (animateWinObj.currentZ + animateWinObj.incZ < animateWinObj.distZ) {
      animateWinObj.currentX += animateWinObj.incX;
      animateWinObj.currentY += animateWinObj.incY;
      animateWinObj.currentZ += animateWinObj.incZ;
      var incX = Math.round(animateWinObj.currentX) - animateWinObj.roundedX;
      animateWinObj.roundedX += incX;
      var incY = Math.round(animateWinObj.currentY) - animateWinObj.roundedY;
      animateWinObj.roundedY += incY;
      animateWinObj.winObj.resizeBy(incX,incY);
      window.setTimeout('resizeAnimatedWindow(' + WININDEX + ')',animateWinObj.frameRate);
      }
   else {
      var incX = animateWinObj.endWidth - animateWinObj.roundedX;
      var incY = animateWinObj.endHeight - animateWinObj.roundedY;
      animateWinObj.winObj.resizeBy(incX,incY);
      if (!isBlank(animateWinObj.url)) animateWinObj.winObj.location.href = animateWinObj.url;
      }
   }

Herzlichen Dank für eure Mühe!

Mike

**UweB** · 29.07.2006 20:07

Hallo Mike,
deine zweite Frage ist schnell beantwortet:
Du musst dem geöffneten Fenster eine entsprechende html-Seite (mit Hintergrundfarbe) zuordnen, anstatt nur eine Grafik.

Deine erste Frage ist komplizierter.
Das besondere an „deiner“ Funktion ist gerade, dass die beiden unterschiedlich langen Seiten zeitgleich ihre ganze Länge erreichen.
Wahrscheinlich reicht es diese beiden Zeilen:

Code:

animatedWindow.windows[thisWinIndex].incX = Math.cos(animatedWindow.windows[thisWinIndex].angle) * INCREMENT;
   animatedWindow.windows[thisWinIndex].incY = Math.sin(animatedWindow.windows[thisWinIndex].angle) * INCREMENT;

zu ersetzten durch:

Code:

animatedWindow.windows[thisWinIndex].incX = INCREMENT;
   animatedWindow.windows[thisWinIndex].incY = INCREMENT;

Und weiter unten diesen Code:

Code:

if (animateWinObj.currentZ + animateWinObj.incZ < animateWinObj.distZ) {
      animateWinObj.currentX += animateWinObj.incX;
      animateWinObj.currentY += animateWinObj.incY;
      animateWinObj.currentZ += animateWinObj.incZ;
      var incX = Math.round(animateWinObj.currentX) - animateWinObj.roundedX;
      animateWinObj.roundedX += incX;
      var incY = Math.round(animateWinObj.currentY) - animateWinObj.roundedY;
      animateWinObj.roundedY += incY;
      animateWinObj.winObj.resizeBy(incX,incY);
      window.setTimeout('resizeAnimatedWindow(' + WININDEX + ')',animateWinObj.frameRate);
      }
else {
      var incX = animateWinObj.endWidth - animateWinObj.roundedX;
      var incY = animateWinObj.endHeight - animateWinObj.roundedY;
      animateWinObj.winObj.resizeBy(incX,incY);
      if (!isBlank(animateWinObj.url)) animateWinObj.winObj.location.href = animateWinObj.url;
      }

durch diesen zu ersetzen:

Code:

if (animateWinObj.currentX + animateWinObj.incX < animateWinObj.endWith) {
      animateWinObj.currentX += animateWinObj.incX;
      var incX = Math.round(animateWinObj.currentX) - animateWinObj.roundedX;
      animateWinObj.roundedX += incX;
      window.setTimeout('resizeAnimatedWindow(' + WININDEX + ')',animateWinObj.frameRate);
      }
else {
      if (animateWinObj.currentY + animateWinObj.incY < animateWinObj.endHeight) {
      animateWinObj.currentY += animateWinObj.incY;
      var incY = Math.round(animateWinObj.currentY) - animateWinObj.roundedY;
      animateWinObj.roundedY += incY;
      window.setTimeout('resizeAnimatedWindow(' + WININDEX + ')',animateWinObj.frameRate);
      }
      var incX = animateWinObj.endWidth - animateWinObj.roundedX;
      var incY = animateWinObj.endHeight - animateWinObj.roundedY;
      animateWinObj.winObj.resizeBy(incX,incY);
      if (!isBlank(animateWinObj.url)) animateWinObj.winObj.location.href = animateWinObj.url;
      }

Ausprobiert habe ich das nicht.
Auch vermute ich, dass das Ganze unter den vereinfachten Bedingungen, die du ja eigentlich willst, einfacher zu lösen sein müsste.

Gruß
Uwe

**zauberman** · 30.07.2006 11:37

Zitat von UweB

Ausprobiert habe ich das nicht.
Auch vermute ich, dass das Ganze unter den vereinfachten Bedingungen, die du ja eigentlich willst, einfacher zu lösen sein müsste.

Gruß
Uwe

Guten Morgen Uwe...

vielen Dank für deine Antwort!

Also das mit der html-Seite verstehe ich....soll heißen ich muß praktisch für jedes Bild, dass vergrößert werden soll, ne eigene Seite bauen und die dann in dem animierten Fenster öffnen lassen....

Da wäre es ja super, wenn ich nur eine Seite bauen müßte und sich das Bild automatisch "reinstellt"...geht sowas?

Zu der anderen Sache mit dem animierten Fenster....
das klappt leider so ned....also bei mir öffnet sich das Fenster dann irgendwie komplett komisch und auch hat es ne ganz andere Größe wenn es geöffnet ist...

Ich habe natürlich keine Ahnung, ob das einfacher gehen würde....das wäre natürlich schön...da ich dann evtl auch besser durchckecken würde...lol.

Na mal schaun...evtl weiß ja einer noch nen Weg.

Dir nen schönen Sonntag und viele Grüße aus München

Zaubi

**UweB** · 30.07.2006 20:12

Hallo Mike,

Da wäre es ja super, wenn ich nur eine Seite bauen müßte und sich das Bild automatisch "reinstellt"...geht sowas?

Natürlich geht das. Ich habe aber gerade keine Zeit. Ein Beispiel gibt es hoffentlich morgen. Ist abe recht einfach.

Zu der anderen Sache mit dem animierten Fenster....

Da würde ich noch mehr Zeit benötigen, um das Script im ganzen zu verstehen. Mal sehen.
Ich denke einfacher wäre es, ein anderes Script zu suchen.

Gruß
Uwe

**zauberman** · 30.07.2006 22:18

Nabend Uwe....

joah.....keinen Stress...

Ich finde es echt super dass einem hier so toll geholfen wird!

Also mit nem anderen Script für das animierte Fenster...hmmmm....ich habe bis etz nix gefunden... und habe verdammt viel gestöbert.

Aber evtl findest du ja was geeignetes.

Übrigens...wie findest du denn die Seite so?

Das einzige was ich echt bedauere, ist, dass sie halt nur für 1024x768 geeignet ist

Aber gut...man kann nicht alles haben...hehehe.

Viele Grüße und nen scheenen Abend...

Mike

**UweB** · 31.07.2006 17:05

Hallo Mike,
Hier siehst du eine Seite, bei der die Adresse des Bildes mit der Seitenadresse übergeben wurde. Da ich eines eurer Katzenbilder genommen habe, sieht das etwas unübersichlich aus.
Wenn sich die Seite und die Bilder im selben Ordner befinden steht da nur "Seitenname.html?Bildname.jpg", oder genauer "Url der Seite","ein Fragezeichen","Url des Bildes".
Am besten kopierst du einfach den Queltext der Datei tigers5.html.

Übrigens...wie findest du denn die Seite so?

Ganz ehrlich? Mir gefällt sie nicht so gut.
Aber bei einer privaten Seite ist doch wichtig, dass sie euch (und eurer Zielgruppe) gefällt.

Gruß
Uwe

zur Startseite vom TP

Thema: Hilfe für JS gesucht

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hilfe für JS gesucht

Aktive Benutzer

Aktive Benutzer