Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Issue with code that centers html elements

    My code that centers html elements fails when the html element is large. For example, I have a list of 443 items, which I break into 3 columns within a div. Therefore there are 148 lines in the div. When I use the code below to center the div, the top part of the div is beyond the top of the window screen. Anyone know what part of my code causes/allows for the problem?

    Code:
    function centerPopup(){
    	// Get data for centering
    	var windowWidth = document.documentElement.clientWidth;
    	var windowHeight = document.documentElement.clientHeight;
    	var popupHeight = $(".popupArea").height();
    	var popupWidth = $(".popupArea").width();
    	//centering
    	$(".popupArea").css({ "position": "absolute", "top": Math.floor(windowHeight/2)-Math.floor(popupHeight/2), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
    	//only need force for IE6
    	$(".popupBackground").css({ "height": windowHeight });
    
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    function centerPopup(){
    	// Get data for centering
    	var windowWidth = document.documentElement.clientWidth;
    	var windowHeight = document.documentElement.clientHeight;
    	var popupHeight = $(".popupArea").height();
    	var popupWidth = $(".popupArea").width();
    	//centering
    	$(".popupArea").css({ "position": "absolute", "top": Math.max(zxcWWHS()[3],Math.floor(windowHeight/2)-Math.floor(popupHeight/2)), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
    	//only need force for IE6
    	$(".popupBackground").css({ "height": windowHeight });
    
    }
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for solution; it was easy to follow and made complete sense.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •