Java Applet verdeckt andere Elemente

[Robin]

Hallo liebe Leute! :)

Ich hab ein Problem:
Die Java Applets auf meiner Seite verdecken andere (Javascript) Elemtente. In meinem Fall: meine Lightbox wird von meinem Java Applet z.T. verdeckt.

Wie kann ich ein JavaApplet einem Javascript quasi "unterordnen" ?

Hier der Link zur Seite:

http://fuhly.deroo.de/cms/about/about.html

Wenn man unten eines der Bilder anklickt, erscheint eine Lightbox die das Bild anzeigt; leider liegen die JavaApplets mit den Fade Shows über der Lightbox, sodass die Sicht eingeschränkt ist.

Ich habs schon in CSS mit z-index und ähnlichem versucht, jedoch brachte das nicht den gewünschten Erfolg.

Hat jemand eine Idee wie ich das JavaApplet "unter" den ausgegrauten Hintergrund bekomme, sobald die Lightbox aktiv wird?

Danke im Voraus,

Robin

[globe]

n'abend,

Wie kann ich ein JavaApplet einem Javascript quasi "unterordnen" ?

du verwendest die herkömmliche Methode, hast du die <object>-Methode schon probiert?

http://fuhly.deroo.de/cms/about/about.html

Wenn man unten eines der Bilder anklickt, erscheint eine Lightbox die das Bild anzeigt; leider liegen die JavaApplets mit den Fade Shows über der Lightbox, sodass die Sicht eingeschränkt ist.

Das passiert vermutlich aus dem selben Grund, wie das bei Flash der Fall ist. Die Ausgabe des Applets wird nicht in die Seite eingebaut, sondern vielmehr über den Ort gelegt, an dem das Applet erscheinen sollte.

Hat jemand eine Idee wie ich das JavaApplet "unter" den ausgegrauten Hintergrund bekomme, sobald die Lightbox aktiv wird?

Wenn ich das richtig sehe, nutzt du dieses Applet nur wegen der Überblendung. Sollte das so sein, möchtest du dich mittels Google vielleicht nach einer Javascript Lösung umsehen, die das auch kann. Hätte den enormen Vorteil, dass mein Browser deine Seite ohne 4 Jahre Warten auf den Start der JVM anzeigen würde ;)

weiterhin schönen abend...

[Robin]

Jap, daran habe ich auch schon gedacht und habe auch eineige Javascripts gefunden, aber leider haben die mir nicht ganz so gefallen, bzw. im Falle meiner Zufriedenstellung wollte und wollte sich die Fade Show einfach nicht meinen Wünschen "anpassen", um's mal vorsichtig auszudrücken ;)

Ich werde das mit dem Object mal probieren, dank für den Hinweis! :)

[Robin]

So ich habe nun doch eine Javascript Alternative gefunden ;-)

Jedoch geht die Lightbox nicht mehr nach Einbinden des Javacripts, siehe hier:

http://fuhly.deroo.de/cms/about/about.html

Außerdem fließt der Text einfach hinter den Grafiken weiter und wird nicht umgebrochen.

Wie kann ich diesen Schönheitsfehler beheben und meine Lightbox zum Laufen bekommen?

[globe]

n'abend,

Wie kann ich diesen Schönheitsfehler beheben und meine Lightbox zum Laufen bekommen?

in dem man das kaputte HTML aufräumt und dann sicherstellt, dass entweder das <ul> so groß wie sein Inhalt ist (Bilder sind ja alle gleich groß), oder den umschließenden <p>aragraph schmaler machen.

weiterhin schönen abend...

[Robin]

