What I tried to do

I performed the case check by simply checking the parentNode of the element, which obviously shouldn’t exist until it’s inserted into the DOM.

if(!this.form.parentNode)
	$('Admin').insert(this.form);
else
	this.form.reset();

As I expected, worked perfectly. Until I popped open IE7.

IE Ignores Specs

Apparently, IE7 assigns a parentNode to nodes upon creation, before it has been inserted into the DOM. Well that’s silly, because the specifications say nothing about setting the parentNode. In fact, they state the opposite:

However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.

That’s fine. Doing some debugging, I find there is indeed a parentNode. And that parentNode has a nodeType of 9, or DOCUMENT_NODE. So it makes a new, off-screen document to hold onto created Elements. Whatever.

Excusing IE

A simple modification to my if statement fixed everything, once I finally knew IE gives it a parentNode. The good part (there’s good here?), is that it assigns the new Element a parent that only the HTML node should have, a document. So here it is modified:

if(!this.form.parentNode || this.form.parentNode.nodeType == 9) // 9 == DOCUMENT_NODE, but IE is freaking retarded. I'm ganna kill Microsoft 100 times over.
	$('Admin').insert(this.form);
else
	this.form.reset();

Floaters Have Bad Parenting

One problem that shows it self a lot, is when you have floated items inside a container, and that container has a background. You will find that the container does a poor job of containing the floated items.

Quite often, the solution to something like this, is putting a clear div at the bottom of the container. But while that works, it adds extra markup, which sometimes a designer doesn’t have access to do so.

For instance, on Blazonco, the XHTML markup is generated by the server, and so adding extra divs to an element that the designer wants floated just isn’t feasible. Well, thankfully, there’s an easy CSS solution with no additional markup.

Overflow: hidden

.container {
	overflow:hidden;
}

That’s it! Just place an overflow property on your container, and it will stretch down to encapsulate all of its floating children.

The only downside I’ve found is that you can’t also absolutely position any children to be outside of the box, or it will hide! Other than that (IE6 doesn’t behave correctly, and I don’t care), everything works great!

I’m currently finishing out all details of blogging, major and minor. Because the ease and power of the CMS, I’ve ported my design over from this site. It’s sitting on its own, brand new site. I’m just waiting to make our next update to the live servers, as well as making some design upgrades.

Here’s a sneak peak at the design improvements.

I should have myself moved over by next week, and blogging will resume.

• It has an easy bug tracker, allowing bugs to be marked for different components and assigned to programmers, and reassigned for testing, and so forth.
• You can mark these bugs (or enhancements) for different milestones, so you can setup a timeline of new releases and patches.
• It can connect to your svn repository, and use the logging from svn to update tickets.
• It has it’s own wiki section, allowing documentation and general information to be setup about different parts of the project.
• You can setup time tracking, to keep track how long certain bugs and new enhancements take, so you can charge accordingly.
• It’s Open Source!

So, we use it internally at my day job, and needed to show how we use it effectively:

Clicking on a ticket from the list brings up the details:

I needed to create in XML:

<item key="object">DOMAIN</item>

I needed to create items in this nature for various different properties to communicate to a domain API. Since this is essentially a hash, or associate array, it’d be awesome if it could work like one. Well, it can!

$dt_assoc['object'] = 'DOMAIN';

After writing my class, that’s how I’m able to create XML items. It all lies in using an object that implements the ArrayAccess interface. Doing so gives the object functions that are called when you try to access the object like an array. So by implementing the functions, you can write custom logic that happens, besides just simply holding a value like normal arrays do.

The above statement calls ArrayAccess::offsetSet($offset,$value);, so here’s the implementation.

 public function offsetSet($offset,$value) {
	$item = $this->dom->createElement('item',$value);
	$attr = $this->dom->createAttribute('key');
	$item->appendChild($attr);
	$text = $this->dom->createTextNode($offset);
	$attr->appendChild($text);

	$this->items[$offset] = $item;
	$this->el->appendChild($item);
}

Using DOMDocument to create XML for me, I create an item wrapped around the value, create an attribute called key, and give text of the offset. So instead of needing to write this process out for every new item, I just need to set a new key and value of an object that implements this interface.

There are 3 other methods to the interface, as well as one more function I define to export the data of this object into XML.

The constructor takes a name of an element to wrap all the items in, as well as the instance of the DOMDocument. You need to hold onto the original instance. This class creates an XML element of <$name>items go here</$name>.

