mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:47 Benutzername: Passwort: Auto-Login

Thema: DIV Layer vertical über Javascript positionieren... vom 04.06.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> DIV Layer vertical über Javascript positionieren...
Autor Nachricht
GELight
Threadersteller

Dabei seit: 22.05.2006
Ort: Germany
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 10:36
Titel

DIV Layer vertical über Javascript positionieren...

Antworten mit Zitat Zum Seitenanfang

Hallo alle zusammen...

Ich versuche seit geraumer Zeit einen DIV Container über ein Javascript im Fenster "vertical" auszurichten.
Es wäre kein Problem, wenn ich einfach den parameter TOP auf einen festen Wert setzen könnte.
Mein Problem besteht darin, dass der User auch scrollen kann und sich dann bei Klick auf zB. ein ArtikelThumbnail
der DIV Container mit einem großen Artikelbild öffnet. Dieser muss wie schon gesagt vertikal zentriert werden... egal, wo man sich gerade mit dem scrollen befindet.

Ich habe in meiner JS-Function die Bildbreite, Bildhoehe und die Position für die horizontale Positionierung schon herausbekommen. Mir fehlt nur noch das mit der verticalen Position.

Könnt Ihr mir einen Tip oder Hilfe geben?
Wäre euch sehr dankbar...

Mario
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

Evtl kannst du dir bei der Lightbox JS ne kleinigkeit abschauen ..
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 13:27
Titel

Antworten mit Zitat Zum Seitenanfang

Schon mal mit page_y_offset versucht?
  View user's profile Private Nachricht senden
GELight
Threadersteller

Dabei seit: 22.05.2006
Ort: Germany
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 14:24
Titel

Vertical Zentrieren

Antworten mit Zitat Zum Seitenanfang

@dastef: danke für den Link.
Ziemlich heftig, wieviel da im Spiel ist finde ich... hehe
Aber vielleicht kann ich das ja für die Zukunft etwas gebrauchen.

@Raumwurm: Ich hab es mit window.pageYOffset hinbekommen.
Hatte es kurz vor euren Postings in auf einer Beispielseite hier im Forum gefunden.

Danke nochmal an euch...

Mario...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
GELight
Threadersteller

Dabei seit: 22.05.2006
Ort: Germany
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 15:14
Titel

preloaden des bildes

Antworten mit Zitat Zum Seitenanfang

Ich bins nochmal...WOllte nicht extra einen neuen Tread eröffnen, da das zusammenhängt.

Also meine Positionierung klappt nun wunderbar.
Ich zeig euch gleich auch nochmal meine Function dafür.
Nun habe ich das Problem, dass er den DIV erst korrekt darstellt, wenn das Bild schoneinmal
komplett geladen wurde und er somit sofort weiß ( durch cache ), wie groß dieses ist usw...

Hier ist meine bisherige Funktion für das Positionieren des DIV mit dem Bild drin.
( Für das verstecken hab ich eine weitere, die aber hier unwichtig ist )
Code:

   function div_zeigen( url )
   {
      bild = new Image();
      bild.src = url;

      bild_breite = bild.width;
      bild_hoehe = bild.height;

      var posx = ( screen.width )   /2 - bild_breite / 2;
      var posy = window.pageYOffset + 50;
      
      // HAUPT-DIV
      document.getElementById("bildbox").style.left = posx;
      document.getElementById("bildbox").style.top = posy;
      document.getElementById("bildbox").style.width = bild_breite;
      document.getElementById("bildbox").style.height = bild_hoehe;
      document.getElementById("bildbox").style.visibility = "visible";

      // TITELLEISTE-DIV ( liegt im HauptDiv )
      document.getElementById("bildbox_titel").style.width = bild_breite;
      document.getElementById("bildbox_titel").style.visibility = "visible";

      // BILD-TAG ( liegt im HauptDiv )
      document.getElementById("bildbox_bild").src = bild.src;
      document.getElementById("bildbox_bild").style.visibility = "visible";
   }


Als Erläuterung dazu:
Ich rufe aus Flash heraus bislang diese Funktion auf und übergebe an diese den Pfad zum Originalbild.
Soweit klappt das wunderbar aber auch nur, wenn das Bild schonmal komplett geladen war.
Er zeigt beim erstenmal laden des Bildes das Bild zwar an aber konnte daher die Bildgröße und somit
DIV-Größe noch nicht gleich mit angeben. Somit ist zwar das Bild zu sehen aber mein DIV mit Border und der Titelleiste noch nicht richtig.