Entweder bin ich zu doof oder es geht einfach nicht :(

Der Text wird weder umgebrochen noch funktioniert die Lightbox..

W3C Validator sagt dass kein width und height im <ul> tag erlaubt ist, also hab ich versucht das in CSS zu realisieren un zwar so:

<style type="text/css">
 <!--
 #gallery { position:relative; text-align:center; margin-left:195px; }
 ul {margin: 0; padding: 0;}
 li {margin: 0; padding: 0;}
 -->
</style>

Das geht aber nicht, wie man sieht...

http://fuhly.deroo.de/about/about.html

Irgendwie denke ich, dass ich ein ziemlich reduziertes Verständnis von CSS habe; kurz: ich bin irgendwie wohl zu doof dazu.. :(

[globe]

n'abend,

Der Text wird weder umgebrochen noch funktioniert die Lightbox..

Intuitiv hätte ich behauptet, dass dein "crossfader" den onload-Handler der lightbox überschreibt. Nach überfliegen des Source stellt sich jedoch heraus, dass am ende von crossfade.js die Funktion addEvent() gesetzt wird. Diese wurde aber (vermutlich von monotools) schon gesetzt und wird hier überschrieben. Ggf. kann die Lightbox sich deshalb nicht initialisieren. Du willst also in crossfade.js aus allen »addEvent« ein »cfAddEvent« machen, um "schnell" herauszufinden, ob das wirklich das Problem ist.

<style type="text/css">
<!--
#gallery { position:relative; text-align:center; margin-left:195px; }
ul {margin: 0; padding: 0;}
li {margin: 0; padding: 0;}
-->
</style>

die dazugehörige Struktur sieht so aus:

<td class="leftb">  
  <ul id="gallery" style="visibility: visible;">  
    <li> Bild für fading </li>  
  </ul>  
  <p> Inhalt </p>  
</td>

Deine Bilder sind ungefähr 220 Pixel breit, deine Tabellenzelle hat irgendwas um die 680 Pixel. Positioniere das <ul id="gallery"> rechts (von mir aus mit position:absolute, oder float:right). Gib dem <p>aragraph die info, wie breit er werden darf, 680 - 220 - Abstand = 440 Pixel. <p style="width:440px"> müsste zum Testen ausreichen...

weiterhin schönen abend...

[Robin]

Du bist mein Held!

Das mit dem Text hat jetzt schonmal geklappt, wie du ja hier sehen kannst:

http://fuhly.deroo.de/cms/about/about.html

jedoch wird das Javascript nicht mehr angezeigt, sobald ich alle "addEvent"'s in ein "cfaddEvent" verwandle.
Das habe ich als Beispiel auch so hochgeladen, damit du siehst was ich meine.

Aber es scheint ja schonmal daran zu liegen, oder?
Hast du eine Idee wie man das sonst lösen könnte?

[globe]

n'abend,

jedoch wird das Javascript nicht mehr angezeigt, sobald ich alle "addEvent"'s in ein "cfaddEvent" verwandle.

könnte das vielleicht an folgendem liegen?

 if (elm.cfAddEventListener){  
   elm.cfAddEventListener(evType, fn, useCapture);  
   return true;  
 } else if (elm.attachEvent){  
   var r = elm.attachEvent("on"+evType, fn);  
   return r;  
 }  

korrigier das mal:

 if (elm.addEventListener){  
   elm.addEventListener(evType, fn, useCapture);  
   return true;  
 } else if (elm.attachEvent){  
   var r = elm.attachEvent("on"+evType, fn);  
   return r;  
 }  

weiterhin schönen abend...

[Robin]

Du bist der beste!!!

Jetzt geht alles! :)

Vielen vielen Dank!!!! :)

[Robin]

Du bist der beste!!!

Jetzt geht alles! :)

Vielen vielen Dank!!!! :)

Zu früh gefreut :(

Ich möchte natürlich 2 solche Fade Shows einbinden, wie mache ich das denn?
Ich habs versucht nen seperates javascript file für die 2te fade show einzubinden und einfach die in dem js file die variablen zu ändern von

var galleryId = 'gallery';

auf

var galleryId = 'gallery1';

Im Head würde dann stehen:

<script type="text/javascript" src="crossfade.js"></script>
<script type="text/javascript" src="crossfade_1.js"></script>

Das geht aber leider so nicht.. wie kann ich das denn machen?

[globe]

n'abend,

Ich möchte natürlich 2 solche Fade Shows einbinden, wie mache ich das denn?

das von dir eingesetzte Script unterstützt multiple Instanzen nicht. Ohne ein bisschen Aufwand wirst du nicht ans Ziel kommen.

Ich habs versucht nen seperates javascript file für die 2te fade show einzubinden und einfach die in dem js file die variablen zu ändern von

damit überschreibst du allenfalls die ersten Werte mit den zweiten.

weiterhin schönen abend...

[Robin]

Achso, das ist natürlich unvorteilhaft..
Ich habe jetzt ein Script rausgesucht, welches multiple Instanzen unterstützt (steht als Kommentar im Quelltext).

Habe sie auch schon erfolgreich eingbunden wie du sehen kannst:

http://fuhly.deroo.de/cms/about/about.html

Allerdings hab ich es nicht geschafft sie so zu positionieren wie sie soll (Sie soll auf gleicher oder zumindestens fast gleicher höhe mit dem Text sein).

Mit margin-top vorschob sich der text mit nach unten.

Kannst du mir sagen, wie ich die Fade Show nun weiter nach unten bzw den Text nach oben bekomme?

Vielen Dank, du bist echt spitze! :)

[globe]

n'abend,

Kannst du mir sagen, wie ich die Fade Show nun weiter nach unten bzw den Text nach oben bekomme?

Vermutlich musst du die show rechts floaten (float:right).
Ich habe - und werde - mir das neue Script aber nicht näher angesehen. Das ist die reinste Suppe.

weiterhin schönen abend...

[Robin]

Ich habe - und werde - mir das neue Script aber nicht näher angesehen. Das ist die reinste Suppe.

Da hast du allerdings recht.

Trotzdem vielen Dank! :)

Habs bereits gelöst:

hab einfach position:absolute genommen und es halt mir margin-left eingerückt :)

Vielen Dank nochmal!