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?
Thanks in advance. Brad
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?
Thanks in advance. Brad
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.
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.
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 });