[erledigt] div per JS positionieren...erfolglos
Eingetragen von mchott (63)am 09.01.2013 - 11:14 Uhr in
Hallo,
nach meiner Recherche hier im Forum habe ich verschiedene Dinge ausprobiert, um ein div positionieren zu können. Das soll per JS passieren, weil ich die aktuelle Fenstergröße nutzen möchte. Ohne Drupal funktioniert das ganze schon recht gut. Binde ich die Seite dann per file_get_contents auf meiner Drupal-Seite ein, wird das div nicht mehr positioniert.
1. Ansatz ohne Erfolg
<?php echo "<div id=\"CenterPic\" style=\"position:fixed; z-index:105; left: 50%; top: 50%;background-image: url(".$src."); background-repeat: no-repeat; background-position: center center; box-shadow:0px 0px 10px 2px #000000; background-size: 100% 100%; width: 100px; height: 100px;\"></div>"; ?>
document.all.CenterPic.style.width = SW;
document.all.CenterPic.style.height = SH; ... top leftSW und SH werden korrekt ausgerechnet. Die habe ich mir mal mit alert ausgeben lassen.
2. Ansatz ohne Erfolg
<?php echo "<div id=\"CenterPic\" style=\"position:fixed; z-index:105; left: 50%; top: 50%;background-image: url(".$src."); background-repeat: no-repeat; background-position: center center; box-shadow:0px 0px 10px 2px #000000; background-size: 100% 100%; width: 100px; height: 100px;\"></div>"; ?>
var element = document.getElementById("CenterPic");
element.style.width = SW;
element.style.height = SH; ... top left3. Ansatz ohne Erfolg
document.write("<div id=\"CenterPic\" style=\"position:fixed; z-index:105; left: ".Left."; top: ".Top.";background-image: url(".<?php echo $src; ?>."); background-repeat: no-repeat; background-position: center center; box-shadow:0px 0px 10px 2px #000000; background-size: 100% 100%; width: ".SW."px; height: ".SH."px;\"></div>");4. Ansatz ohne Erfolg
drupal_add_js('jQuery(document).ready(function () { document.all.CenterPic.style.width = SW; });', 'inline');
Alle übrigen Javascriptbefehle werden korrekt ausgeführt. Ansatz 2 und 3 stammen hier aus dem Forum, aber ohne Erfolg. Auch Ansatz 4 macht nichts anderes als die bisherigen...alles funktioniert, nur das Setzen/Lesen von Werten geht nicht.
Ich bin für jeden Hinweis dankbar.
- Anmelden oder Registrieren um Kommentare zu schreiben
Das müsste doch auch so gehen
am 09.01.2013 - 11:41 Uhr
Das müsste doch auch so gehen ohne JavaScript. Hast du mal einfaches CSS probiert?
Hallo
am 09.01.2013 - 12:14 Uhr
Ich bin ein großer CSS Freund und in JS habe ich kaum etwas gemacht.
CSS hat an dieser Stelle einen kleinen Haken. Ich möchte Bilder auf den Bildschirm maximal anzeigen, ABER ohne Crop mit Seitenverhältnis. In CSS habe ich relative Größen %, mit denen das nicht machbar ist, weil die Bildschirme immer unterschiedlich sind und fixe Werte in px...was mich auch nicht ans Ziel gebracht hat.
Mit JS lese ich das Fenster aus und errechne meine idealen Bildparameter. Glücklich bin ich damit nicht und sonst arbeite ich auch nur mit reinen CSS "Popups", aber hier fehlt mir der richtige Gedanke. Mit JS geht es ganz gut...nur eben nicht wenn man die Inhalte in Drupal einbettet.
Zitat: nur eben nicht wenn
am 09.01.2013 - 12:19 Uhr
nur eben nicht wenn man die Inhalte in Drupal einbettet.
Wie bettest du denn das JS ein? Bitte beachten, dass JS in Drupal nach bestimmten Mustern eingebunden werden muss, damit es richtig funktioniert. Siehe dazu: Adding JavaScript to your theme or module (auch die Kommentare beachten!)
Das JS wird ausgeführt...und
am 09.01.2013 - 12:30 Uhr
Das JS wird ausgeführt...und wie folgt sieht das noch verkorkste Konstrukt aus:
zeige_fullscreen.php (hier steht der JS-Code drin)
In einer Drupalseite (PHP) rufe ich per
file_get_contents("zeige_fullscreen.php?para=1¶=2")die Inhalte auf.Lösung
am 10.01.2013 - 16:28 Uhr
Die Lösung war recht ärgerlich.
Falsch:
element.style.width = SW;Richtig:
element.style.width = SW + "px";Warum der Code in Drupal das "px" braucht und sonst nicht, ist mir unklar, aber es war die Lösung!