Monday, December 26, 2011

jQuery just makes life too easy

One of my most popular pages on my web site is the history of the world timeline. I've always wanted to make if configurable so people could select just certain topics, like "military" or "science" and then concentrate on the topics they love. I did a little research and jQuery just makes this so easy.

This just takes three steps:
1. Include jQuery. We try to get it from Google, but if Google fails us, we get it from a local cache. I got this method from Paul Irish and his excellent HTML5 Boilerplate.
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

2. At the top of the page in a form we have this scrap of JavaScript which just toggles the visibility of rows which have the class of "military".
  <input type="checkbox" id="military" checked onclick="$('.military').toggle();">
  <label for="military">Military</label>

3. Lastly we add the class "military" to the row with that topic.
  <tr class="military"><td>70</td><td>After 6 month siege the Romans 
under the direction of Titus destroy Jerusalem killing one and a half million Jews.</td></tr>
Now the user can toggle on categories at will.
One of the nice things about this is that the work is all done on the client side, so the server is untaxed and the user has faster response time.

No comments: