Usable Development and Design

What are the disadvantages of unobtrusive Javascript?

There are so many articles written about why you should use unobtrusive javascript but when I was asked why one shouldn’t or better, what are the disadvantages of using unobtrusive javascript I really was stumped.

So the one answer? Just imagine if you were given front-end code, written beautifully with CSS, XHTML, Unobtrusive javascript, no tables, no frames with rich interaction. Now you are trying to debug or enhance some piece of functionality and all you see are classes and id’s. Well, without any documentation the only thing you could really do is search and hope to find a matching value to the id. Right, that doesn’t sound like fun to me either.

I recently stumbled upon a great solution to a problem that I’ve seen for years, smooth image resizing in a web-browser or fluid images. The article was written by Ethan Marcotte (Unstoppablerobotninja.com). Most modern browsers handle resizing of images very well, including FF3, Chrome, Safari and IE8. Not surprising the browsers that don’t do a good job include IE 7 and below. Via some JavaScript, CSS and a special Microsoft CSS property filter (AlphaImageLoader), resizing looks good!

Try opening the links below in IE6 or IE7. The first link is the original and the second includes fixed image scaling.

Before Fix …. After Fix

Here is a before and after zoomed in image of the fix.

I will continue testing this technique with more images and text of different contrasts and colors but as of now, the technique looks very promising.

There was a project I was working on where I needed to find a way to drag-and-drop rows of a table, basically resort the table rows. Now there were plenty of scripts for doing this within lists, but not so many for actual tables. The final solution I used was from an unexpected source, Isocra Consulting, who setup a jQuery plugin for this functionality. The library, TableDnD plugin, is fairly small, about 15K and was very easy to setup. The plugin included everything I needed without being too feature rich:

onDragStyle

This is the style that is assigned to the row during drag. There are limitations to the styles that can be
associated with a row (such as you can’t assign a border—well you can, but it won’t be
displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
a map (as used in the jQuery css(...) function).

onDropStyle

This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
to what you can do. Also this replaces the original style, so again consider using onDragClass which
is simply added and then removed on drop.

onDragClass

This class is added for the duration of the drag and then removed when the row is dropped. It is more
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
stylesheet.

onDrop

Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
and the row that was dropped. You can work out the new order of the rows by using
table.tBodies[0].rows.

onDragStart

Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
table and the row which the user has started to drag.

scrollAmount

This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
FF3 beta)

Below are screenshots of the drag-and-drop before and after. As you can see I applied a yellow style to the row I am actively dragging and when dropped, the row flashes green for a second and the zebra-stripping auto-corrects itself.

This tutorial shows you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

http://nettuts.com/javascript-ajax/jquery-style-switcher/
by James Padolsey

If the user has Javascript enabled, a very slick fade-in and fade-out affect is shown with a loading icon. If Javascript is disabled, the style-sheet switches and the same end result is seen.

DOMTool v1.1 | Muffin Research Labs

Here’s a great tool that will generate the necessary DOM scripts to create whatever HTML you want

http://muffinresearch.co.uk/code/javascript/DOMTool/

The Prototype library, including script.aculo.us and a few others are a critical part of my development toolbox. These Javascript frameworks provide the foundation for creating interactive, usuable, fast and light-weight web-applications. Below are just a few examples of functions I use all the time.

1. Ajax.Request
   Take a look at the two functions below. Using the Ajax.Request method you can call a processing file, all that processing file needs to do is output some text who response is passed to the onComplete function, displayProcessIt() and from there, you can generate a complete page of data, hide/show lists elements, divs, whatever you need.

   function processIt(){
     var url = '/path/processing_file.aspx';
     var pars = 'param1='+param1Val;
     var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: displayProcessIt });
   }
   function displayProcessIt(strData){
     var strResponse = strData.responseText
     // Do whatever you want with this data on the client
   }
   

   All I know is after I learned how to use this one piece of functionality, my development become that much easier. That’s not to say this technique is ground-breaking or new, I know I’ve written enough “kind-of-does-this” code over the years.

2. Element.show(), Element.hide(), Element.toggle()

   Yes, I know these are very self-explanatory, but these are three sweet gems. All you do is create a pointer to an element by it’s ID and there you go, hide, show, toggle, beautiful…

   function doSomething(e1){
     Element.toggle($(e1));
   }
   

   Using $ creates a reference to that object by id and toggle…well, it toggles the display of the referenced element.

While building multi-language content delivery and e-commerce sites, you may run across the need to only allow Roman characters. By using the javascript function below, you can verify the unicode value for each character from some text passed to the function. If the unicode value is greater than 256, then throw an error or deny a form submission.

function isUnicode() {
    isTrue=false;
    someText = document.form.fieldname.value;
    textSize = someText.length;
    for (i = 0; i < textSize; i++) {
        if (someText.charCodeAt(i)  > 256) {
            alert("This is not a Roman Character!");
            isTrue=true; break;
        }
    }
    return isTrue;
}