Ongoing Process

I hope they fit. 

For those trying to break away from using tables for layout and do things in CSS, the loss of the valign attribute is a problem.  For some reason, the CSS people never imagined that we’d want to center anything vertically.

You might have tried to use the CSS vertical-align property in your div and discovered it had no effect.  The reason for this is that div is a block element and vertical-align only applies to inline elements.  So we need to use an inline element like span.  But wait, you say, inline elements can’t have a height specified!  Quite so.  But we can emulate height with the line-height property.  So we just wrap the content to be centered in an inline element with a line-height that’s the same as the parent block’s height and presto!

For example:

 It’s a bit of a hack, but what about web design isn’t? 

OK, I confess.  I read icanhascheezeburger.com.

But c’mon, that’s funny. 

I literally laughed until I cried when I read this one. 

The Horror of Blimps

I have wrestled at length with a good DOM-based way to dynamically add JavaScript events to a page.  After much Googling, I pieced the following together from a number of different suggestions (credit to whoever you are). I eventually gave up on DOM because IE’s implementation is so broken, but this part works well.

It uses eval() to execute the action, so it’s not the most elegant thing, but it’s functional.

Example and source:

<a id="event_element" href="#">Click Me</a>

<script type="text/javascript" language="JavaScript">

EventElement = document.getElementById("event_element");

AddEvent(EventElement, "onclick", "DoSomething()");

// Find browser-friendly method to add event
function AddEvent(Element, Event, Action)
	{
	//Store event for retrieval in the event handler
	Element.event = Action;
	// Most browsers
	try
		{
		Element.addEventListener(Event.substring(2), EventHandler, false);
		}
	// Internet Explorer
	catch (ex)
		{
		Element.attachEvent(Event, EventHandler);
		}
	}

// Generic handler for all events
function EventHandler(EventObject)
	{
	// Find the data location
	// Most browsers
	if (EventObject["target"])
		{
		DataLocation = "target";
		}
		// Internet Explorer
		else
		{
		DataLocation = "srcElement";
		}
	// Execute event code
	eval(EventObject[DataLocation]["event"]);
	}

</script>