Posted By

nerdfiles on 02/14/11


Tagged

list archive jquery


Versions (?)

jQuery Quick Archive


 / Published in: jQuery
 

  1. /*
  2.  
  3. Markup:
  4.  
  5. <nav class="quick-archive">
  6. <ul class="quick-archive-inner">
  7. <li class="first-child prev">
  8. <span class="prev">Previous year</span>
  9. </li>
  10. <li class="years">
  11. <span class="years-label">Years</span>
  12. <div class="years-container">
  13. <ul class="years-container-inner">
  14. <!--
  15. <li class="year first-child"><a href="#">2008</a><span class="sep"> | </span></li>
  16. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  17. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  18. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  19. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  20. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  21. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  22. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  23. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  24. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  25. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  26. <li class="year"><a href="#">2009</a><span class="sep"> | </span></li>
  27. <li class="year last-child"><a href="#">2010</a></li>
  28. -->
  29. </ul>
  30. </div>
  31. </li>
  32. <li class="last-child next">
  33. <a href="#" class="next">Next year</a>
  34. </li>
  35. </ul>
  36. </nav>
  37.  
  38. CSS:
  39.  
  40. .quick-archive {
  41.   margin: 2em 0 2em;
  42.   background: #E0DED0;
  43.   padding: .5em;
  44.   position: relative; }
  45. .quick-archive ul li.prev,
  46. .quick-archive ul li.next,
  47. .quick-archive ul li.year,
  48. .quick-archive ul li.years,
  49. .quick-archive ul.years-container,
  50. .quick-archive ul.quick-archive-inner {
  51.   background: none !important;
  52.   margin: 0 !important;
  53.   padding: 0 !important;
  54.   display: inline; }
  55. .quick-archive span.years-label { display: none; }
  56. .quick-archive li.year { }
  57. .quick-archive li.year:after { content: "|"; margin: 0 5px; }
  58. .quick-archive li.first-child { }
  59. .quick-archive li.last-child { }
  60. .quick-archive ul.years-container-inner li.first-child { }
  61. .quick-archive ul.years-container-inner li.last-child { }
  62. .quick-archive ul.years-container-inner li.last-child:after { content: ""; }
  63. .quick-archive li.prev,
  64. .quick-archive li.next { position: absolute; }
  65. .quick-archive li.prev { left: 10px; }
  66. .quick-archive li.next { right: 10px; }
  67. .quick-archive li.years {
  68.   position: relative;
  69.   display: block !important; }
  70. .quick-archive ul.quick-archive-inner { margin: 0; padding: 0; }
  71. .quick-archive div.years-container:after,
  72. .quick-archive ul.quick-archive-inner:after { content: "\00a0"; text-align: left; text-indent: -9999px; }
  73. .quick-archive div.years-container {
  74.   width: 350px;
  75.   max-width: 350px;
  76.   position: absolute;
  77.   left: 50%;
  78.   margin-left: -170px !important;
  79.   padding: 0 5px !important;
  80.   overflow: hidden;
  81.   border-left: 1px #444 solid;
  82.   border-right: 1px #444 solid; }
  83. .quick-archive ul.years-container-inner {
  84.   width: 350px;
  85.   max-width: 350px;
  86.   height: 1.5em;
  87.   max-height: 1.5em;
  88.   left: 0;
  89.   top: -10px;
  90.   position: absolute;
  91.   display: inline-block;
  92.   *zoom: 1;
  93.   *display: inline; }
  94. */
  95.  
  96. ;(function($) {
  97.  
  98. var a = [];
  99.  
  100. $.quickArchive = function(c, _params) {
  101.  
  102. var _defaults = {
  103. layout: "horizontal",
  104. yearRange: "2000-2011",
  105. monthScheme: "",
  106. dayScheme: "",
  107. urlScheme: {
  108. baseUrl: "//nerdfiles.net/whatever/",
  109. paramName: "y"
  110. }
  111.  
  112. };
  113.  
  114. return $(c).each(function(index, e) {
  115.  
  116. var $self = $(this),
  117. $yearsContainer = $self.find(".years-container"),
  118. $yearsContainerInner = $self.find('.years-container-inner'),
  119.  
  120. _settings = _params || _defaults,
  121.  
  122. html = [],
  123.  
  124. yearRangeMatch = _settings.yearRange.match(/(\d{4})-(\d{4})/);
  125.  
  126. if ( typeof(_settings.yearRange) === "string" && yearRangeMatch ) {
  127.  
  128. var startYear = parseInt(yearRangeMatch[1]),
  129. endYear = parseInt(yearRangeMatch[2]);
  130.  
  131. for (var i = startYear, j = 0; i <= endYear; i++, j++) {
  132.  
  133. if ( j === 0 ) {
  134. html[j] = '<li class="year first-child"><a href="' + _settings.urlScheme.baseUrl + '?' + _settings.urlScheme.paramName + '=' + i + '">' + i + '</a></li>';
  135. } else if ( i == endYear ) {
  136. html[j] = '<li class="year last-child"><a href="' + _settings.urlScheme.baseUrl + '?' + _settings.urlScheme.paramName + '=' + i + '">' + i + '</a></li>';
  137. } else {
  138. html[j] = '<li class="year"><a href="' + _settings.urlScheme.baseUrl + '?' + _settings.urlScheme.paramName + '=' + i + '">' + i + '</a></li>';
  139. }
  140.  
  141. }
  142.  
  143. }
  144.  
  145. $yearsContainerInner.html( html.join("") );
  146.  
  147. $yearsContainer.live('mouseover', function(e) {
  148. var lx = e.layerX;
  149. console.log(lx);
  150. if (lx > 150) {
  151. $yearsContainerInner.animate({
  152. left: '-350px'
  153. }, 800);
  154. } else {
  155. $yearsContainerInner.animate({
  156. left: '-150px'
  157. }, 800);
  158. }
  159. });
  160.  
  161. $yearsContainer.find('a').live('click', function(e) {
  162. e.preventDefault();
  163. });
  164.  
  165. });
  166.  
  167. };
  168.  
  169. })(jQuery);
  170.  
  171. $.quickArchive("nav.quick-archive");

Report this snippet  

You need to login to post a comment.