Unobtrusive JS

keep your stuff seperated from your other stuff

Wednesday, December 17th, 2008

RUI is not accessible? Check out Yahoo’s new Currency Converter

Category: Accessibility, Ajax, RichTextWidget, Unobtrusive JS, Yahoo!

I am proud to be able to announce the new currency converter on Yahoo finance. Why? Because it is a perfect example of how a complex rich user interface can be built in an accessible manner. As the main developer, Dirk Ginader explains: About 9 months ago my fellow co-worker, the User Experience Designer Graham Read the rest…

Posted by Chris Heilmann at 12:23 pm

4.4 rating from 39 votes

Tuesday, November 4th, 2008

Weed Out Obtrusive JavaScript

Category: JavaScript, Testing, Unobtrusive JS

By now, most developers have (or should have) come to realize how important it is to build unobtrusive JavaScript code. Apart from ensuring a better user experience, today’s tools and libraries make it extremely easier to embrace this practice. Continuing down the path of providing developers good tools, Robert Nyman of DOMAssistant fame has updated Read the rest…

Posted by Rey Bango at 11:52 am

3.1 rating from 16 votes

Wednesday, May 7th, 2008

The seven rules of pragmatic progressive enhancement

Category: JavaScript, Tutorial, Unobtrusive JS, Usability

I’ve been talking about progressive enhancement here before and got a lot of flak in comments about it. It seemed that there was a general misunderstanding of progressive enhancement and unobtrusive scripting as a “passing fad” or “backward facing rather than being innovative”. I was asked by a design agency in London to go there Read the rest…

Posted by Chris Heilmann at 5:58 pm

4 rating from 21 votes

Wednesday, April 23rd, 2008

Embed your data- in HTML 5

Category: Dojo, HTML, Standards, Unobtrusive JS

Simon Willison pointed out the part of the HTML 5 spec that discusses a way to add attributes to HTML elements for your own needs via data-. For example, a spaceship for a game: < View plain text > HTML <div class="spaceship" data-id="92432"     data-weapons="laser 2" data-shields="50%"     data-x="30" data-y="10" data-z="90">  <button class="fire" Read the rest…

Posted by Dion Almaer at 7:55 am

4.4 rating from 44 votes

Monday, April 14th, 2008

Event Delegation for blur and focus

Category: Browsers, JavaScript, Standards, Unobtrusive JS, Usability

Over at, Peter-Paul Koch is researching if Event Delegation which works splendidly with click events is also possible for blur and focus. Event Delegation means that you piggy-back on the behaviour of browsers to report events on child nodes up the tree to their parents. Instead of applying event handlers to each element you Read the rest…

Posted by Chris Heilmann at 9:20 am

3.3 rating from 37 votes

Wednesday, February 13th, 2008

Is easy implementation the same as good code?

Category: Accessibility, Examples, JavaScript, Security, Unobtrusive JS

I’ve just come across a solution for badges on web sites that makes it terribly easy for implementers. The idea is that the implementer could add a badge wherever they want in an HTML document, choose the look and feel and add a message to be shown. The implementation code is the following: < View Read the rest…

Posted by Chris Heilmann at 7:45 am

3.2 rating from 26 votes

Tuesday, February 5th, 2008

Canvas Pie Chart from datatable

Category: Canvas, Unobtrusive JS

I love it when a plan comes together (removes cigar): After I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven charts: His solution shows in a few lines not only Read the rest…

Posted by Chris Heilmann at 1:24 pm

3.5 rating from 29 votes

Monday, January 28th, 2008

Less maintenance code tutorials with Ajax Code Display

Category: Examples, HTML, JavaScript, jQuery, Unobtrusive JS

One of my main annoyances with writing code tutorials is that you need to maintain code in several locations: the code itself and the examples in the tutorial document. This is not really a problem when you can use a scripting language or print out the tutorials from a CMS, but when you just want Read the rest…

Posted by Chris Heilmann at 11:18 am

4.2 rating from 25 votes

Thursday, November 15th, 2007

Unobtrusive JavaScript – Rules to work by

