Centring Content Intelligently Using jQuery
When I originally conceived the design for my hub, I wanted the content to be positioned in the centre of the screen. I thought this gave a far sleeker look than anchoring it to the top.
Now whilst I rate my CSS skills quite highly, positioning elements in this way is not really my forte. So I turned to the Internet for a solution.
Now I found numerous CSS based solutions. The problem was, they either didn't work when the windows was resized, required you to know the height of the content, cut off the content when the window was smaller than the content, or simply didn't work in earlier versions of IE (yes I do want to support IE6). And many of them also resort to numerous CSS hacks, and/or over the top markup to achieve their result.
Now I wasn't going to resort to using a <table> for the solution, so I turned to my new best friend - jQuery. There are, again, plenty of jQuery plugins which try to achieve just this. But like their CSS counterparts, they cut off the content when the window is resized to smaller than the content (due to negative positions in their calculations), like one developed by the brilliant Rick Strahl:
Not particularly useful, as the content to the left and top becomes inaccessible. So I decided to write my own. It's actually extremely simple, and works really well. The content gets centred perfectly in all major browsers (including IE6):
And it even centres when the window is resized, unless the window is made smaller than the content. In this case, the content reverts back to it's automatic positioning, keeping the content anchored to the top left, and allowing the scroll bars to be used to view all the content if needed:
And if JavaScript has been disabled in the browser for whatever reason, it just remains anchored in the top left. To use the plugin, just call the centreInWindow function in the document ready event:
// On DOM Ready $(document).ready(function() { // Centre in window $('#myelement').centreInWindow(); });
For those who are curious how to works, i'll briefly explain the concept below. I won't go into the fundamentals of how jQuery plugins work, as there are plenty of tutorials online. The core of the logic is in a centre function:
// Internal function that centres the content in the window function centre() { // Get x and y co-ordinates var xPosition = ($(window).width() - content.outerWidth(true)) / 2; var yPosition = ($(window).height() - content.outerHeight(true)) / 2; // Check the element doesn't off the screen (we do this so if the window // is smaller than the content, the content stays flush with the left of // the window, rather than going beyond it). if (xPosition >= $('body').offset().left) { // Set the left position content.css({ 'left': xPosition + 'px' }); } else { // Go back to normal content.css({ 'left': 'auto' }); } // Same check for the y co-ordinates if (yPosition >= $('body').offset().top) { // Set the left position content.css({ 'top': yPosition + 'px' }); } else { // Go back to normal content.css({ 'top': 'auto' }); } }
First we work out where to position the element by dividing the width and height by 2, and subtracting it from the window's width and height. Then - and this is the important bit - we check the values we have are not less than the position of the body. If they aren't, we set them using CSS. If they are, we set the positions to be 'auto' - meaning the browser will simply anchor it to the top left. This is what ensures the content never gets cut off.
And finally, to execute the function inside the plugin, we make the element absolutely positioned first. Then we call the function immediately, and also in the window resize event:
// Position content absolutely content.css({'position': 'absolute'}); // Wire up to the window resize event $(window).resize(function() { // Call the function centre(); }); // And call it so it runs immediately centre();
Update: I have now added this plugin to the jQuery plugins site, where you can download the source, try out a demo, and report any issues.