• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Resize-Script wird nicht beim Laden der Seite ausgeführt

J

Jan-Eric96

New member
Hey liebe Community,

ich bin noch relativ neu unterwegs in den Weiten von Javascript. Deswegen bitte kleinere Denkfehler etc. gleich korrigieren, wenn euch was auffällt.

Mein Problem:
Ich habe ein DIV mit einer Höhe von 400px. Ich möchte darin ein Background-Image vertikal zentrieren was FIXED ist. (Wenn man so eines zentriert, wird es ja normalerweise mittig vom Browser-Fenster platziert. Ich möchte es aber mittig vom DIV haben...). Darum habe ich Javascript benutzt. Das Bild hat außerdem immer eine Breite von genau 100%. Wenn man den Browser also verkleinert, verkleinert sich auch das Hintergrundbild um muss mit dem Script neu zentriert werden. Klappt auch soweit... (Außer bei Firefox, den Fehler habe ich noch nicht gefunden.) Ich würde jetzt aber gerne, dass das Bild schon beim Laden der Seite zentriert wird. Dann wird der Script aber komischerweise nicht ausgeführt...

Hier der Script:
Code: 
$(document).load(updatewidth);
$(window).resize(updatewidth);

function updatewidth() {
	var w = $( window ).width();  
	var img = new Image;
	img.src = $('.div').css('background-image').replace(/url\(|\)$/ig, "");
	var bgImgWidth = img.width;
	var bgImgHeight = img.height;
	var koef = bgImgHeight/bgImgWidth;
	var minimumWidth = 400/koef;
	var h = w * koef;
	h = -h/2 + 200;
	var scrolledY = h;    //bis hier hin werden nur bisherige Breiten ermittelt und wie das Seitenverhältnis des Bildes ist etc. um es entsprechend zu skalieren.
	
	if (w <= minimumWidth) {       //damit keine weißen Ränder sichtbar werden, soll das Bild ab einer minimalen Breite aufhören mit dem Browser zu schrumpfen und feste Werte bekommen
		$('.abstand').css('background-size', minimumWidth + 'px auto');
		$('.abstand').css('background-position', 'center ' + 0 + 'px');
	}
	
	if (w > minimumWidth) {     //Das ist der eigentliche Script, der das Background-Image zentriert.
		$('.abstand').css('background-size', '100% auto');
		$('.abstand').css('background-position', 'left ' + ((scrolledY)) + 'px');
		$('.abstand').css('height', '400px');
	}
}
 
Die Syntax ist auch folgende:
Code: 
$(      ).load(function() {
  //run script
});

D.h., du musst eine Funktion() korrekt aufrufen, also
Code: 
$(document).load(updatewidth());


PS: warum machst du nicht einfach einen onload im <body>?
PPS: manche Sachen kann man auch mit "normalem" PureJS machen. Nicht alles muss jQuery sein ;)
 
Hey!

Schonmal mega großen Dank. Vieles hat jetzt nach diesen Tipps schon gleich funktioniert, anderes wiederum nicht. ;D Wenn ich zum Beispiel die beiden Klammen () bei der Funktion bei dem $(window).resize(updatewidth) hinzufüge, funktioniert das ganze nicht mehr. Der Tip mit dem "onload" beim Body funktioniert super! Danke! ;) Das Problem nun: Lokal funktioniert es, Auf dem Server muss ich die Seite erst einmal neu laden, damit die Funktion aufgerufen wird. Vielleicht hängt das damit zusammen, dass Background-Images nicht in die Ladezeit einer Seite mit einberechnet werden? Stimmt das? Eine Problemlösung wäre auf jeden Fall echt cool! ;)
 
Das Image hat selbst ein onload-Event. Pack' doch die Größenzuweisung mal da rein:
Code: 
$(document).load(updatewidth);
$(window).resize(updatewidth);

function updatewidth() {
	var w = $( window ).width();  
	var img = new Image;
	img.onload = function(){
		var bgImgWidth = img.width;
		var bgImgHeight = img.height;
		var koef = bgImgHeight/bgImgWidth;
		var minimumWidth = 400/koef;
		var h = w * koef;
		h = -h/2 + 200;
		var scrolledY = h;    //bis hier hin werden nur bisherige Breiten ermittelt und wie das Seitenverhältnis des Bildes ist etc. um es entsprechend zu skalieren.
		
		if (w <= minimumWidth) {       //damit keine weißen Ränder sichtbar werden, soll das Bild ab einer minimalen Breite aufhören mit dem Browser zu schrumpfen und feste Werte bekommen
			$('.abstand').css('background-size', minimumWidth + 'px auto');
			$('.abstand').css('background-position', 'center ' + 0 + 'px');
		}
		
		if (w > minimumWidth) {     //Das ist der eigentliche Script, der das Background-Image zentriert.
			$('.abstand').css('background-size', '100% auto');
			$('.abstand').css('background-position', 'left ' + ((scrolledY)) + 'px');
			$('.abstand').css('height', '400px');
		}
	}
	
	img.src = $('.div').css('background-image').replace(/url\(|\)$/ig, "");
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben