buyco.ca » Javascript

JavaScript Essentials: Compatibility

Buyco — Fri, 23 Jul 2010 21:30:05 +0000

Week 3 – JavaScript Essentials: Compatibility

Compatibility

Who are you programming for?

It’s one thing to create some amazing interactivity with JavaScript, it’s another if you can get it to work with all modern browsers, and it’s above and beyond when you also take into account the needs of browsers with JavaScript disabled.

Creating functionality to work on your site for one particular browser (and version) and for one particular operating system is easy. Getting it to work with other browsers on all operating systems is a more daunting task. Adding functionality to enable elegant error messages for browsers with JavaScript disabled is a work of art!

There are hundreds if not thousands of combinations of browser/operating system combinations. It’s our duty as web developers to ensure that our sites work with the most common browsers and operating systems, without sacrificing too much of the user’s experience. For this week’s session, we’re going to consider the following groups:

Modern browsers with JavaScript enabled

This group is going to be your best friend. These are the browsers which work exactly how you want them to, close to W3C spec and are compatible with almost every bit of modern JavaScript code–although their reliability can also be a big downfall in your habits. Always remember: Just because it works on Firefox on Windows, doesn’t mean it works for everything else.

Older browsers with JavaScript enabled

Although there are not too many users out there sporting the Internet Explorer 6.0 SP2, they shouldn’t be forgotten. It’s not difficult to test code for these types of browsers, you just have to not be lazy. But even if you are, there are alternatives to writing a completely different set of code just for compatibility’s sake.

Any browser with JavaScript disabled

This can include essentially any browser you can think of. This might be the easiest group to speak to because you can’t with JavaScript!

Honorable Mentions

There are some other types of browsers we are not going to consider for this particular week’s session, but it’s good to know that they exist.

Mobile Browsers

Here we enter the realm of mobile browsing. We are now dealing with even more platforms/operating systems, and types of mobile browsers. Now how many of them actually support JavaScript? This group I rarely worry about because I consider the demographic of my audience and this rarely falls within a project’s requirements. In the case of you having to build a site compatible with mobile devices, there are several emulators out there you can use on your computer to test the functionality of your site:

These are only a few of many emulators out there which you can use, but this is a good place to start.

Internet Explorer

Yes we will go over Internet Explorer, but IE should still be considered as a separate group only because of how easy it is to isolate this subset. Consider the following:

		
		
		
		Hello there

IE is the only browser you can explicitly call out like this. When writing your code, whether it is JavaScript or even CSS, remember you have this in your arsenal.

Leveraging JavaScript Frameworks to Make Your Life Easier

Buyco — Fri, 28 Aug 2009 09:51:44 +0000

Framework Preface

Are you a hardcore JavaScript/AJAX programmer who knows no bounds? Do you spend meticulous hours perfecting your code so it works on all browsers? I used to be like that. I still am, but the only difference is that I now don’t spend hours testing my code. This is mostly attributed to the Prototype framework. Today I’m going to go through a few features and benefits of using a JavaScript framework over writing custom code yourself which may require testing and re-testing. Of course there is still the need for testing even when using a framework, but the difference is that there will be a lot of cross-browser compliance which is no longer needed.

There are other frameworks out there like jQuery and MooTools, but today we’ll start with what I’m more familiar with and with what I first started with. The documentation for Prototype is very thorough and I don’t want to explain everything, so I’ll start off with the major items which will change your JavaScript programming life!

JavaScript Framework? Double you tee eff?

You’re asking the right question. For the longest time I was always stuck in my own little JavaScript world where everything I coded was job-specific, customized, and with my own techniques. There were also little quirks which JavaScript had when rendering/running under different browsers/operating systems–these too were also solved using my own super secret techniques. What Prototype does, as well as other JavaScript frameworks, is give you the simple building-blocks which solve those quirks without you even needing to address them specifically. For example, if you want a div element to show or hide, you simply select the element and program the action. Sounds simple, but selecting that element requires some browser detection and compatibility verification. Let’s make a couple comparisons..

Make your life easier

Continuing on with the previous example, let’s select that div element given the following markup:


	Lorem ipsom dolor sit amet

We’re not going to think of any invokers right now, let’s just try to hide the div. Here is what the JavaScript may have looked like prior to using Prototype:

var objDivId = 'copy';
objDiv = document.layers ? document.layers[objDivId] : document.all ? document.all[objDivId] : document.getElementById ? document.getElementById(objDivId) : null;
objDiv != null ? objDiv.style.display = 'none' : '';

Obviously this isn’t the most efficient way of doing this, ideally I would create a function, but this is the shortest of shorthands to select and hide the div element while respecting all web browsers. Now let’s have a look at how this would look using the Prototype framework:

var objDivId = 'copy';
objDiv = $(objDivId);
$(objDivId) ? $(objDivId).style.display = 'none' : '';

For this example, the difference is quite apparent. By using the $() utility method we can quickly select that div element without the worry of what browser is being used. Now, let’s see what happens when we try to hide more than one element. First here’s the HTML markup:


	Lorem ipsom dolor sit amet


	This is a button


	This is a preview section

