Monthly Archives: February 2010

jQuery Slide-Down Language Selector

Posted on by
7

A site I worked on recently had an international link, and when the user clicked on it, the whole page was supposed to slide down and reveal a language picker. I found some jQuery to slide the page down, but it relied on the language picker being the first div on the page. For SEO reasons, I didn’t want that, so I put the language picker code into the normal site navigation, and then used jQuery to move everything into position. Here’s how it works:

HTML

<body>
<div id="placeholder-regions"></div>
<div id="container">
  <h1>Page Title</h1>
  <ul id="utilities">
    <li><a href="#">Utility Link One</a></li>
    <li><a href="#">Utility Link Two</a></li>
    <li id="util-int"><a href="#">International</a>
      <div id="util-regions">
        <h4>Select Regional Site</h4>
        <ul>
          <li><a href="#">Europe</a></li>
          <li><a href="#">Australia</a></li>
          <li><a href="#">Deutchland</a></li>
        </ul>
      </div>
    </li>
  </ul>
...
  <p>Page content...</p>
</div>
</body>

Two things to notice here. First, there’s a blank placeholder div, which is the first bit of markup inside the BODY element. Second, the International code is all included in the regular navigation as an LI element. That way, users without javascript still get a functional site, and the search engine spiders can see the most important content, like the headlines, at the top of the page.

Note these two IDs, as well. #util-int is the list item that contains the link to show and hide the internation section. #util-regions is the div that contains the international section, which we want to show and hide.

jQuery

// scroll the page to display the international section
$('#util-int').toggle(function() {
  $("#util-regions").remove().prependTo("#placeholder-regions").slideToggle('swing');
}, function() {
  $("#util-regions").slideToggle('swing');
});

This jQuery is pretty compact, but in plain english, what this says is when util-int is toggled (clicked), then move #util-regions from the navigation into the placeholder DIV at the very top of the page, and also show and hide it. The slideToggle() code is what shows and hides the international section, and the remove() and prependTo() code is what moves the code into the placeholder DIV.

CSS

#util-int {
  z-index: 1000;
}
#util-regions {
  display: none; /* hidden by default, will be shown by jQuery */
  width: 948px;
  margin: 0 auto;
  height: 60px;
  position: relative;
}
#placeholder-regions {
  background: #666;
}

Some important things to note: #util-int has a very high z-index value to make sure it appears on top of anything else. #util-regions has a width and height, and is position: relative so that its contents can be absolutely positioned within, and is also hidden by default (the jQuery will show it later on). #placeholder-regions has a background, but no height, padding or margins, so that when we show and hide #util-regions, it will collapse gracefully.

You can see a version of this code in action over here.

jQuery Popup Footnotes

Posted on by
2

A recent site I worked on had footnote references throughout the body copy, and a corresponding list of footnotes at the bottom of the page. That’s easy enough to mark up, but the client also wanted the footnote to display it a little tooltip-style popup when you moused over the footnote reference.

I didn’t want to duplicate the footnotes in the markup, so I used jQuery to copy the contents of the footnote and display it. Here’s the code.

HTML

<div id="content">
  <p>Sentence with a footnote<sup><a href="#footnote3">3</a></sup>.</p>
</div>
...
<div id="footnotes">
  <p id="footnote1"><sup>1</sup> This is footnote number one.</p>
  <p id="footnote2"><sup>2</sup> This is footnote number two.</p>
  <p id="footnote3"><sup>3</sup> This is footnote number three.</p>
  <p id="footnote4"><sup>4</sup> This is footnote number four.</p>
</div>

Note that the href on the footnote reference must match the ID on the footnote, so that jQuery can associate them properly. As a bonus, in a non-JS environment, the footnote references will just link down to the proper footnote.

jQuery

// add markup to all footnote references
$("sup a").append("<span><em></em></span>");
// on hover, show the popup and add the matching footnote
$("sup a").hover(function() {
  // show the popup
  $(this).find("span").fadeIn();
  // use our href to find the apprpriate content from the footnote list
  var content = $(this).attr("href");
  var content = $(content).html();
  // copy the footnote content into the popup
  $(this).find("span em").html(content).append("<br /><br />All references are listed at the bottom of the page.");
}, function() {
  // hide the popup on mouseout
  $(this).find("span").fadeOut();
});

This looks much more complicated than it is. In plain english, we add some markup (a span) to each footnote reference, and then use its href to find the correct footnote from down below, and copy its content into the span we just created. Then we show and hide the span when the user hovers over the footnote reference.

CSS

sup a {
  position: relative;
}
sup a span {
  display: none; /* hidden by default */
  width: 294px;
  height: auto;
  position: absolute;
  left: -125px;
  bottom: 1em;
  /* sliding door background image - bottom half on span, top half on em */
  background: transparent url("/images/bg-footnote-bottom.png") no-repeat left bottom;
  padding-bottom: 13px;
  cursor: default;
  z-index: 999;
  text-decoration: none; /* other wise, this is underlined like a link */
}
sup a span em {
  display: block;
  font-style: normal;
  background: transparent url("/images/bg-footnote-top.png") no-repeat;
  padding: 20px 10px 15px 20px;
}

Nothing complex here. We’re using a vertical sliding doors technique to allow the background on the popup to grow to accommodate varying amounts of text. The only other hiccup is to remember to override your link styles within the span, since the browsers will treat your popup as part of the link.

You can see a version of this code in action over here.