Mashables cool 'Next Post' widget

I was reading an article on Mashable and when I had reached the end of the article this 'thing' appeared to the right of the page. This 'thing' was promoting the next article on the site, and rather being a boring link it was a full featured snippet shouting 'Click Me'.

Things I really like about this 'Widget':

Easy to Make

I think so.

Using the favourite jQuery - or straight JavaScript if you are capable - you can test the current scroll position against the bottom of the article (or any target element). Once the numbers add up bring in an absolutely positioned panel with all the coolness of a pro.

This works, but not the cleanest of code - but functional! Also available as a fiddle: http://jsfiddle.net/clokey2k/rcaxA/1/

$(function(){

  //When should it be triggered in this case - when the '.next-link' is visible, 
  //but it could be the '.offset().bottom' of the article?
  limit = $('.next-link').offset().top;
  //Account for the height of the window - would have to readjust on resize;
  target = limit - $(window).height();
  //Hide the fancy fixed position box;
  $nextbox = $('.next-box')
  $nextbox.css({right: "-=150px"});
  //Make a note of it's status;
  visible = false

  //Cue Magic - every time the window scrolls;
  $(window).scroll(function(){
    //Where are we?
    current =  $(window).scrollTop();
    //Hit the target - show me the box;
    if(current >= target && visible == false){
      $nextbox.animate({right: "+=150px"}, 500);
      visible = true;
    }
    //Gone back up to re-read the article - hide it again!
    if(current < target && visible == true){
      $nextbox.animate({right: "-=150px"}, 500);
      visible = false;
    };
  });
});

Result being (rather poorly styled):

This currently relies on knowing the width of the pop-up box to hide it adequately, but jQuery could find the width and adjust accordingly. Some values would have to be recalculated if the window is resized (as the height of the window and 'length' of the article would increase), especially if widths of elements are fluid. As long as you are aware it shouldn't take long to adjust!

Just visit Mashable and read an article, who knows what article comes next. Since writing this article Mashable have changed their webdesign

comments powered by Disqus