In order to better balance out a page I am working on I would like to find a way to increase the top margin of a DIV depending on the screen resolution. What is my best way to set these dimensions with jQuery or Javascript?
This question is related to
javascript
jquery
screen
resolution
margins
To get screen resolution in JS use screen object
screen.height;
screen.width;
Based on that values you can calculate your margin to whatever suits you.
var space = $(window).height();
var diff = space - HEIGHT;
var margin = (diff > 0) ? (space - HEIGHT)/2 : 0;
$('#container').css({'margin-top': margin});
Another example for vertically and horizontally centered div or any object(s):
var obj = $("#divID");
var halfsc = $(window).height()/2;
var halfh = $(obj).height() / 2;
var halfscrn = screen.width/2;
var halfobj =$(obj).width() / 2;
var goRight = halfscrn - halfobj ;
var goBottom = halfsc - halfh;
$(obj).css({marginLeft: goRight }).css({marginTop: goBottom });
Check out the jQuery dimensions plugin
Here is an example on how to center an object vertically with jQuery:
var div= $('#div_SomeDivYouWantToAdjust');
div.css("top", ($(window).height() - div.height())/2 + 'px');
But you could easily change that to whatever your needs are.
Source: Stackoverflow.com