Tip

How to use jQuery to solve Javascript browser compatibility problems

Anybody who's ever had to code JavaScript for public access sites knows what a headache it can be to make that scripting language behave as needed in IE, Firefox, Opera, Safari and Chrome. I'm sure others have wished, as I have, for a one-script-fits-all form of JavaScript that would cure the browser compatibility headache once and for all. I can't yet say that jQuery is a universal panacea for this particular problem, but I can say it's handled everything I've thrown at it so far and has let me (mostly) quit worrying about who's using which browser to visit my Web pages.

I'd like to share three great jQuery capabilities featured in Steven Holzner's jQuery Visual QuickStart Guide, which I recently reviewed for the publisher. Each starts with a link to a sample page that shows off the corresponding jQuery feature; where code samples aren't available on the page, you can of course take a look at the page's source.

  • Accordion style menu: Lets you present any number of distinct text areas on a single page, and expand/contract individual areas to maximize display space and information reach. This is a great visual tool for technical documentation. The jQuery Accordion Menu Tutorial has all the coding details (which are quite simple, actually).
  • Datepicker plug-in: This nifty plug-in provides an easy, convenient way to include an attractive and highly configurable date picker (much like the month-by-month display in Outlook Calendar's left-hand column or the Vista Calendar gadget). The jQuery datepicker (options) API page takes you through everything you need to know here.
  • Tabs widget: This great tool lets you break content up into tabbed page content. You can stack multiple sets of content on a single page , and you can even update pages to add or remove tabs on the fly. The UI/API Tabs page has pages upon pages of information for this fabulous tool.

As part of my testing for a book on jQuery I'm reviewing, I had to check these and all the other sample pages in IE 7 and 8, Firefox, Opera, Chrome and Safari. I never hit a single hitch along that path related to browser differences, interestingly enough. What an eye-opener this was for me, and what a pleasure it is to work with jQuery.

Visit the jQuery site for more information, tutorials, examples and more. You won't be sorry.

Ed Tittel is a full-time writer and trainer whose interests include XML and development topics, along with IT Certification and information security topics. E-mail Ed at etittel@techtarget.com with comments, questions or suggested topics or tools to review.

This was first published in May 2009

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.