I’m going to create a function to hopefully help the cause of the traditional JavaScript code and see how it compares to using Prototype. First the oldschool method:

function getObject(id) {
	return document.layers ? document.layers[id] : document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
}
var objDivIds = new Array('copy','button','preview');
for (var i=0; i
And now the code for doing the same thing using Prototype:
$('copy','button','preview').invoke('hide');

Say what!? Yeah, it’s that easy. The traditional method utilizes a function which will return the object instance. We then iterate through the three div elements and update each one individually.
In the Prototype version, we’re using a couple of included extensions. First, the selector $() utility method returns an Enumerable list of objects, and the hide function is invoked across all of those objects. Easy fo-sheezy.
There are also other ways of selecting multiple elements within a page. You can do this by applying some CSS knowledge. For example, let’s attach a tracking script to all of the links within a page. We want to first select all of the A elements, then iterate through them by adding a short querystring tag to it’s href attribute.
var _TAG = '?source=buyco.ca';
$$('a').each(function(objA) {
	var url = objA.getAttribute('href');
	objA.setAttribute('href',url+_TAG);
});

This time I’m using the $$() utility method which will select a collection of elements. It takes in CSS-style selectors, such as: ‘a.external’ (select all a elements with the classname external), or ‘div#nav ul li’ (select all list items in the div with the id of ‘nav’). The full documentation on this can be found on the Prototype API documentation website.
Post face?
These are two short examples of a few things you can do (quicker) by utilizing a JavaScript framework. You will spend less time focused on browser compliance and more on the functionality and interactivity of your websites. It’s not a quick transition, but practice does make perfect! The documentation on the Prototype website is awesome, and I still find myself going back to learn new things. The main point I’m trying to get across here is that there are tools out there to make our lives (as web developers) a whole lot easier. Don’t get stuck in a place where you’re too comfortable or you’ll end up writing IE6-compliant code forever. Spend your time on more important things like user-experience, and wicked-awesome-flashy-effects. Your site visitors will thank you:)

Unobtrusive Image Rollover

Buyco — Thu, 19 Jun 2008 21:13:59 +0000

As web developers we spend so much time trying to make our sites cutting edge yet still functional with older browsers. It’s a curse! How great would it be to have a web browser standard that everyone could adhere to. Too bad life isn’t that simple. In today’s example we’re going to create a simple javascript image rollover. Yes, I know we’ve all done it before, but today we’ll do it right: unobtrusively.

There are many ways to do this, but in this example we’re just going to do a simple image replacement on mouseover. We’ll start off with the code for the image:

For your SEO enthusiasts and W3C fiends, I know there are missing attributes. We’re going to go as minimalist as possible to simplify this process. One attribute to note of is the “id” which we’ll be using to select this particular image. This is very important so that we can select this image element based on it’s id (DOM FTW!).

Next we want to apply an event handler to that object so that when the user moves the cursor over it, the image will change into something pretty! Internet explorer uses a different type of event handler code than other browsers (because if it didn’t, this would be way too easy). So we will ensure we do a little browser detection:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;

The window.addEventListener method is not used by Internet Explorer, so here we just single those browsers out. Next we want to create the code to attach a function to the mouseover (or onmouseover) event of the button. We haven’t created the image swapping functions yet, but keep in mind that we’ll call them imgOver and imgOut. That being said, lets create the event listeners and put them in a function called initMouseOver:

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}

Now you see why the image’s ID is important (remember: DOM FTW!). In the above snippet, when the function is called, event listeners are added to the image object. In addEventListener and attachEvent, the first value passed in is called the event type. For a mouse over event, these are valued at mouseover and onmouseover. The second value is the function to be associated with the event. In addEventListener the last value taken in is a boolean value which indicates whether or not to bind the event as it propogates to the image or as the event bubbles upwards from the image. This is usually set to false.

Next we need to create the functions to swap the images in and out as the object captures the events:

function imgOver(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOver = new Image();
 objImgOver.src = '/images/how-to/javascript/button-active.gif';
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOut = new Image();
 objImgOut.src = '/images/how-to/javascript/button-inactive.gif';
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

In both functions, we’re initializing the new image, then swapping it. This is not the most efficient way to do this since we’re recreating a new image object every time an event occurs. So let’s clean up all the code and put it into a separate javascript file. Here’s how it should look:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;
var eMoz = 'target';
var eIE = 'srcElement';
var objImgOver = new Image();
objImgOver.src = '/images/how-to/javascript/button-active.gif';
var objImgOut = new Image();
objImgOut.src = '/images/how-to/javascript/button-inactive.gif';

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}
function imgOver(e) {
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

*Deep breath* still with me? That’s essentially it! All you need to do now is to include the javascript file in your HTML and ensure the initMouseOver() function is called when the page loads. Simply add onload=”" to your body tag and it should look a little something like this:

That’s it! No wait–that’s only for one image. What if we need to set this up for multiple images? Well, glad I asked because there are several ways of accomplishing this. If you think you can take more of this, carry on to one of the next tutorials or download all the work files for this one:

Example: Unobtrusive Image Rollover

Next step: multiple buttons, preloading, and optimization