Nun dachte ich mir: Lässt einfach den DIV erst anzeigen, wenn das Bild geladen ist.
Meine Idee dazu war nun eine Funktion vorauszuschalten, die das Bild lädt und erst die Box mit Bild anzeigt, wenn das Bild auch geladen wurde. Vorbereitet sieht es derzeit so aus...
Code:

   function div_zeigen( url )
   {
      bild = new Image();
      bild.src = url;
      
      if ( ...Bild geladen? )
      {
         div_show();
      }
   }
   
   function div_show()
   {   
      bild_breite = bild.width;
      bild_hoehe = bild.height;

      var posx = ( screen.width )   /2 - bild_breite / 2;
      var posy = window.pageYOffset + 50;
      
      // HAUPT-DIV
      document.getElementById("bildbox").style.left = posx;
      document.getElementById("bildbox").style.top = posy;
      document.getElementById("bildbox").style.width = bild_breite;
      document.getElementById("bildbox").style.height = bild_hoehe;
      document.getElementById("bildbox").style.visibility = "visible";

      // TITELLEISTE-DIV ( liegt im HauptDiv )
      document.getElementById("bildbox_titel").style.width = bild_breite;
      document.getElementById("bildbox_titel").style.visibility = "visible";

      // BILD-TAG ( liegt im HauptDiv )
      document.getElementById("bildbox_bild").src = bild.src;
      document.getElementById("bildbox_bild").style.visibility = "visible";
   }


Ist mein Gedanke so richtig, oder muss man in JS wieder etwas anderes zusätzlich machen um abzufragen, ob mein
Bild schon geladen ist? Ich habe schon die Funktion onload gefunden aber hab keine Ahnung, wie man sie einsetzt. In meinen Büchern steht immer nur.... ... mit onload hat man kontrolle über den Zustand des Ladevorgangs... usw usw.

Wie muss ich das in meinem Fall einsetzen? Oder habe ich einen grundsätzlichen Denkfehler?

Mario
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 17:33
Titel

Antworten mit Zitat Zum Seitenanfang

Hmm, am einfachsten wäre es wohl, wenn Du
die Bildhöhe per Php mit in den Funktionsaufruf
reinschreiben würdest.

//edit: mit getimagesize oder imagesy


Zuletzt bearbeitet von Raumwurm am So 04.06.2006 17:38, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
GELight
Threadersteller

Dabei seit: 22.05.2006
Ort: Germany
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 18:11
Titel

PHP in JS

Antworten mit Zitat Zum Seitenanfang

Und wie sollte ich das hier einfügen?
Ich bekomme doch meine URL in die JS Funktion übergeben und nicht ins PHP.

Kann ich denn hier statt dem JS einfach PHP einfügen und wenn ja, wie bekomme ich die
URL aus meiner JS Funktion in meine PHP Funktion? Sowas geht doch garnicht, da PHP Serverseitig und JS Clientseitig ausgeführt wird.... oder liege ich gerade irgendwie falsch?

Hier gebe ich meinem DIV die Breite...
Code:

   document.getElementById("bildbox").style.width = bild_breite;


Mario
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 04.06.2006 19:42
Titel

Antworten mit Zitat Zum Seitenanfang

Oh überlesen, die Bildurl kommt ja aus dem swf.
* Wo bin ich? *

Das wird schwierig. Nur so eine Idee: sämtliche
Bildurls und deren Höhen vorneweg per Php in ein
Javascript-Array schreiben und vom Swf aus dann
die Bilder aus dem Array heraus aufrufen, dazu
brauchst Du aber erst mal sämtliche Urls aus dem
Swf. Oder vielleicht per Actionscript im Swf die
Bildhöhe abfragen und dem Aufruf mitgeben - habe
aber keine Ahnung ob das mit einem noch nicht
geladenen Bild funktioniert. -> www.flashforum.de
  View user's profile Private Nachricht senden
 
Ähnliche Themen Layer an Cursor positionieren
Layer an Mausposition positionieren
[JavaScript] Layer verbergen
[javascript] bei klick div-layer zeigen
Css Layer per JavaScript/PHP nach 15 Sekunden einblenden
innerer layer soll äußeren layer automatisch größer machen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.