Javascript Vertical Middle



  • Hi, warum geht

    function calcPadding() {
    		var marginTop = ($(window).height() - $("body").innerHeight()) / 2;
    		if(marginTop <= 0) { marginTop = 0; }
    		$("body").css("marginTop", marginTop + "px");
    	}
    
    	window.onload = calcPadding();
    
    	$(document).ready(function() { 
    		calcPadding();
    	});
    
    	$(window).bind('resize', function() {
    		calcPadding(); 
    	});
    

    bei Firefox, Opera wunderbar nur nicht bei Chrome? 😢

    also wie ihr seht probier ich schon nen bisschen mehr aus.. weiß einer warum?? 😢



  • also wie gesagt es funktioniert auf den beiden anderen... es liegt also direkt nicht an der logik vom skript. vielleicht chrome sonderheiten?


  • Mod

    Was ist denn der Fehler?
    wird marginTop korrekt berechnet und das .css() tut nicht was es soll oder liefert dir zB innerHeight einen falschen Wert?

    window.onload = calcPadding();

    ist natürlich falsch und müsste
    window.onload = calcPadding;

    heissen, aber sowas verwendet man nicht und es sollte also ganz weg.



  • Also ich subtrahier ja die fenstergröße mit der größe des seiteninhalts und dividier durch 2... das ergebnis möchte ich als marginTop anfügen um so den inhalt in die mitte zurücken.

    bei chrome steht dann halt margin-top: 0px; da

    aber warum funktioniert es dann bei firefox, IE10 und Opera?



  • also entweder is window.height oder innerheigt falsch. kann man das iwie umgehen?


  • Mod

    ich123123 schrieb:

    also entweder is window.height oder innerheigt falsch. kann man das iwie umgehen?

    Und was von beiden?
    Oder abwechselnd?

    Hat es mit dom Ready event zu tun - dass da noch nicht alles geladen ist, etc.

    Ein paar Infos mehr wären echt toll.



  • also die seite besteht aus einem canvas und 2 zeilen text. es wird also fast nix geladen. und chrome is der einzige bei dem window.height und die innerheight vom body gleich groß ist.

    so 899px. aber das is doch eig garnicht möglich. wenn ich auf das html element im chrome debugger geh, steht da 1200px höhe da. also muss iwie die window.height falsch berechnet werden.


  • Mod

    Ein Schuss ins blaue:

    Hast du <!DOCTYPE html> als Doctype gesetzt?
    Chrome mag es nicht wenn man non HTML5 Doctypes setzt. Dann passiert manchmal was komisches.

    Ansonsten setz mal ein jsfiddle oder so dafür auf.



  • heilige scheiße... woher wusstest du das?? 😃

    doctype gesetzt -> funkt -> HABBBIEE!!! 😃


Anmelden zum Antworten