I want to include a function like seen in Mashable. It's the next post widget. If you reach the end of the post, a suggestion will appear on the right side. I found a solution for this http://clokey2k.com/blog/2011/09/08-mashables-cool-next-post-widget/, but it's not working for me.
Here is how i did:
1, added a nextpost.js file to the root of the webserver
$(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;
};
});
});
2, placed the following code in the head:
<script type="text/javascript" src=".../nextpost.js"></script>
3, addded codes:
<div class="next-link">fb-share button</div>
<div class="next-box">code of a wp widget area</div>
The problem is, that the widget area (next-box) is always appears, not only when I reach the next-link section. I think the proble is with the javascript integration. What should I do?
