Problem solve Get help with specific problems with your technologies, process and projects.

How to use jQuery to solve Javascript browser compatibility problems

Javascript compatibility between Firefox, Internet Explorer and other browsers can make Ajax and Javascript effects a headache. Each browser does things just a bit differently, forcing Web developers to check which browser the user has and branch their code into if-else statements accordingly. Learn how to use the Javascript library jQuery to solve browser compatibility problems for you.

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 with comments, questions or suggested topics or tools to review.

Dig Deeper on ASP.NET and Ajax development

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.