Centering

This is Part 2 in my Series on the Living Web.

There are many ways of centering things in a webpage. We'll start with the basics: say we've got a div for some reason:

<div id="blob"></div>

The blob is shown as the cirlce in this diagram:

Now, we must place it somewhere. There are two easy ways to do this:

1. We could float it, and use margins to control it's placement. The css could be:

div#blob {
    float: left;
    width: 151px;
    height: 151px;
    margin-left: 200px;
    margin-top: 200px;
}

2. We could use absolute or relative positioning.

div#blob {
    position: absolute;
    width: 151px;
    height: 151px;
    top: 200px;
    left: 200px;
}

Here is what that would look like positioned absolutely or floated with margins:

Here is an example page showing this in real life.

Please note that if the window is resized, the offsets stay the same; in other words, when you make your browser window really big, the blobs will stay put:

Centering the Blob

div#blob {
    /* we do not float it this time */
    width: 151px;
    height: 151px;
    
    /* the 0 is for top and bottom
      * while the auto gets assigned to either side */
    margin: 0 auto;
}

The margin: 0 auto; method only centers within the parent element. One great use for it would be to center a container div in the browser window. Interestingly, another way to do practically the same thing is:

div#blob {
    position: relative;
    left: 50%;
    top: 15px;
    margin-left: -75px;
}

The other way is using absolute positioning. If you need to keep something, like an overlay in the middle of the window, then take the code above, and change relative to absolute:

div#blob {
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -75px;
}

We are telling the blob to align itself to the top left corner of the window; then we make it offset to the left by 50%, halfway across. But then we must do a margin-left of negative half of the width of the blob. In this case our blob is 151px so half is about 75px. Using this method, the blob will always stay in the middle, on top of other elements. Like this:

Remember to account for any padding and borders in the negative margin-left. Now we have a div which is always centered horizontally relative to the browser window.

Here is a real life example.

THE CRUX!

Sometimes you want your overlay to stay relative to the content. An example. Image you have a div with a scrollbar; but instead of a scrollbar, you have a javascript scroller, which controls the scrolling via animations, like the black triangles in this screenshot:

(for the programatical side of these scrollers read my article)

When Javascript places the scroll buttons on the page, it could just position them absolutely where they need to go. This would be fine; however, if the div they need to scroll for is centered to the window, we'll need to figure something else out. If a user stretches the window, this is what happens:

In the above diagram, the scrollers are represented by the little blue rectangle inside of the larger blue rectangle. The faded scroller is the ghost image of where the scroller should end up after a window resize.

So, we must extend the centering method mentioned above which used the absolute positioning and the negative margin. We need to have some logic which will figure out the right margin-left so that our scroller div will always stay relative to the middle of the window or document. Here is a diagram:

Here is the Javascript code I came up with. It's a method called safeCenter; if anyone else has already thought of this, and furthermore named this method something else, too bad.

dw.safeCenter = function(item, region) {
    var halfWidth = Dom.getViewportWidth() / 2;
    var sWidth = cos.stripPx(Dom.getStyle(item, 'width'));
    var sHeight = cos.stripPx(Dom.getStyle(item, 'height'));
    var right = region['right'];

    /* item on right half of window                                                 : or item on left half */
    var marginLeft = ((right-sWidth) > halfWidth) ? ((right-sWidth) - halfWidth) : (0 - (halfWidth - (right-sWidth)));

 var marginalAdjustments = {
     'vert'    : dw.stripPx(Dom.getStyle(item, 'marginBottom')),
     'horz'    : dw.stripPx(Dom.getStyle(item, 'marginRight'))
 };

 dw.setStyles(item, {
     'top'         : (region['bottom'] - sHeight  - marginalAdjustments['vert']) + 'px',
     'marginLeft'  : (Math.floor(marginLeft) - marginalAdjustments['horz']) + 'px'
 });
};

It has some dependancies (some are obvious):

var dw = {};
var Dom = YAHOO.util.Dom;

dw.stripPx = function(str) {
    return parseInt(str.substring(0, str.indexOf('p')));
};


dw.setStyles = function(el, style) {
    for(var i in style) {
        Dom.setStyle(el, i, style[i]);
    }
};

You may not be able to tell by looking, but dw.safeCenter has some odd qualities.

• It takes an element as a parameter (item)
• It also takes the region of another element, the 2nd param (region)
• It checks whether item has margin on bottom or right
• It will place the item in the lower right hand corner of the region it's given
• Item will be offset from region by marginalAdjustments

Oddly, my favorite line is

    /* item on right half of window                                                 : or item on left half */
    var marginLeft = ((right-sWidth) > halfWidth) ? ((right-sWidth) - halfWidth) : (0 - (halfWidth - (right-sWidth)));

Number one, this is a ternary operator. But also, it's a pretty cool math operation which determines whether to make the margin-left negative or positive. sWidth is the width of the item which the function was given. The reason the second argument is a region is just in case you need to modify the region first (otherwise I would have made the function get the region for you). The type of region I am talking about is YAHOO.util.Dom.getRegion(), which returns a region object.

Here is a live example of safeCentering.

Make sure to look at the examples. As always, let me know if you have any questions about this stuff (or if you find an error).
Enjoy.

CSSStyleRule DOM Object Helpers

"Totally PWN CSS with Javascript"

I found this article after realizing that EXT-JS's CSS class really was not what I wanted. There was some problem in the IE's (of course I forget now what it was). I found this guy Patrick Hunlock who writes some awesome code (I would suggest reading the article I linked to, and not stopping there). I like really clean-looking code, sorry Pat; so I cleaned it a bit and minimized it for you all.

Here is the file.
Here is the class api:

var CSS = {
  [CSSStylerule] addCSSRule  : function([selector]),
  [CSSStylerule] getCSSRule  : function([selector]),
  [boolean]      killCSSRule : function([selector])
};

So, when you say:

   var pBold = CSS.addCSSRule('p.bold');

pBold will literally be a CSSStyleRule (as the DOM calls it). Furthermore to modify it:

   pBold.style.fontWeight = 'bold';
   pBold.style.fontSize = '115%';

Hunlock has even more examples on his original post; I also will urge you to Go Forth In Style!