Does your site have a consistent user experience? Twelve ways jQuery can “save the day”

Faced with some last minute global changes? Having problems implementing a feature in one of the 12 browsers you are targeting? Do you want to ensure that your site has a consistent experience regardless of the browser your users have? These are some of the realities of Web development.

After launching a brand guidelines Web site for a client, I was on our company intranet wiki documenting some of the useful JavaScript snippets that were used in this solution when it struck me just how many times jQuery "saved the day" on this project. I wanted to share in the hope that these tips would help you out!

1. In CSS, :hover doesn't work in Internet Explorer 6 (IE6) on a dt element, so we just added a custom function:
   $("#relatedfaqs dt").hover(function() { $(this).css("text-decoration", "underline"); }, function () { $(this).css("text-decoration", "none"); });

2. The site's primary navigation's drop-down menus appeared behind some of the body content in various browsers (z-index issues), so we just moved it to be last in the HTML:
   $("#primary-nav").appendTo("#footer");

3. Certain tool links needed to open in new, specifically sized windows globally across the site, regardless of where the links appeared:
   $("a[href$='chooselogo/default.aspx']").click(function() { window.open(this.href, null, 'width=840,height=540,resizable=yes,scrollbars=yes,status=yes'); return false; }); $("a[href$='createad/default.aspx']").click(function() { window.open(this.href, null, 'width=840,height=655,resizable=yes,scrollbars=yes,status=yes'); return false; });

4. The site was about to go live (in 10 minutes) when it was decided to add an "Email This Page" functionality:
   $("a[title='Email Page']").attr("href","mailto:?subject=" + encodeURIComponent("Join the Brand network") + "&body=" + encodeURIComponent(document.title + ":\n\nhttp://www.companyx.com" + window.location.pathname + window.location.search));

5. The Enter key needed to submit on all search fields, regardless of where the .NET search form was nested:
   $("input[id$='txtSearch']").keydown(function(e) { if (e.keyCode == 10 || e.keyCode == 13) { $("input[id$='butSearch']").click(); return false; } });

6. IE had difficulties printing multi-column layout pages without cropping them, we needed to break before the columns and the page-break-before CSS attribute wasn't working correctly:
   $("#middle #content div.column").prev("p").css("page-break-after", "always");

7. We needed to globally add "close window" buttons: $("a.close, input.close, button.close").click(function() { window.close(); return false; });

8. We needed to fix a bug feature (http://support.microsoft.com/kb/316495) in .NET repeaters that contain radio buttons:
   $("fieldset.repeater input:radio").click(function() { $(this).parents("fieldset.repeater").find("input:radio[checked]").attr("checked", "").end(); this.checked = "checked"; });

9. Safari 2.x (note: version 2.xx is actually build 4xx) had issues with a DHTML photo gallery on home page:
   if ($.browser.safari && (navigator.appVersion.indexOf("Safari/4") >= 0)) { $("#scroll-bar").css("margin-top", "-335px"); }

10. Captions in the DHTML photo gallery were supposed to be the same width as their corresponding images, even though each image had a different width:
    $("img.galleryImage").load(function() { $("p.galleryCaption").css("width", this.offsetWidth + "px"); });

11. We needed to set class for certain black and white images in one of the tools so that the text colors could be changed accordingly:
    if ($("#review-container img:first").attr("src").match(/\/bw\//)) { $("#review-container").append("<div class='bw'></div>"); $("#review-container img").css("margin-left", "1px"); }

12. We also fixed some bugs on a certain page on their intranet that had serious JavaScript issues in non-IE browsers...

Using jQuery the 518 original lines of code were reduced to 370, the file size was reduced by 4KB and the new code worked across all browsers. Out of all of the tips, #4 was my favorite since it literally saved my day. All in all, the jQuery() function was used 216 times in our client's brand guidelines project. If you are interested in learning more about jQuery, I found the Visual jQuery guide (visualjquery.com) and the jQuery Docs Selector reference (http://docs.jquery.com/Selectors) very useful during this project. Thanks jQuery! Full disclosure: John Resig (ejohn.org), the creator of jQuery, is a former BrandLogic co-op so we may just be a bit biased.