JamCity Testing

by bluetidepro

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<!-- http://placehold.it/126x126&text=- -->

<ul id="jmc_wrap" class="jmc_dark_theme jmc_size0">
<li class="jmc_track">
    <a href="#" title="A long article - long track" target="_blank">
        <span class="jmc_vinyl_case_overlay"></span>
        <span class="jmc_album_art"><img src="http://userserve-ak.last.fm/serve/34s/68777842.png" alt="name"/></span>
        <span class="jmc_vinyl_case"></span>
        <span class="jmc_vinyl_slip"></span>
        <span class="jmc_vinyl"></span>
    </a>
</li>
</ul>
<br clear="all"/><br clear="all"/>
<ul id="jmc_wrap" class="jmc_dark_theme jmc_size1">
<li class="jmc_track">
    <a href="#" title="artist - track" target="_blank">
        <span class="jmc_vinyl_case_overlay"></span>
        <span class="jmc_album_art"><img src="http://userserve-ak.last.fm/serve/64s/68777842.png" alt="name"/></span>
        <span class="jmc_vinyl_case"></span>
        <span class="jmc_vinyl_slip"></span>
        <span class="jmc_vinyl"></span>
    </a>
</li>
</ul>
<br clear="all"/><br clear="all"/>
<ul id="jmc_wrap" class="jmc_dark_theme jmc_size2">
<li class="jmc_track">
    <a href="#" title="artist - track" target="_blank">
        <span class="jmc_vinyl_case_overlay"></span>
        <span class="jmc_album_art"><img src="http://userserve-ak.last.fm/serve/126/68777842.png" alt="name"/></span>
        <span class="jmc_vinyl_case"></span>
        <span class="jmc_vinyl_slip"></span>
        <span class="jmc_vinyl"></span>
    </a>
</li>
</ul>

CSS

body{margin:70px;}

#jmc_wrap{font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, "Lucida Grande", sans-serif; font-size:12px;}
#jmc_wrap li.jmc_track{float:left; margin-left:10px;}
#jmc_wrap li.jmc_track a{height:100%; width:100%; display:block; text-align:left; margin:0; padding:0; position:relative; text-decoration:none;}
#jmc_wrap li.jmc_track a span{background:transparent url('http://iamzachreed.com/jmc_dark_theme_sprite.png') no-repeat; display:block; margin:0; padding:0; position:absolute; top:0px;}
#jmc_wrap li.jmc_track a:hover span.jmc_album_art img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); -moz-opacity:0.85; -khtml-opacity:0.85; opacity:0.85;}

/* small size */
#jmc_wrap.jmc_size0 li.jmc_track{width:42px; height:43px; padding-right:12px;}
#jmc_wrap.jmc_size0 li.jmc_track a span.jmc_vinyl_case_overlay, #jmc_wrap.jmc_size0 li.jmc_track a span.jmc_vinyl_slip{visibility:hidden;}
#jmc_wrap.jmc_size0 li.jmc_track a span.jmc_album_art{left:3px; top:4px; z-index:4; height:34px; width:34px;}
#jmc_wrap.jmc_size0 li.jmc_track a span.jmc_album_art img{margin:0; padding:0; border:none; height:34px; width:34px;}
#jmc_wrap.jmc_size0 li.jmc_track a span.jmc_vinyl_case{left:0px; z-index:3; height:43px;width:41px; background-position:-0px -0px;}
#jmc_wrap.jmc_size0 li.jmc_track a span.jmc_vinyl{left:9px; top:2px; z-index:1; height:41px; width:39px; background-position:-543px -0px; -webkit-transition: all 130ms ease; -moz-transition: all 130ms ease; -ms-transition: all 130ms ease; -o-transition: all 130ms ease; transition: all 130ms ease;}
#jmc_wrap.jmc_size0 li.jmc_track a:hover span.jmc_vinyl{left:14px; -webkit-transition: all 130ms ease; -moz-transition: all 130ms ease; -ms-transition: all 130ms ease; -o-transition: all 130ms ease; transition: all 130ms ease;}

/* medium size */
#jmc_wrap.jmc_size1 li.jmc_track{width:73px; height:74px; padding-right:24px;}
#jmc_wrap.jmc_size1 li.jmc_track a...

JavaScript

$(document).ready(function() {
  function tooltip() {

    //act upon the element that is passed into the design
    $('.jmc_track a').each(function(){

      // 1. Get the text, create the tooltip and append
      var getText = $(this).attr('title');
      var $wrapper = '<div class="jmc_tooltip_wrap">'+getText+'<span class="jmc_tooltip_arrow_down"></span></div>';
      $(this).append($wrapper);

      // 2. Get the dimensions of the tooltip
      var $tooltip = $('.jmc_tooltip_wrap',this);
      var widthP = $tooltip.width();
      var widthP2 = $tooltip.outerWidth()/2+2;
      var heightP = $tooltip.height();
      var widthT = $(this).width();
      var heightT = $(this).height();
      var marginTop = heightT;
      $tooltip.css({bottom: marginTop+'px', marginLeft: '-'+widthP2+'px'});
      $tooltip.css('opacity',0);
      var $tooltip_arrow = $('.jmc_tooltip_arrow_down',this);
      $tooltip_arrow.css({marginTop: heightP+8+'px', marginLeft: widthP/2+'px'});

      // 6. Remove the element's title text
      $(this).removeAttr("title");

      // Configuration settings for HoverIntent plugin
      var config = {
        sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
        interval: 50, // number = milliseconds for onMouseOver polling interval
        over: linkOver, // function = onMouseOver callback (REQUIRED)
        timeout: 125, // number = milliseconds delay before onMouseOut
        out: linkOut // function = onMouseOut callback (REQUIRED)
      };

      // Initialise HoverIntent
      $(this).hoverIntent(config);

      // Hover link over
      function linkOver(){
        $tooltip.show().css({
          bottom: marginTop-10+'px'
        }).animate({
          bottom: marginTop,
          opacity: 1
        }, 75);
      }

      // Hover link over
      function linkOut(){
        $('.jmc_tooltip_wrap',this).animate({
          bottom: (5*1.5)+marginTop,
          opacity: 0
        }, 150, function() {
         ...