var node = createElements("Hello World!");
document.body.appendChild(node);

Ok, so the above example is pretty useless, but what if you wanted to make that text into a link. the createElements() function allows us to pass an object literal with four items: tag, attributes, style, and children. “Tag” is, of course, the type of HTMLElement you want to create. “Attributes” is another object literal containing the attributes for the html tag (src, href, etc…). “Style” is an object literal containing the style attributes you want applied to the element, and last but certainly not least, “children” allows you to nest elements. It is an array of either strings or object literals, just like the ones you would pass into this function. Each of these children will be recursively created and appended to the main element. Here’s an example that creates a link to google:

var node = createElements({
	 tag: "a",
	 attributes: {
		href: "http://www.google.com"
	 },
	 style {
	    textDecoration: "none"
	 },
	 children: [ "Click Here!" ]
});
document.body.appendChild(node);

And here’s a more complex example that really shows off the nesting power of this javascript function:

var node = createElements({
   tag: "div",
   attributes: {
	  id: "google_link"
   },
   children: [
	  {
		 tag: "a",
		 attributes: {
			href: "http://www.google.com"
		 },
		 style: {
			textDecoration: "none",
			fontWeight: "bold"
		 },
		 children: [
			{
			   tag: "img",
			   attributes: {
				  src: "http://www.google.com/intl/en_ALL/images/logo.gif",
				  alt: "Google!",
				  title: "Google!",
				  border: "0"
			   },
			   style: {
				  width: "200px",
				  height: "200px"
			   }
			},
			{
			   tag: "br"
			},
			"Click here to go to Google!"
		 ]

	  }
   ]
});
document.body.appendChild(node);

The above example creates the following code:

<div id="google_link">
	<a style="text-decoration: none; font-weight: bold;" href="http://www.google.com">
		<img style="width: 200px; height: 200px;" title="Google!" alt="Google!" src="http://www.google.com/intl/en_ALL/images/logo.gif" border="0">
		<br />
		Click here to go to Google!
	</a>
</div>

As you can see, it’s quite a bit easier to use than typing mynode.setAttribute 20 times. Here’s the source code:

function createElements( args ) {
   var el;

   if( typeof(args) == "string" ) {

      el = document.createTextNode(args);

   } else if ( typeof(args) == "object" ) {

      el = document.createElement( args.tag );

      if ( args.attributes ) {
         for ( i in args.attributes ) {
            el.setAttribute(i, args.attributes[i]);
         }
      }
      if ( args.style ) {
         for ( i in args.style ) {
            el.style[i] = args.style[i];
         }
      }
      if ( args.children ) {
         for ( var i = 0; i < args.children.length; i++ ) {
            el.appendChild( createElements( args.children[i] ) );
         }
      }

   }
   return el;
}

[17-Feb-2008 07:33:52] PHP Parse error:  syntax error, unexpected T_FUNCTION, expecting ‘(’ in C:\www\forms\validate.php on line 10
[17-Feb-2008 07:33:54] PHP Parse error:  syntax error, unexpected T_FUNCTION, expecting ‘(’ in C:\www\forms\validate.php on line 10
[17-Feb-2008 07:34:08] PHP Fatal error:  Call to undefined function send_email() in C:\www\forms\email.php on line 32
[17-Feb-2008 07:34:39] PHP Parse error:  syntax error, unexpected T_STRING, expecting T_FUNCTION in C:\www\lib\User.php on line 379
[17-Feb-2008 07:34:55] PHP Parse error:  syntax error, unexpected $end in C:\www\login\login.php on line 134

The PHP error log (or any error log for that matter) is really hard on the eyes. So, I decided to write an error log parser that would make things a little prettier. And here it is:

Features:

• Displays last $n errors (specified by user)
• Filter errors by regex
• PHP Built-In Function names link directly to their documentation on php.net
• Line numbers and script names are clickable. Click the line number to view the source code for the offending code. The code will be displayed, with the selected line highlighted.
• Errors grouped by request

The parser is actually separated into 4 files.

• errors.php - the actual parser
• errors.html.php - the ‘normal view’ template
• errors.source.html.php - the ’source code view’ template
• errors.css - the css for the above templates

Also, it is currently setup to use the template engine I uploaded a few days ago. If you don’t like that, it’s pretty easy to change. If you know your way around php (which I expect you do if you’re looking at the error logs), you can manipulate the parser and templates to work without my engine in about 5 mins.

Also, you can forego the templates completely and use the parser for your own purposes. Whatever you want.

Enjoy!

Download Now

Here’s my set, in the form of a CSS Sprite. In case you don’t know what that is, a css sprite is one image that gets split into many images using cascading style sheets. This way you load one big image instead of 50 small images, thus dramatically reducing the number of requests made by the web browser, which makes the page load much faster.

Here it is / Here they are:

And here’s how you use it:

First, include the stylesheet.

   <link href="stb.css" rel="stylesheet" type="text/css" />

Second, add the image to the page. You do so by adding a link. Examples for each is contained in the test.html file included in the zip file.

   <a href="http://jigsaw.w3.org/css-validator/" class="stb stbCss"></a>

Download Now

Here’s a simple example:

PHP File:

<?php
   require('template.php');
   $template = new Template("./templates/");
   $template->setVars(array(
      "title" => "My Web Page",
      "hello" => "Hello World!"
   ));
   echo $template->process( "helloworld.html.php" );
?>

Template (HTML) File:

<html>
   <head>
      <title><?php echo $title; ?></title>
   </head>
   <body>
      <p>
         <?php echo $hello; ?>
      </p>
   </body>
</html>

Download Now!

Note: This is still somewhat a work in progress. On my todo list is 1) improve cache handling (based on request headers), and 2) redocument the source with phpdoc instead of perldoc.