The array $data is an associate array in the object to keep track of all the values of every item. The array items keeps a reference to the item nodes in the DOMDocument, so they can be easily removed with offsetUnset().

offsetExists simply checks if there is an item with the key of offset, and offsetGet returns the value of the item with the appropriate key.

Lastly, toXML() is a new function unrelated to ArrayAccess, but useful to me, which just returns the DOMElement that is holding onto all these items.

Here’s the full class. You’ll find DOMDocument and ArrayAccess useful as well, if you need to do something similar.

<?php
	class SRSData implements ArrayAccess {

		var $el;
		var $dom;
		var $data;
		var $items;

		public function __construct($name,$dom) {
			$this->dom = $dom;
			$this->el = $this->dom->createElement($name);
		}

		public function offsetExists($offset) {
			return isset($this->items[$offset]);
		}

		public function offsetGet($offset) {
			return $this->data[$offset];
		}

		public function offsetSet($offset,$value) {
			if($value instanceof SRSData) {
				$item = $this->dom->createElement('item');
				$item->appendChild($value->toXML());
			} else {
				if(!empty($value))
					$item = $this->dom->createElement('item',$value);
				else
					$item = $this->dom->createElement('item');
			}
			$this->data[$offset] = $value;
			$attr = $this->dom->createAttribute('key');
			$item->appendChild($attr);
			$text = $this->dom->createTextNode($offset);
			$attr->appendChild($text);

			$this->items[$offset] = $item;
			$this->el->appendChild($item);
		}

		public function offsetUnset($offset) {
			$this->el->removeChild($this->items[$offset]);
			unset($this->data[$offset]);
			unset($this->items[$offset]);
		}

		public function toXML() {
			return $this->el;
		}

	}
?>

Learning this was one of those time where I was actually gleeful about programming. Hopefully, this helps show how powerful PHP really is.

Javascript is a very event-driven language. Considering the interactivity of the medium (the web), the most common need of Javascript by far is to respond to user interaction. Unfortunately, a problem that plagues Javascript that most other languages take for granted, is that the standard library isn’t very standard. So even the way to add event listeners in Javascript, a function of utmost importance, is implemented differently among browsers. So how do we fix this without a framework?

If you haven’t done much Javascript programming without a framework, it’s easy to miss what all a framework is doing for you. And sometimes, there isn’t enough Javascript functionality needed to warrant the overhead kilobytes of a framework. So, what really goes on underneath? Well, I’m not going to show you everything, because a lot of convenience can be put into wrapper functions.

To simply make adding event listeners easier in all browsers, we make one function, I’ll call it addEvent ’cause I’m used to Mootools.

window.addEvent = function(event, target, method) {
	if (target.addEventListener) {
		target.addEventListener(event, method, false);
	} else if (target.attachEvent) {
		target.attachEvent("on" + event, method);
	}
}

It takes for parameters a string of the event, the target element, and the function to execute. We’re checking which function exists in the browser. addEventListener is most standard browsers, and attachEvent is for IE. It also takes care of adding “on” to the start of the Event for IE.

Now then, you can access this function in another function by calling window.addEvent().

var someFunc = function() {
	var el = document.getElementById('someEl');
	window.addEvent('click',el,funtion(){

		//do stuffz...

	});

	var formEl = document.getElementById('someFormEl');
	window.addEvent('submit',formEl,funtion(){

		//do stuffz...

	});
}

This is the simplest way, as we just create a global function. Frameworks will add to the convenience by allowing you to call Element.addEvent instead of passing the element as a parameter. But this works fine when you just have a few simple Events to watch in a simple script.

Any tips or convenience that you add to your own addEvent function?

It can be bookmarked and then activated from any page. It will countdown and then reveal my new life.

Cheers, Sean!

You’ve seen them on other sites. When you have a long list of checkboxes, and you know you need to check them all. Thankfully, the developer gave you a “Toggle All” and “Check All” box at the top, so you don’t have to check each individual box. They don’t make or break an application, but they subconsciously make a better user experience. It’s really easy to get this working, and I can show you how to do it in Mootools, Prototype, and even without any framework, since if this is the only thing you need in Javascript, you need the overhead of a framework to do this.

I recently had to make a permissions page for a CMS, allowing users to set the permissions of new users for various features. Adding a way to toggle all options would be nice, because there’s a lot of options! Here it is with Mootools goodness, thought for the CMS I wrote it with Prototype:

