function - Jquery centering div on page and chopping off the top -
i using following jquery script center container div in middle of window. problem comes when user has resolution smaller container, when site loads top of div chopped off. how can set function trigger if browser size or resolution bigger container div ?.
<script> $(window).load(function(){ var positioncontent = function () { var width = $(window).width(); // window width var height = $(window).height(); // window height var containerwidth = $('.container').outerwidth(); // container div width var containerheight = $('.container').outerheight(); // container div height $('.container').css({position:'absolute', left: ($(window).width() - $('.container').outerwidth())/2, top: ($(window).height() - $('.container').outerheight())/2 }); }; //call when window first loads $(document).ready(positioncontent); //call whenever window resizes. $(window).bind('resize', positioncontent); }); </script>
just compare window dimensions container dimensions, , if container taller/wider window, set top/left position 0:
$('.container').css({ position: 'absolute', left: width > containerwidth ? (width - containerwidth) / 2 : 0, top: height > containerheight ? (height - containerheight) / 2 : 0 });
btw, had defined width
, height
, containerwidth
, , containerheight
, i'm not sure why didn't reuse them in code.
Comments
Post a Comment