Links Pagination

[Nealreal]

I have a pagination - about 25 pages that will be displayed like so:
1 2 3 4 5 6 7 8 etc...

The pagination is styled in css and I have a current-page style for the link that is the current page.

My question is: How or what javascript can you provide that can automatically highlight the current page that the visitor is on without me having to code the current page link for every page within the pagination. The javascript should use my current-page style that I created for the link as well. Hope you guys understand what I'm talking about.

[Fotiman]

You shouldn't use JavaScript for that. What if the end user does not have JavaScript enabled? Then he/she won't be able to tell which one is the "current" page.

[MichaelBluejay]

I disagree, and I think Javascript would be fine for this purpose. Just because 0.5% of users might not have a certain browser feature doesn't mean you should rob the other 99.5% who do have that feature of a better user experience.

However, I do feel strongly that having 25 pages of uncategorized links is a bad, bad idea. If you're doing it because you're link-trading and think it'll help your search rankings, I believe you're mistaken. The SE's are smart enough to discount the value of link trades and huge link pages. I *never* do link trades and I rule the SERPs for my preferred keywords.

If you really must have 25 pages of links, then make it useful and turn it into a *directory*, where the links are *categorized*, and have excellent descriptions. The categories can be things like "Blue Widgets", "Red Widgets", or "U.S. Widgets", "French Widgets", etc. Then your links won't be to 1, 2, 3, etc., they'll be to those category names.

Because I feel so strongly that this is the route you should go, I'm afraid I feel I must decline to answer the question of how to style the links with Javascript.

[orion_rus]

U should use server side scripting for that

[whoisgregg]

Here's pseudo code for how to go about tagging a particular link as the "current" link:

var the_As = document.getElementById('paginationDiv').getElementsByTagName("A");
for(var i=0; i<the_As.length; i++){
if(the_As[i].href == location.pathname){ // you'll need to do more vigorous checking here
the_As[i].className = 'current';
}
}

But, I agree with orion_rus and Fotiman... this is typically something done on the server side, not on the client. While MichaelBluejay makes an excellent point about robbing the majority of the users of features, in this case Javascript brings nothing to the table that can't be accomplished server side and then enjoyed by all users.

Hopefully you are already generating your pagination links server side -- just add in some logic like what's shown above to print a different class name for the current link.

[Fotiman]

I should have clarified that while you shouldn't use JavaScript for this, you *should* use some kind of server side processing. I wasn't implying that you shouldn't mark the current page differently (as MichaelBluejay seemed to think I was implying). I second what whoisgregg said.

[edited by: Fotiman at 3:50 pm (utc) on Dec. 12, 2006]

[MichaelBluejay]

I agree, ideally Javascript would be used only for things that can't be done server-side and provide the same quality of experience. On the other hand, if one has no server-side scripting experience then I think it's fine to start off doing things like this with Javascript and then "graduate" to doing it server-side (a qualification I failed to mention). That's how I did it, starting off with JS and then learning Perl later.

On the other OTHER hand, I don't think *anyone* ought to have 25 unorganized links pages. :)

[coopster]

Hi Nealreal, I see you have been a member for quite some time but never had an *official* welcome. Welcome to WebmasterWorld!

Hope you guys understand what I'm talking about.

I know exactly what you are talking about. There was a presentation at pubcon that went into detail how this is accomplished. As far as method, I agree wholeheartedly with the community here in that server-side technology is the answer, and with a whole bunch of benefits, including code reduction which in turn offers saved bandwidth, saved backup time, ... the list goes on.

There is a very small code sample in the PHP Server Side Scripting Forum that introduces the concept of Hiding hyperlinks for page displayed [webmasterworld.com]