$('toggler').addEvent('click',function (e) {
	var toggle = $('toggler').checked;
	$$('#formId input[type=checkbox]').each(function(check) {
		check.checked = toggle;
	});
});

I’ve added an event listener to the checkbox with id “toggler”, listening for a click. When clicked, I store its checked state (true if checked, false if unchecked), and then set every other checkbox to the same state. This way of doing it, as opposed to just using check.checked = !check.checked (using NOT to pick the opposite state), prevents double toggling the Toggler checkbox. Here it is originally in Prototype:

$('toggler').observe('click',function (e) {
	var toggle = $('toggler').checked;
	$$('#formId input[type=checkbox]').each(function(check) {
		check.checked = toggle;
	});
});

The only difference between Mootools and Prototype is the attachEventListener implementation: Mootools uses addEvent, Prototype uses observe.

And like I said in the beginning, if this is your only need of Javascript (unlikely), I recommend not bogging down the page with a framework, and use native Javascript. It’s really not hard. Here it is:

var toggleFunction = function() {
	var toggle = document.getElementById('toggler').checked;
	var inputs = document.getElementsByTagName('input');
	for(var i = 0; i < inputs.length < i++) {
		if(inputs[i].type == 'checkbox') {
			inputs[i].checked = toggle;
		}
	}
}

//If Good Browser
if(window.addEventListener) {
	document.getElementById('toggler').addEventListener('click',toggleFunction(),false);
// If IE
} else if (window.attachEvent) {
	document.getElementById('toggler').attachEvent('onclick',toggleFunction());
}

If you’re used to only using frameworks, this looks like more work. And it is, slightly. But if you’ve done any kind of programming, you realize it’s just a simple for loop, used normally.

Of course, this does show-off some of the things frameworks do for you. The framework will check the type of input for me, instead of me having to write an if statement. It also gives you a cross-browser addEvent function, instead of having to check for browser inconsistancies.

After ripping the stylesheet and scripts straight out of the YUI demo, and start up my page, you notice that the Editor loads in, but it looks way wacked. That’s because I forgot the subtle declaration of a new class on the body element:

<body class="yui-skin-sam">

Once finally catching this, I felt disappointed that the YUI Editor didn’t do that in the Editor.render() function that you call to display the editor. My opinion of plug-ins is that they should be as pluggable as possible. The less I have to do to make a plug-in work, the better the plug-in, in my opinion.

Having to add a class name in HTML that’s just as easily done in Javascript didn’t make sense. If Javascript wouldn’t is disabled and isn’t able to add the class to the document body, then the class is useless anyways, since the YUI Editor won’t be using it.

var myEditor = new YAHOO.widget.Editor('msgpost', {
    height: '300px',
    width: '522px',
    dompath: true,
    animate: true
});
myEditor.render();
YAHOO.util.Event.onDOMReady(function(){ YAHOO.util.Dom.addClass(document.body,'yui-skin-sam')});

The last line uses YUI’s onDOMReady function to wait until the DOM is accessible, then uses YUI’s Dom object to add “yui-skin-sam” to the body tag.

This may seem like a useless modification, but now, I can simply copy and paste this code snippet, or even externalize and just include the Javascript file, into any page I want, and not have to remember to add a class to my HTML.

This is an Informational message.

The following are common messages used for during form submittal, or even simply navigating certain dynamic pages.

This is an Error message.

This is a Warning message.

This is a Success message.

It’s not to hard to style these as such. I felt that semantically, these messages could be blockquotes, as they stand out from the rest of the context. I’ve used the Silk icons, as is pretty common, but weFunction also has great icons for this use.

.success, .error, .warning, .info {
	border-top:1px dotted;
	border-bottom:1px dotted;
	color:#777;
	margin-bottom:3px;
	padding:5px 40px;
}
.success {
	background:#dfd url('images/success.gif') no-repeat 10px center;
	border-color:#9d8;
}
.error {
	background:#fdd url('images/error.gif') no-repeat 10px center;
	border-color:#d98;
}
.warning {
	background:#ffc url('images/warning.gif') no-repeat 10px center;
	border-color:#dd7;
}
.info {
	background:#ccf url('images/info.gif') no-repeat 10px center;
	border-color:#89d;
}

I’ve done them fairly straightforward. They all get the same spacing, with enough padding to allow the background icon to be on the left. They also get a dotted border on top and bottom. And information is blue, success is green, warning is yellow, and error is red.

That’s how I do it. How do you style your status messages?