Garrett Murphey » Javascript http://gmurphey.com New Media Interactive Developer Fri, 23 Apr 2010 02:02:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 Vertical Alignment with Cascading Style Sheets http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/ http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/#comments Thu, 28 Sep 2006 03:59:11 +0000 Garrett Murphey http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/ td tag that I sorely miss -- valign. I used to find it very annoying that valign would always default to middle and that, for the most part, I'd have to go through every table cell and set valign="top". Now that I've moved to a complete CSS workflow, there's no valign and, to be honest, I kind of missing the little guy. So, I decided to bring the power of valign to the twenty-first century.]]> It’s not often that you’ll hear me say I miss something about designing with tables. Cascading style sheets have made my markup cleaner, slimmer, and much easier to maintain. And, for the most part, designing with CSS has been a blast. I can’t believe I actually resisted moving to CSS for a while. But, there’s one attribute from the good old td tag that I sorely miss — valign. I used to find it very annoying that valign would always default to middle and that, for the most part, I’d have to go through every table cell and set valign="top". Now that I’ve moved to a complete CSS workflow, there’s no valign and, to be honest, I kind of missing the little guy. So, I decided to bring the power of valign to the twenty-first century.

It’s actually not as hard as you might think to set vertical alignment in CSS. Say we had some HTML that looked like this.

1
2
3
4
5
6
7

<html>
	<body>
		<div id="container">
			<div id="element">valign me</div>
		</div>
	</body>
</html>

And that HTML was styled like so.

#container {
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	width: 150px;
	height: 20px;
	line-height: 20px;
}

We’d get something that looks like this, right?

align_noscript.gif

That was a little anticlimactic. Let’s try that again with a few more styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#container {
	position: relative;
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	width: 150px;
	height: 20px;
	line-height: 20px;
}

align.gif

That’ll do it. See all that positioning going on in the stylesheet? If anyone doesn’t know, positioning an element absolutely within a relatively positioned container will position the element based on the container. Basically what’s happening is that we’re telling element to position itself halfway down from the top (top: 50%) of container. Where did the margin-top: -10px come from, though? To align the horizontal centers of the container and element, we have to pull the element up half of its height (20px / 2 = 10px).

And there you have it — a pretty painless method of vertically centering an element. But wait, there’s more. Let’s make our lives a bit easier.

A Dynamic Solution (Javascript)

Don’t worry, I hear you. You don’t want to have to calculate the margins for each individual element you want vertically align. Or there may be cases where you’re attempting to load content dynamically and you really have no way of to calculate the margin yourself. I ran into this problem a few times with both my gallery and slideshow applications (coming soon, I promise). The result was a javascript align method I wrote. It wasn’t always so complex. Until yesterday, it could only vertically and horizontally center. But now (with a little work on the original method) we can do things like the following.

// vertically center the element within its container
align('element', { vAlign: 'middle' });
 
// horizontally align to the right and center vertically
align('element', { hAlign: 'right', vAlign: 'middle' });
 
// horizontally center and vertically align to the bottom
align('element', { hAlign: 'center', vAlign: 'bottom' });

The method takes every combination you can think of. If you’d like some help constructing the method with parameters, head over to the sandbox.

Resources

The script in this post uses Sam Stephenson’s Prototype library. There’s some very good documentation for Prototype written by Sergio Pereira and over at script.aculo.us (another great javascript library).

Download the Source

All source code is provided under the Creative Commons Attribution-Sharealike License. If you agree to these terms, please view and download the entire source now.

]]> http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/feed/ 15 Distributing Elements Within a Container http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/ http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/#comments Wed, 06 Sep 2006 05:15:41 +0000 Garrett Murphey http://gmurphey.com/2006/09/04/distributing-elements-within-a-container/ text-align:'justify', you are able to justify lines of text within their container, but there's really no equivalent for non-text elements.]]> One aspect of HTML and CSS I’ve always felt is lacking is the ability to distribute elements evenly within its container. Using the CSS rule text-align:'justify', you are able to justify lines of text within their container, but there’s really no equivalent for non-text elements.

This became a problem a few weeks ago when a client requested that their site menu span the entire width of the page. Before discovering CSS, I would accomplish this using tables and images. But since then, I’ve learned that images are quite inaccessible and can be very difficult to maintain when the menu changes, and since this site was being built using CSS, I wanted to keep tables out of the design as much as possible. So, for the time being, I created something like the following.

1
2
3
4
5
6
7
8
9
10
11

<html>
	<body>
		<ul id="container">
			<li>Home</li>
			<li>About Us</li>
			<li>Services</li>
			<li>Resources</li>
			<li>Contact Us</li>
		</ul>
	</body>
