I calculate the padding of an element and add it on resize. Now, I would like to add it also on page load. How can I do that?
$(window).resize(function () {
var widthWindow = $(window).width();
var widthContainer = $("#container").width();
var calculatePadding = (widthWindow - widthContainer) / 2;
$("#container").css({
"padding-top":calculatePadding,
"padding-bottom":calculatePadding
});
}).resize();
On
Just bind your handler to the load event:
var handler = function () {
var widthWindow = $(window).width();
var widthContainer = $("#container").width();
var calculatePadding = (widthWindow - widthContainer) / 2;
$("#container").css({
"padding-top":calculatePadding,
"padding-bottom":calculatePadding
});
};
$(window).resize(handler)
$(window).load(handler)
Or a bit more elegant in my opinion:
$(window).on('load, resize', handler)
You could do it this way:
In Javascript:
(OR) the jQuery way