Elemente abhängig von Fenstergröße plazieren

Spaghetti · 26. Oktober 2015

Hallo zusammen!

Ich bin gerade dabei, erstmals eine Website zu gestalten und habe leider nur wirklich grundlegende Kenntnisse vom Programmieren, sodass ich gerade
an einem Punkt feststecke, an dem ich nicht weiterkomme. Außerdem ist dies hier mein erster Post, also bitte seid nachsichtig mit mir!

Nun zu meinem Problem: Bei der besagten Website soll es ein Hintergrundbild geben, das mit der Fenstergröße des Browsers skaliert (funktioniert schon). Auf diesem Hintergrundbild sollen nun auf fest definierten Punkten einige Links in Form von Textbildern platziert werden. Dabei sollen diese Links immer an der „richtigen“ Stelle auf dem Bild sein, andererseits ebenfalls mit der Fenstergröße skalieren (letzteres funktioniert). CSS-Anweisungen mit Prozentangaben funktionieren leider nicht, da abhängig von der Fenstergröße die Y-Achse des Hintergrundbildes „verschwindet“, um die Proportionen zu bewahren. Trotzdem würde man mit Prozentangaben aber die Textbilder noch sehen, die am bottom des Bildes ausgerichtet werden sollen und eigentlich auch „verschwinden“ müssten.

Meine Idee war nun, mittels JavaScript die Fenstergröße des Browsers auszulesen und abhängig von dem Wert, den

Code

$(window).width()

zurückgibt, die Position der Textbilder in Pixeln zu berechnen. Dies würde ich mit einer Funktion realisieren, wobei ich die absoluten Positionswerte in Pixeln übergeben würde, wenn das Bild nicht skaliert wäre. Dann stellt sich allerdings das Problem, wie ich die Funktion innerhalb des HTML-Bereichs im Sinne von

Code

<img …  left: function (x); top: function (y) … />

aufrufen würde? Kann mir da jemand weiterhelfen? Vielleicht gibt es eine andere Lösung? Ich danke Euch!

Sempervivum · 27. Oktober 2015

Das macht man i. allg. so (ich gehe mal davon aus, dass Du weißt, wie Du die Positionen berechnen kannst):

JavaScript

$(document).ready(function() {
	var wiwi = $(window).width();
	// hier die Positionen der Elemente berechnen
	var ele1left =
	var ele1top =
	("#ele1id").css({left: ele1left + "px", top: el1top + "px"});
	("#ele2id").css({left: ele2left + "px", top: el2top + "px"});
	// usw.
});

und den Elementen die entspr. ID geben:

HTML

<img id="ele1id" src=" ... ">
<img id="ele2id" src=" ... ">

Spaghetti · 28. Oktober 2015

Vielen, vielen Dank! Ich werde es ausprobieren und berichten.
Das oben genannte Beispiel hat leider nicht funktioniert.. Woran könnte das liegen?

Ich habe mein Anliegen aber dennoch folgendermaßen umsetzen können:

JavaScript

$(document).ready(function() {




   var wiwi = $(window).width();
   var faktor = wiwi / 1889;	




   var ele1left = faktor * 1600;
   var ele1top = faktor * 150;
   var ele1width = faktor * 120;




   document.getElementById("ele1").style.position = "fixed";
   document.getElementById("ele1").style.left = ele1left + "px";
   document.getElementById("ele1").style.top = ele1top + "px";
   document.getElementById("ele1").style.width = ele1width + "px";
});

Alles anzeigen

Leider musste ich allerings das Scaling für iPhone/iPad unterbinden, da die Elemente dann doch an die falsche Stelle "wandern".

Sempervivum · 30. Oktober 2015

OMG, ich hatte das $ vergessen, so wäre es richtig:

JavaScript

$("#ele1id").css({left: ele1left + "px", top: el1top + "px"});

So wie Du es gemacht hast, ist es aber genau so gut. Nur dass man bei jQuery mehrere Attribute mit einem Aufruf ändern kann.

Elemente abhängig von Fenstergröße plazieren

Jetzt mitmachen!

Teilen