</html>

distribute_noscript.gif

That was all well and good, but it wasn’t going to fly with the client.

After digging through CSS documentation and finding little that addresses this problem, I decided the best way to accomplish this effect was to use javascript to dynamically generate CSS. I’m hoping a feature is added to CSS soon since I’m not a big fan of using javascript for design.

While scripting this method, I made a list of characteristics I’d like to see it have.

  1. Utility
  2. Scalability
  3. Simplicity

With those goals in mind, I came up with this frame for the method.

distribute(container, elements, [direction = 'horizontal', className = null])

Container (required)
The id attribute or HTML object of the container.

Elements (required)
The tag name of the element(s) you want to distribute within container (e.g. ‘li’, ‘img’, ‘div’).

Direction (optional)
The direction you wish to distribute elements. This can either be ‘horizontal’ (default) or ‘vertical’.

ClassName (optional)
If you have multiple instances of elements and only want to distribute certain elements, you may attach a class to those tags and pass that to the method. This property is null by default.

Let’s take a look at the script (the following script was written with Prototype).

1
2
3
4
5
6
7
8
9
10
11
12
13

var containerDimen = Element.getDimensions(container);
var element = $A($(container).getElementsByTagName(elements));
 
if (direction == 'vertical') {
	var containerHeight = containerDimen.height;
	containerHeight -= 
	(parseInt(Element.getStyle(container, 'padding-top')) 
	+ parseInt(Element.getStyle(container, 'padding-bottom')));
} else {
	var containerWidth = containerDimen.width;
	containerWidth -= 
	(parseInt(Element.getStyle(container, 'padding-left')) 
	+ parseInt(Element.getStyle(container, 'padding-right')));

The first thing we need to do is collect all elements within the container. We’re using the $A() method to make the results Enumberable so we can run them through an each() loop a little later. After we’ve gathered all the elements, we need to calculate the container width or height (depending whether direction is set for ‘horizontal’ or ‘vertical’). Since the box model calculates width as the sum of width and padding, we have to subtract the padding from the width to get the real width of the container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var elementWidth = 0;
var elementHeight = 0;
var i = 0;
 
element.each(function (e) {
	if ((className == null) || ((className != null) 
		&& (Element.hasClassName(e, className)))) {
		i++;
		var elemDimen = Element.getDimensions(e);
		if (direction == 'vertical') {
			elementHeight += elemDimen.height;
			Element.setStyle(e, { 
				marginTop: 0, 
				marginBottom: 0 
			});
		} else {
			elementWidth += elemDimen.width;
			Element.setStyle(e, { 
				marginLeft: 0, 
				marginRight: 0 
			});
		}
	}
});

Now that we have the container width (or height), we need to calculate the total width (elementWidth) of all the elements. If there were any margins applied to the elements for a noscript version, we remove them. i is used to count how many elements match the search criteria since className may or may not be null.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

if (direction == 'vertical')
	var leftover = containerHeight - elementHeight;
else
	var leftover = containerWidth - elementWidth;
 
var marginNum = i - 1;
var margin = Math.floor(leftover / marginNum);
 
element.each(function (e) {
	if ((className == null) || ((className != null) 
		&& (Element.hasClassName(e, className)))) {
		if (direction == 'vertical') {
			if (e != element[element.length - 1])
				Element.setStyle(e, {
					marginBottom: margin + 'px'
				});
		} else {
			if (e != element[element.length - 1])
				Element.setStyle(e, {
					marginRight: margin + 'px'
				});
		}
	}
});

We’re just about done! With the elements and container width calculated, we figure out how much space is leftover. The leftover space is divided by i minus one (we’ll only be applying margins to the right side of elements) to figure out how much space should be between each element. All that’s left to do after that is to place those margins on each of the elements.

With the javascript written, all that’s left to do is make a little modification to the HTML.

1
2
3
4
5
6
7
8
9
10
11

<html>
	<body onload="distribute('container', 'li')">
		<ul id="container">
			<li>Home</li>
			<li>About Us</li>
			<li>Services</li>
			<li>Resources</li>
			<li>Contact Us</li>
		</ul>
	</body>
</html>

distribute.gif

That’s it. It’s probably a good idea to add default margins to the elements for users with javascript disabled (any default margins get removed by the script). Enjoy!

Resources

The script in this post uses Sam Stephenson’s Prototype library. There’s some very good documentation for Prototype written by Sergio Pereira and over at script.aculo.us (another great javascript library).

Download the Source

All source code is provided under the Creative Commons Attribution-Sharealike License. If you agree to these terms, please view and download the entire source now.

]]> http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/feed/ 11