JAVASCRIPT   6

side-bar.js

Guest on 19th May 2021 04:54:37 AM

  1. $(document).ready(function()
  2. {
  3.     if ($('#rp_list').length > 0) {
  4.         $(function () {
  5.             /**
  6.              * the list of posts
  7.              */
  8.             var $list = $('#rp_list ul');
  9.             /**
  10.              * number of related posts
  11.              */
  12.             var elems_cnt = $list.children().length;
  13.  
  14.             /**
  15.              * show the first set of posts.
  16.              * 200 is the initial left margin for the list elements
  17.              */
  18.             load(200);
  19.  
  20.             function load(initial) {
  21.                 $list.find('li').hide().andSelf().find('div').css('margin-left', -initial + 'px');
  22.                 var loaded = 0;
  23.                 //show 5 random posts from all the ones in the list.
  24.                 //Make sure not to repeat
  25.                 while (loaded < $('#countSideBar').val()) {
  26.                     var r = Math.floor(Math.random() * elems_cnt);
  27.                     var $elem = $list.find('li:nth-child(' + (r + 1) + ')');
  28.                     if ($elem.is(':visible'))
  29.                         continue;
  30.                     else
  31.                         $elem.show();
  32.                     ++loaded;
  33.                 }
  34.                 //animate them
  35.                 var d = 200;
  36.                 $list.find('li:visible div').each(function () {
  37.                     $(this).stop().animate({
  38.                         'marginLeft': '-80px'
  39.                     }, d += 100);
  40.                 });
  41.             }
  42.  
  43.             /**
  44.              * hovering over the list elements makes them slide out
  45.              */
  46.             $list.find('li:visible').live('mouseenter', function () {
  47.                 $(this).find('div').stop().animate({
  48.                     'marginLeft': '-240px'
  49.                 }, 200);
  50.             }).live('mouseleave', function () {
  51.                 $(this).find('div').stop().animate({
  52.                     'marginLeft': '-80px'
  53.                 }, 200);
  54.             });
  55.  
  56.             /**
  57.              * when clicking the shuffle button,
  58.              * show 5 random posts
  59.              */
  60.             $('#rp_shuffle').unbind('click')
  61.                     .bind('click', shuffle)
  62.                     .stop()
  63.                     .animate({'margin-left': '-18px'}, 700);
  64.  
  65.             function shuffle() {
  66.                 $list.find('li:visible div').stop().animate({
  67.                     'marginLeft': '-80px'
  68.                 }, 200, function () {
  69.                     load(-60);
  70.                 });
  71.             }
  72.         });
  73.     }
  74. });

Raw Paste


Login or Register to edit or fork this paste. It's free.