In JavaScript, objects and functions are already passed by reference (as long as you don’t use parenthesis after the function name). Unfortunately, there is no way to force other variable types to be passed by reference instead of by value.

Because I thought this was rediculous, I’ve created a javascript function that can be used to get a reference / pointer to a variable. Here it is:

function reference_to( object, property ) {
   return function() {
      return object[property];
   }
}

Essentially, this function returns a getter function. So, instead of a value you have an anonymous function that retrieves the value for you. To use it, call reference_to with the object as the first argument and the variable name as the second (in string form). For example:

reference_to(node, "className");

If the variable you’re trying to point to is not contained in an object (it’s a global variable), use window as the object, like this:

var myVar = "blah";
reference_to(window, "myVar");

Here’s a working, more in-depth example:

See this example in action.
(tested in IE7, Opera9, Firefox2, and Safari3)

This creates a text box and a start button. The start button has an onclick attribute which starts this script. When you click on the start button, the reference_to function is called with two arguments. The first argument is the object that contains the variable to point to, and the second argument is the name of the variable. In this case, we’re passing in the input box and “value”, which will get the text inside of the input box.

The reference_to function returns an anonymous getter function, which is then passed to the foo() function as the only argument. The foo function creates a scoped function named bar which alerts the current value of the text box by calling alert( getter() ) where getter is the anonymous getter function. Next, foo() tells the web browser to call bar() every 10 seconds with window.setInterval.

In other words… after you click start, an alert box will pop up every 10 seconds to tell you what text is currently contained in the input box.

usage:

event_listener.add( object, event_type, function );

Example:

function init() {
   alert("the page is fully loaded");
}
event_listener.add(window,"onload", init);

-OR -

event_listener.add(window, "onload", function init() {
   alert("the page is fully loaded");
});

Then you can also remove events as well. Remove them in the same manner you created them. Like this:

event_listener.remove( object, event_type, function );

Example:

function init() {
   alert("the page is fully loaded");
}
event_listener.remove(window,"onload", init);

-OR -

event_listener.remove(window, "onload", function init() {
   alert("the page is fully loaded");
});

Ok, so here’s the code:

var event_listener = {
   add: function(node, event_type, function_reference) {
      node = $(node);
      // if this is the first time an event has been added
      // to this node, setup the event handling system
      if(
         typeof node[event_type] != ‘function’ ||
         typeof node[event_type+'_num'] == ‘undefined’
      ) {
         node[ event_type + '_num' ] = 0;
         if( typeof node[event_type] == “function” ) {
            node[event_type + 0] = node[event_type];
            node[event_type + '_num']++;
         }
         // setup the actual event listener (onclick, onmouseover, etc…)
         node[event_type] = function(e){
            e = (e) ? e : window.event;
            var return_value = true;
            for(var i = 0; i < node[event_type + '_num']; i++) {
               if( node[event_type + i](e) === false) {
                  return_value = false;
               }
            }
            return return_value;
         }
      }
      // prevent duplicates - return if the function is already there
      for(var i = 0; i < node[event_type + '_num']; i++) {
         if( node[event_type + i] == function_reference ) {
            return false;
         }
      }
      node[ event_type + node[ event_type + '_num' ] ] = function_reference;
      node[ event_type + '_num' ]++;
      return true;
   },
   remove: function(node, event_type, func) {
      node = $(node);

      // if the node is not setup for the event handling system, do nothing
      if(
         typeof node[event_type] != ‘function’ ||
         typeof node[event_type + '_num'] == ‘undefined’ ||
         node[event_type + '_num'] == 0
      ) {
         return false;
      }

      // loop through functions. once target function is found, remove it. shift
      // subsequent functions up one number (kindof like Array.splice(i,1); )
      var found = false;
      for( var i = 0; i < node[event_type + '_num']; i++ ){
         if( !found ) {
            found = node[event_type+i] == func ||
            node[event_type+i].toString == func.toString;
         }
         if( found && ( i + 1 ) < node[event_type + '_num'] ) {
            node[ event_type + i] = node[event_type + ( i + 1 )];
         }
      }

      if(found) {
         node[event_type + '_num']–;
         return true;
      }

   }
};

