dawnerd » Javascript

Making Internet Explorer HTML 5 Ready

dawnerd — Sun, 09 Aug 2009 18:49:19 +0000

I’m going to come right out and say that it’s likely to take IE years before we see native HTML 5 support. However, that doesn’t mean we should ignore HTML 5 until IE gets with the program.

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.

Fixing Common CSS Issues In IE6 and IE7

dawnerd — Tue, 21 Oct 2008 06:05:01 +0000

As it turns out, Microsoft really doesn’t care about web standards at all. It has taken them way too many years to adopt the basics of CSS2 correctly. Now they are trying to expand that with IE8. However, developers still have to deal with the outdated IE6 and IE7. Using min-width is completely pointless unless your user base only uses good browsers.

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.

Quickly Creating Javascript Tooltips

dawnerd — Sun, 24 Aug 2008 11:05:11 +0000

I’ve noticed that a lot of sites do not use tooltips as much as they should. There are many places on a site where tooltips would really be nice. One example of using them correctly is TheSixtyOne. They use a nice tooltip when you are about to bump a song up. It quickly lets you know how many points it will cost and how many times you have bumped it. This post will hopefully inspire at least one of you to use tooltips more often.

The solution I have decided to use is UniTip from Unit Interactive. I believe they have the best solution to quickly setting up tooltips. Download the zip they provide and we should be ready to go.

First, the base html:


  
    Example tooltip

Open up unitip.js and find the lines containing:

var uniTipTag = "a,img";
var uniTipClass = "TipEx";

Change this to:

var uniTipTag = "img";
var uniTipClass = "tooltip";

Now just run the html file and you should instantly have tooltips. If something doesn’t work, make sure your path to the css file and images are correct. In addition, it is suggested to use a PNG fix file for IE6. I recommend Unit PNG Fix. It’s super easy to use and works like a charm.

Please keep in mind that tooltips are really designed for items that really need them, extensive use is annoying. A common use is creating help tips for users completing a complex form. If there is some form of information a user could not understand, it is advisable to use a tooltip on the input box or the label.

An Alternate Way To Bypass Javascript’s Same-Origin Policy

dawnerd — Thu, 12 Jun 2008 03:42:40 +0000

If you have worked with AJAX at all, you know that there is this thing called the Same-Origin policy which makes it nearly impossible to send AJAX requests to 3rd party domains. There are workarounds such as going through a proxy. I don’t like that and think it’s messy. However, sometimes it’s the only way to go about getting the job done. This post is not about going through a proxy, instead, it is about using a little trick I learned from Yahoo.

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.

Ajax Username Validation with The Most Popular JS Frameworks

dawnerd — Fri, 23 May 2008 21:59:02 +0000

It seems like every site these days uses some form of Ajax to validate form fields. One thing I cannot stand is websites that do not use Ajax to check usernames (or other data) as you type. Because a lot of sites are lacking this one feature, I thought it would be nice to throw together a few examples of how to do it correctly with the most popular of JS frameworks.

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!');
}