If you’ve tried to mess around with HTML 5 in IE, you may have noticed that the new elements do not work correctly with css. Luckily for us, we can use a tiny bit of Javascript to trick IE into rending the HTML 5 elements correctly.

document.createElement('header');
document.createElement('footer');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('section');

The above snippet of Javascript will enable HTML 5 support for the following elements: header, footer, aside, nav, article, section. Should you need support for another element, just use the createElement function and set the parameter to be the element name.

Remember that you should only include the JS file with the ‘HTML 5 emulation’ code on IE.

Our next task in a later post is to emulate the video and audio elements.

All internal links should be in hash format. Example: instead of linking to filename.html, you would link to #/filename.html.

If you have clean urls on, the hash is almost not noticeable. Example: domain.com/#/profile/username

To get started with AjaxPages, get the files from the Google Code trunk. Example files are included. That should be enough to get you started. The plugin is very lightweight and fairly simple so it should not give you any problems.

If you need help, please leave a comment and I will personally help you out.

The plugin I created, bltcheckbox, allows you to use any html and css. The only options you pass to the plugin are whether it’s a checkbox, or a radio input.

For code samples and documentation, please check out the code code page here.

The other day, I literally stumbled upon a JS file that fixes most of the IE6 and IE7 bugs. It emulates a lot of missing CSS functionality, and also applies a generic PNG fix. You can find the file here. I have been using it on all of my projects recently. In combination with a css reset stylesheet and the IE7 JS file, I have had a lot less headaches. I say you give it a shot. it’s not like it will take a lot of work for you to at least try out.

If you have control over both domains, then this may be the ideal solution for you. For example, lets say you have two sites and you need to share data between the sites. Connecting via MySQL could be out of the question. So what do you do now? Create a dynamic javascript include file.

See how that outputs a Javascript array? It will come in handy next.

By including the dynamic.php file as if it were a javascript file, you have imported the data from the other domain without having to use ajax. You can use this to pass any amount of javascript you need. I’m sure if you’re clever you will figure out how to make this into a “mock AJAX” system.

You can view the source of the examples to see how they are done.

Ajax Username Validation with Prototype
Ajax Username Validation with jQuery

note: more examples will come in time. I am currently reading the mootools, dojo, and mochikit.

The only PHP code you will need is as follows:

include("../db.php");
$name = ereg_replace("[^A-Za-z0-9-]", "",mysql_real_escape_string(strip_tags(trim($_GET['name']))));
if(empty($name)) die();

$sql = "SELECT `username` FROM `common_usernames` WHERE `username` = '$name'";
$query = mysql_query($sql,$db);

if(!mysql_num_rows($query))
{
	die(''.$name.' is available!');
}
else
{
	die(''.$name.' is taken!');
}

number = Math.round(Math.random()*10);

Of course you can modify this slightly to fit your needs, but this should be the basics needed.

Edit: As pointed out, the code I supplied is not very random. If you need true random numbers, the mt_rand function supplied by the good guys at phpjs.org is a great solution.

function mt_rand( min, max ) {
    // Returns a random number from Mersenne Twister
    //
    // version: 810.1317
    // discuss at: http://phpjs.org/functions/mt_rand
    // +   original by: Onno Marsman
    // *     example 1: mt_rand(1, 1);
    // *     returns 1: 1
    var argc = arguments.length;
    if (argc == 0) {
        min = 0;
        max = 2147483647;
    } else if (argc == 1) {
        throw new Error('Warning: mt_rand() expects exactly 2 parameters, 1 given');
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

I would suggest using the above when you need to generate random numbers. You should also check out the rest of phpjs.

Take for example this button:

Right now the button doesn’t do a thing. However, if we apply some CSS to it, we get a nice button with a rollover.

.button{
    background:url('url/to/image.png') no-repeat;
    width:20px;
    height:20px;
    display:block;
}
.button:hover{
    background:url(url/to/rollover.png) no-repeat;
}

Now the button will show the image and swap to the rollover when you hover over it. All without Javascript. But, you ask “How do you preload the images without Javascript?”

I laugh, such a simple answer. Put the rollover images at the top of the page, inside of a hidden div.

And there you have it, JS free rollover images.