Writing JavaScript specific CSS
I wrote an article recently recommending Using jQuery to write JavaScript specific CSS, I've since change my mind on this approach. The approach I've moved to is similar, but doesn't rely on a framework and allows more flexibility like moving all of my JavaScript includes to the bottom of the page for better performance.
In your html template or page add a nojs class to your html node and a script tag in the head section below your title changing the className to js:
<html class="nojs"> <head> <title>My Title</title> <script>document.documentElement.className = "js";</script>
Now you can write CSS like this:
.nojs a.myclass {color:red}
.js a.myclass {color:black}
a.myclass2 {color:blue}In this very simple example all of your non-javascript users would see links with a class of myclass as red and all javascript enabled users would see the links with the color black. Both javascript and non-javascript users would see the links with the class myclass2 as blue.
This very simple example opens hundreds of possibilities for the way you style your site. You could actually display and hide content based on whether javascript is enabled or not, including buttons and links or any element on the page. You could include text for Search Engines and Screen Readers that your regular users might not need to see because the nature of the content could be for SEO or descriptive purposes for non-javascript users. You could also use it to enhance your suckerfish CSS menus with a hoverIntent when javascript is enabled making your menus a little more user friendly.
This is an improvement on the previous method I used because it doesn't depend on a JavaScript framework, it allows you to put off loading all of your JavaScript until the bottom of the page, improving performance, and allows you to utilize CSS to hide, disable, or fade in elements of the page that you don't want to be displayed until the document has been loaded and is ready to perform all that RIA functionality you've added to your app.
Prevent double submit with jQuery
Another great "little" solution with jQuery. Needed a simple way to protect all the forms on our site from being double submitted. There was an attempted solution in place on our app, that added an onsubmit to every form with a function above it called ignoreDoubleSubmit that tried to trap the event of the button was clicked and not allow it to be clicked again. The problem was the event for the button wasn't present when the form was submitted so it would silently error out with a blink in the Firebug console. After weeks of fighting to have it fixed, I removed the code and reimplemented a working solution with jQuery
$('form').submit(function(){
$(':submit', this).click(function() {
return false;
});
});
Suckerfish DHTML dropdown menu with JQuery
DHTML dropdown menu's have been greatly improved in terms of accessibility, standards compliance, and weight using the Suckerfish technique of building pure CSS-based menus and then attaching a small javascript that allows Internet Explorer 6 to mimic the CSS hover method. Once the die-hards hanging onto IE6 let go, we won't have to worry much about this anymore, but for now it looks like it's going to linger for a bit.
I've been using JQuery for a bit now for all of my DOM manipulation and have found great savings in the amount of JavaScript code I have to write and the ease in which it can be employed in a CSS based site.
While this is generally the last piece to get IE working with your menu's, here's the JQuery code to replace the suckerfish Javascript, which is being used on this site now. If you're familiar with suckerfish, the JQuery code should be readable enough to figure out what's going on.