Project listings for the new benalman.com

http://benalman.com/

HTML

<h3>jQuery</h3>
<ul class="projects">
  <li>
    <a href="/jquery-hashchange">Hashchange event</a>
    <i> - A Cross-browser HTML5 onhashchange event.</i>
    <div class="meta">
      <em>Last updated on <span data-date="1279807200">Jul 22, 2010 at 10:00am</span></em>
    </div>
    <div class="reveal">
      <p>This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.</p>

      <p>While this functionality was initially tied to the <a href="/jquery-bbq">jQuery BBQ</a> plugin, the event.special window.onhashchange functionality has now been broken out into a separate plugin for users who want just the basic event &amp; back
        button support, without all the extra awesomeness that BBQ provides.</p>
    </div>
  </li>
  <li>
    <a href="/jquery-throttle-debounce">Throttle / debounce</a>
    <i> - Sometimes, less is more!</i>
    <div class="meta">
      <em>Last updated on <span data-date="1267900726">Mar  6, 2010 at  1:38pm</span></em>
    </div>
    <div class="reveal">
      <p>jQuery throttle / debounce allows you to rate-limit your functions in multiple useful ways. Passing a delay and callback to <code>$.throttle</code> returns a new function that will execute no more than once every <code>delay</code> milliseconds.
        Passing a delay and callback to <code>$.debounce</code> returns a new function that will execute only once, coalescing multiple sequential calls into a single execution at either the very beginning or end.</p>
    </div>
  </li>
  <li>
    <a href="/jquery-outside-events">Outside events</a>
    <i> - Events that trigger on... everything else.</i>
    <div class="meta">
      <em>Last updated on <span data-date="1267303936">Feb 27, 2010 at  3:52pm</span></em>
    </div>
    <div class="reveal">
      <p>With jQuery outside events you can bind to an event that will be triggered only when a specific &ldquo;originating&rdquo; event occurs <em>outside</em> the element in...

CSS

ul.projects,
ul.projects li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.projects li,
ul.projects .meta,
ul.projects .reveal {
  -webkit-transition: 0.1s ease-out;
  -webkit-transition-delay: 0.1s;
  -webkit-transition-property: height, color, background, border, box-shadow;
}

ul.projects li,
ul.projects .reveal {
  border: 1px solid rgba(0, 0, 0, 0);
}

ul.projects li {
  position: relative;
  z-index: 0;
  left: -4px;
  right: -4px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

ul.projects .meta {
  color: #ccc;
  font-size: 70%;
}

ul.projects .reveal {
  background: #fff;
  font-size: 80%;
  padding: 3px 4px 0;
  position: absolute;
  left: -1px;
  right: -1px;
  height: 0;
  overflow: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

ul.projects .reveal a {
  color: inherit;
  text-decoration: none;
}

ul.projects .reveal>* {
  margin: 0.2em 0 0.4em 0;
}

ul.projects li.hover {
  z-index: 1;
}

ul.projects li.hover .meta {
  color: #AA9A89;
}

ul.projects li.hover .reveal {
  border-color: #000;
  border-top: none !important;
}

ul.projects li.hover,
ul.projects li.hover .reveal {
  background: #fed;
  border: 1px solid #000;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}

body {
  color: #333;
  font-family: Georgia;
  width: 32em;
}

h1,
h2,
h3,
h4 {
  font-family: "Gill Sans";
  font-weight: 400;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 250%;
  margin-bottom: 0;
}

h2 {
  font-size: 180%;
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 120%;
}

p {
  line-height: 1.4em;
}

a {
  color: #ff7700;
  -webkit-transition: color 0.1s linear;
}

a:hover {
  color: #aa3300;
}

code,
pre,
.sh-link {
  font-family: "Consolas", "Courier New", Courier, monospace;
  font-size: 0.9em;
}

code {
  background: #eee;
  border: 1px solid #aaa;
  color: #555;
  padding: 4px 0.2em 1px;
  webkit-border-radius: 4px;
}

JavaScript

$(function() {

  $('ul.projects').each(function() {
    var z = 1;

    $(this).delegate('li > a', 'hover', function(e) {
      var hover = e.type == 'mouseenter',
        li = $(this).parent(),
        reveal = li.find('.reveal');

      // By always increasing the z-index of the currently hovered element,
      // odd overlapping issues on hover out are eliminated.
      li.css('z-index', ++z).toggleClass('hover', hover);

      // Because -webkit-transition won't animate from 0 to auto, a numeric
      // height has to be used!
      reveal.css('height', hover ? reveal.css('height', 'auto').height() : 0);
    });
  });

});