Google

Simple Next-Prev Link

Saturday, July 01, 2006

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 ;) )

13 comments:

Johan Sundström said...

For a small usability improvement, change the display = "none" to visibility = "none", so the next and previous links appear on the same spot every time they show up.

(Why this is a good idea manifests itself 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.)

Anonymous said...

Looks very nice!!!
Of course the ideal is jump to Archives when is the last post from current page.

saludos!
Mario

Anonymous said...

There are a little bug on your template, you open "h2 class date-header" and close with /h3 tag!

saludos
Mario

Aditya said...

Good work! Simple, yet adds to the design :)
Great you have you on board with us! :D

Gaby de Wilde said...

this is nice :)

Avatar X said...

yeah, another one walking in our deviant road....


:P


Welcome, welcome indeed.

Aditya said...

Ok, my two cents!

I didn't go over your code, so if you've done this, you can ignore this comment! I was just thinking of increasing the usability and making information more available for furthur use, while making the implementation a little easier. Why not put the values of the 'id' attribute from anchors into an array, and then make floating buttons move forward and backward through that array to that it can move from one element to another? you can select which anchors to get that value from by checking for a specific 'rel' value.

Also, your scrolling can be achieved by using Prototype library, and incrementing the page offset repeatedly until it reaches the elements offset its supposed to!

This will make it much easier to implement, and the array generated will point to all the titles on a page, which can be furthur used somewhere else! I wanted you to have a go at it, and if you can't, I'll be glad to help! :) This is just the theory and the suggestion ofcourse! :)

Anonymous said...

whoa... thx for all the comments :) this was the most valuable post for me, all the masters on blogging are commenting :)

@adit: i'll try out your suggestions, and fyi moo.fx IS using Prototype ;) and by the way, how is it goin on your college ? have a nice taste of glamourus college world ;)

Raquel said...

Hi Efendi,

This is great script you had. Thank you very much.

Sad to say it doesn't work on my end. I need help from you my dear.

Efendi said...

@Raquel: drop me an email, if you still have some trouble ;)

Anonymous said...

Nice site!
[url=http://rsqtqjbq.com/ctro/bdue.html]My homepage[/url] | [url=http://ibcxmwnp.com/mwrc/awbo.html]Cool site[/url]

Anonymous said...

Great work!
My homepage | Please visit

Anonymous said...

Great work!
http://rsqtqjbq.com/ctro/bdue.html | http://bwqdsrrd.com/tdzp/rsci.html

About Me

My Photo
Efendi
An ordinary, a bit 'geeky' guy, who enjoy blogging about all unique things across the internet world. Blogs about the blogosphere, scripts, fun, games, interesting stuffs, etc. Currently staying and working in Singapore.
View my complete profile