Inspired by and/or based on the following:
Aaron Moore’s addEvent()
Dustin Diaz’s addEvent()

Ok… nothing to revolutionary here. This has been done before lots of times. I’ve written two new functions to go along with my hasClass() javascript function.

First is addClass(), which simply adds a class to an object, while preserving the existing classes. Here it is:

function addClass( /*HTMLElement:*/node, /*String:*/className ) {
   if( !hasClass(node, className) ) {
      node.className = node.className + (node.className ? " " : "") + className;
      return true;
   }
   return false;
};

Use it like this:

addClass(myNode, "myclass");

Next is the removeClass function, which removes a css class from an object. Here it is:

function removeClass( /*HTMLElement:*/node, /*String:*/className ) {
   if( hasClass(node, className ) {
      node.className = (' '+node.className+' ').replace(' '+className+' ',' ').replace(/^ | $/,'');
      return true;
   }
   return false;
}

And here’s how you use removeClass():

removeClass(myNode, "myclass");

Like I said, nothing revolutionary, but here they are.

Inspired by the dojo toolkit, this function checks to see if a given class is assigned to a node. Simply run it like this:

var my_node = document.getElementsById("mydiv");
if( hasClass(my_node, "myclass") ) {
   // ...do something
}

Enough talk; here’s the code:

function hasClass( /*HTMLElement:*/node, /*String:*/value ) {
	return (" "+node.className+" ").match(" "+value+" ") ? true : false;
};

It works like this. Since the class attribute has multiple values separated by spaces, you simply add a space to the beginning and one to the end. Then add spaces to the beginning of the value. Then if the value string is contained within the class string, the element has the class.

Enjoy!

I’ve looked a lot lately at the getElementsByClass() function and other getElementsBy functions, but they all seemed rather inadequate to me.

I rewrote the function about three times before I figured out what to do. What I really wanted was a function that could perform a custom comparison on a property of an html element. What I finally came up with was a function that could take a comparison as a string and execute it on each element within the object you run it for. For example:

The following code will get all elements inside of the mydiv element that have a width less than 100:

getElementsWhere(mydiv "width < 100" );

The combinations you can choose are endless. Use any comparison operator you want! You can also run functions that belong to the object on the value before it is compared. For example, if you need to compare the css width of a node, do this:

For numeric style attributes, do something like this:

getElementsWhere( document, "style.width.replace('px','') > 100" );

The idea that sparked all this was my desire for a getElementsById(regex) function. Hence, you can also perform regular expressions on the value of the objects, like this:

getElementsWhere(document "id.match( /^image_/ )");

In fact, you can perform any of the functions that apply to the variable type of the element’s attribute you specify.

Here’s the code:

function getElementsWhere( /*HTMLElement:*/node, /*String:*/comparison) {
   var found = [];
   var all = node.getElementsByTagName(”*”);
   for( var i = 0; i < all.length; i++ ) {
      if( eval( “all[i].” + comparison ) ) {
         found.push( all[i] );
      }
   }
   return found;
};

And here’s how it works…

First, create two arrays. The found array starts out empty and will contain each element who’s attribute matches the comparison. The all array contains every html element on the page.

   var found = [];
   var all = node.getElementsByTagName(”*”);

Then we loop through each array element in the ‘all’ array:

   for( var i = 0; i < all.length; i++ ) {

Below, we perform the comparison. It’s really quite simple. Since the comparison was passed in as a string, we simply use eval to run it as part of the code. So if comparison is “width == 100″, then the code below really is equivalent to: if( all[i].width == 100 )

      if( eval( "all[i].” + comparison ) ) {

If the comparison evaluated to true, push the element onto the found array:

         found.push( all[i] );

Then return the found array to the caller:

   return found;

Well, I hope you like it!