jQuery Saved The Day 12 Times On A Project At Work

We've recently delivered a brand guidelines web site for CompanyX. I was documenting some of the useful JavaScript snippets that were used on our company's wiki today, when I realized just how many times jQuery "saved the day" on this project. Here they are in no particular order:

#1 In CSS, :hover doesn't work in IE6 on a dt, 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 nav's drop-down menus had z-index issues, so I just moved it to be last in the HTML:

$("#primary-nav").appendTo("#footer");

#3 Certain tool links needed to open in new appropriately 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 going live in 10 minutes and we just realized that the "Email This Page" functionality has never been programmed:

$("a[@title='Email Page']").attr("href","mailto:?subject=" + escape("Join the Brand network") + "&body=" + escape(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 page-break-before CSS wasn't working correctly:

$("#middle #content div.column").prev("p").css("page-break-after", "always");

#7 We needed easy way for global "close window" buttons:

 $("a.close, input.close, button.close").click(function()
  {
    window.close();
    return false;
  }
);

#8 I needed to fix a

bugFEATURE 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 (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 the 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

if ($("#review-container img:eq(0)").attr("src").match(/\/bw\//))
{
  $("#review-container").append("<div class='bw'></div>");
  $("#review-container img").css("margin-left", "1px");
}

#12 We were also contracted out to fix some bugs on their intranet. A certain page had serious JS 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.

#4 was my favorite since it literally saved my day, plus it just goes to show how little that stupid feature is used. All in all the $() function was used 216 times in the CompanyX brand guidelines project. I think that the Visual jQuery guide and the CSS/XPath Selector reference were the most useful to me during this project. Thanks jQuery!

posted @ 3:50 PM | Feedback (0)

Vote

In the right sidebar of my blog I've placed a little NewsVine app that'll track presidential votes across various sites. You can vote once a month. As of right now Obama's winning.

posted @ 12:01 AM | Feedback (0)