Simple Next-Prev Link

One thing that I've always wanted to put on my blog page, is some cool scrolling fx :P something like when i clicked the link then it goes scrolling smoothly :P Well after searching and experimenting, there are lots of javascripts out there to achieve this kind of FX, you can always find it using google ;)

But my last choice was on moo.fx :) why do i choose moo.fx and what the heck is moo.fx ?? Well moo.fx is a super lightweight javascript effects library, it was only around 4-5kb ! Imagine those size ! While others provided the same effects, they can take up to more than 50kb even above 100kb ! For me size does matter, since in indonesia here, there's still plenty of 56k ers :P

So, i began to wrote the javascript in order to make a link to each post on the Main Page :)

In order to make this thing goes smoothly, then you'll have to add the moo.fx to your page, i suggest that you download and host the javascript by yourself ;)

Well, then on with the simple thing on how to make the Next-Prev Link, at the moment this idea came up, i think of it this way, 'Hm.. in order to link to each post, then i have to make some unique id' and that's it ;)

So i create a <div> tag which contain some id, the id itself was simple, i use the id npl1, npl2, npl3, npl4, npl5 ... and so on :)

So for each post there's a div tag like this :
<div id="npl1"> .....(this is where i put the next prev link)...... </div>

Now, the next thing is that we have to make some javascript to do numbering id. In order to have it done, you'll have to add this code, just before the </head> tag

<script type="text/javascript">
/* Simple Next Prev Link using moo.fx by Efendi, Kwok - 2006-07-01 */
function NextPrevLink() {
  // properties
  this.count = 1;
  // methods
  this.IncCount = npIncCount;
}
function npIncCount() {
  this.count++;
}
function nextPrevClick(n) {
  new fx.Scroll().scrollTo($('npl'+n));
}
</script>


This is the main class that i created for the Next-Prev Link ^^ well, the idea is simple, you just to hold the value for the <div> tag :)

and then go find your <Blogger> and <BlogDateHeader> tag in your template, and then put this script, which will looked like this :

<script type="text/javascript">
  var np = new NextPrevLink();
</script>

<Blogger>
  <BlogDateHeader>
    <h2 class="date-header"><$BlogDateHeaderDate$></h3></h2>
  </BlogDateHeader>
  <script>
    document.write('<div id="npl' + np.count + '" align="right">');
    if (np.count-1 != 0) document.write('<span id="pl'+ np.count +'" style="cursor:pointer;" onclick="nextPrevClick('+(np.count-1)+');">Prev</span>');
document.write('<span id="nl'+ np.count +'" style="cursor:pointer;" onclick="nextPrevClick('+(np.count+1)+');"> Next</span>');
document.write('</div>');
    np.IncCount();
  </script>


now this code is divided into 3 main code

1. It writes the <div id="..."> tag with the numbering, as for this the id will be npl1 npl2 npl3 npl4 npl5 and so on (umm..fyi npl is Next Prev Link :P)
2. Make the Next Prev Link inside the <div> so that when we clicked on it, it'll scroll to post related
3. Increment the number ! (This is the biggest thing ;)) We increment the number so that the next post will have a different id ;)

Well that's it ;)

Oh wait .. there another one :P In the very bottom one find the </Blogger> tag then you add this one script right after that tag:

</Blogger>
<script>
  $('nl'+(np.count-1)).style.display = "none";
</script>


That script is a little cheating :P the scripts will make the Next link to disappear from the last post ;)

or you can change the script to this: [Update]

</Blogger>
<script>
  $('nl'+(np.count-1)).style.visibility = "hidden";
</script>


This as Johan Sundström says, is a good idea when you go to the main page and press Next until you run out of posts. Then the mouse cursor isn't positioned above a lack of Next button, as you would expect, to realize you ran out of posts, but rather on a Prev button suggesting there are additional posts.

Well that's all about it now :) You may try to put it on your blog ^^ And umm... don't forget to mention my name ok ;)

Have a nice weekend ^^

[Update 2006-08-14]:

• For this hacks to work, you must host the moo.fx javascript file first ;) (thx to Raquel for pointing this out ^^)

[Update 2006-07-03]:

• Added the initialization necessary for the script to be working, sorry i forgot to include it on the post :P the: var np = new NextPrevLink();

[Update 2006-07-02]:

• Updated some typo mistake, pointed out by Caso Patologico, i open "h2 class date-header" and close with /h3, now it's fixed ! Thanks man ^^
• Added some alternative to the user for the last script, this was pointed out by Johan Sundström, go give him a visit, he has a GREAT site ;) Thx Johan for dropping by, it's an honor to me ^^ and linking my post (mistaken with John @ Freshblog give him a visit too ;) )

Tags: Next-Prev Link, Scroll, moo.fx