Category: Accessibility, JavaScript, Unobtrusive JS

From what I’ve seen, it appears that many developers, especially those new to the JS space are somewhat confused by the reasons for developing JS in an unobtrusive fashion. Typical arguments that I’ve heard are: It takes too long to develop If they don’t have JavasScript, then they’re out of luck We shouldn’t have to Read the rest…

Posted by Rey Bango at 8:46 am

3.8 rating from 46 votes

Friday, May 18th, 2007

Automating JS Behavior Registration

Category: JavaScript, Library, Unobtrusive JS

Gabriel Handford has created a behavior.js script that allows you to unobtrusively automate Event.observe’tion. Magic is in naming conventions, so that: < View plain text > HTML <a class="bvr-observe-click-xhrTheFunction" href="/the/href">The link</a> takes care of: < View plain text > javascript Event.observe(theLinkElement, "click", function(event) { xhrTheFunction(event) });

Posted by Dion Almaer at 12:04 am

3.2 rating from 40 votes

Wednesday, May 16th, 2007

OpensIFR: Tool to generate font files

Category: Flash, UI, Unobtrusive JS

OpensIFRr is a new tool that enables you to create sIFR flash files that represent fonts that you need. Ben and I demonstrated sIFR at JavaOne last week. We took the typography of and spruced it up in an unobtrusive way. Here is a simple hello world recap of how to use sIFR: < Read the rest…

Posted by Dion Almaer at 5:07 am

3.5 rating from 36 votes

Friday, April 20th, 2007

Unobtrusive JavaScript, Microformats, and the Google AJAX Feed API

Category: Examples, JavaScript, Unobtrusive JS

Over on my personal blog I discussed Unobtrusive JavaScript, Microformats, and the Google AJAX Feed API. The posting discusses an example that creates a Feed Billboard using the Google AJAX Feed API released the other day. Here is the outcome: The fun part was creating a microformat that would degrade nicely: < View plain text Read the rest…

Posted by Dion Almaer at 9:55 am

3.4 rating from 29 votes

Thursday, April 19th, 2007

Canvas Corner 1.0

Category: Canvas, UI, Unobtrusive JS

Christian Effenberger was inspired by the reflection code and decided to implement Corner.js. The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas. If you wanted to add a shaded corner you would say: < View plain Read the rest…

Posted by Dion Almaer at 8:27 am

4.4 rating from 94 votes

Tuesday, April 3rd, 2007

Cruiser Behaviors Library

Category: CSS, JavaScript, Library, Unobtrusive JS

Dan Yoder has created the Cruiser Behaviors Library, extensible stylesheets for decorating DOM elements with interfaces and event handlers. Cruiser uses Prototype, and is inspired by the Behaviour library itself. A simple example shows the library in action. A new behaviour of “strike out a link with the special class of ‘demo’” is added to Read the rest…

Posted by Dion Almaer at 7:47 am

3.6 rating from 31 votes

Friday, March 16th, 2007

Unobtrusive Control Tabs

Category: JavaScript, Library, Prototype, Showcase, Unobtrusive JS

Ryan Johnson has created unobtrusive JavaScript tabs called Control Tabs. The project uses Prototype / Scriptaculous. You create the tabs using standard anchors and named elements, so it’s completely accessible to non JS browsers. Example < View plain text > HTML <script>     Event.observe(window,’load’,function(){         $$(‘.tabs’).each(function(tabs){           Read the rest…

Posted by Dion Almaer at 4:15 am

4.1 rating from 43 votes

Friday, February 16th, 2007

Understanding and solving the JavaScript/CSS entanglement phenomenon

Category: Accessibility, Unobtrusive JS

Ara Pehlivanian talked about the graceful degradation myth awhile back, and since then has come up with a simple solution to his problem. The key is setting CSS styles aimed at JS enabled browsers that overwrite the initial state in the document that does the right thing for someone who isn’t coming in via a Read the rest…

Posted by Dion Almaer at 12:01 am

4 rating from 27 votes

  • Page 1 of 2
  • 1
  • 2
  • >