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.
Enable JavaScript specific CSS with one line of jQuery
jQuery is by far my favorite JavaScript framework in terms of simplicity and just pure DOM power. I picked up a little trick at a conference quite a few months back and improved upon it and thought it could benefit anyone that believes in the mantra of progressive enhancement. Here's the line of code that will change the way you develop your applications.
$("html").removeClass("nojs").addClass("js");
Obviously jQuery is a requirement here. The other thing you'll need to do is add a class of nojs to the html node of all of your documents/templates.
<html class="nojs">
Now you're ready to change the way you write your CSS. I'm aware that Yahoo/YSlow recommend that you stick your JavaScript at the bottom of the page, but this little trick won't work as well unless jQuery and the snippet above are in the head of the html document. Now what this buys you is the ability to style your document with separate elements for javascript enabled users, non-javascript users and common elements that both will need. You'll be able to hide/show substitute elements in the page that are dynamic in nature so that you can successfully implement a site using progressive enhancement, meaning that users with javascript disabled will still be able to use your site but without all the bells and whistles. This also prevents the flicker that you see on page load when you modify elements via DOM manipulation using JavaScript.
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.
I realize this technique could be implemented with just about any JavaScript framework, jQuery just happens to be my framework of choice and this technique has definitely given us much capability to target javascript/non-javascript users and unobtrusively progressively enhance our website.
Please see my latest article on implementing this without a JavaScript framework.
Setting your tabindex on your html forms automatically with jQuery
The tabindex is absolutely necessary for controlling the tab order through a really long form, from a usability and accessibility standpoint. This is probably not the preferred way to do this, you should be setting the tabindex attribute on all of your input elements in your html. Now if you work with lazy developers, that often forget to set the tabindex, you may find this to be an acceptable solution.
Quick walk through:
- The outside function is your document ready function in jQuery (explaining for those new to jQuery)
- The tabindex variable is there to keep track of the index across multiple forms on the page (another reason you may want to use something like this, if your view code is modular and split into a bunch of snippets or includes)
- The select grabs all the input and select elements on the page we then exclude the hidden input boxes
- We then set the tabindex and increment the variable
$(function(){
var tabindex = 1;
$('input,select').each(function() {
if (this.type != "hidden") {
var $input = $(this);
$input.attr("tabindex", tabindex);
tabindex++;
}
});
});
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;
});
});
Stock quote and chart from Yahoo in Java
I was recently in need of a stock quote web service in order to display quote information and charts for a corporate website I was working on, so I started looking around for something, free of course. I kept reading that the most common example of web as a service is the stock quote example, but I didn't really find any examples that gave me a warm and fuzzy, everyone seemed to be scraping the html from a page. Doesn't seem to be much out there, in the way of quote services for free, but I did come across a yahoo download service and a few half written examples, where you can fetch quote information from Yahoo in .csv format, with a 20 minute delay of course. I've also added a 1-day small chart and a 5-day large chart image by passing the symbol into Yahoo's basic chart image url.