javascript text navigation system

[Diggum1]

Hi everyone,

I'm looking for a way to create a small javascript text navigation system. I have a faculty list of 30 names, only 10 of which will fit in the design at a time. So I'd like functionality where the first 10 are displayed initially, then you can click on "More" to display the next 10 names (or "Previous" if you want to go back to the initial 10 names). Basically, a way to cycle through 10 names at a time. No database is involved, only static pages.


I've done some searching, but haven't really come up with anything elegant.

Anyone have any ideas, or links to something fairly easy to implement?

Thanks
RK

 

[vacunita]

Where are these names being stored?
If nowhere, then the easiest albeit bulkier way would be to create an array with the names, and work off of that.

You can generate your next and previous links off of a single number: the position in the array where you want to start reading names.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

While you could go with an array containing the names, and page through that, a more basic way would be to have 3 DIVs, each holding 10 names, and simply switch the visibility of each DIV.

Personally, I'd go with the array, but that's because I enjoy coding JS so it'd be a slightly more meaty job to get into (but only just - it's still really basic either way).

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Diggum1]

Thanks for the responses. I'm leaning towards having 3 divs, each holding 10 names.

Where I'm getting stuck is figuring out how to only show the "More" link on the initial 10 names, show both "More" and "Previous" on 11-20, and only the "Previous" link on names 21-30.

 

[vacunita]

If you are going to have 3 divs. Then just add the relevant links to each Div independently. In other words just hard code them in.

Div one would have a link to show only DIV 2. div 2 has links to show div 1 and div 3.
Div 3 only has links to show div 2


If you are going to use the Array method, you'll have to check the current position you are showing and show links based on that.

For instance if the position is 0, Then you know that you only need to show the "More" link.

If the Position is more than 0 but still less than the number of available names you need to show both.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

The advantage of pager would be that you can say anytime "from now on I want 12 items per page" and will be enough to change a setting :

[b]var[/b] pag[teal]=[/teal][purple]0[/purple]
[b]var[/b] per[teal]=[/teal][purple]10[/purple]
[b]var[/b] fac[teal]=[[/teal]
  [green][i]'I'[/i][/green][teal],[/teal][green][i]'II'[/i][/green][teal],[/teal][green][i]'III'[/i][/green][teal],[/teal][green][i]'IV'[/i][/green][teal],[/teal][green][i]'V'[/i][/green][teal],[/teal][green][i]'VI'[/i][/green][teal],[/teal][green][i]'VII'[/i][/green][teal],[/teal][green][i]'VIII'[/i][/green][teal],[/teal][green][i]'IX'[/i][/green][teal],[/teal][green][i]'X'[/i][/green][teal],[/teal]
  [green][i]'XI'[/i][/green][teal],[/teal][green][i]'XII'[/i][/green][teal],[/teal][green][i]'XIII'[/i][/green][teal],[/teal][green][i]'XIV'[/i][/green][teal],[/teal][green][i]'XV'[/i][/green][teal],[/teal][green][i]'XVI'[/i][/green][teal],[/teal][green][i]'XVII'[/i][/green][teal],[/teal][green][i]'XVIII'[/i][/green][teal],[/teal][green][i]'XIX'[/i][/green][teal],[/teal][green][i]'XX'[/i][/green][teal],[/teal]
  [green][i]'XXI'[/i][/green][teal],[/teal][green][i]'XXII'[/i][/green][teal],[/teal][green][i]'XXIII'[/i][/green][teal],[/teal][green][i]'XXIV'[/i][/green][teal],[/teal][green][i]'XXV'[/i][/green][teal],[/teal][green][i]'XXVI'[/i][/green][teal],[/teal][green][i]'XXVII'[/i][/green][teal],[/teal][green][i]'XXVIII'[/i][/green][teal],[/teal][green][i]'XXIX'[/i][/green][teal],[/teal][green][i]'XXX'[/i][/green]
[teal]][/teal]
[b]var[/b] ul

[b]function[/b] [COLOR=darkgoldenrod]go[/color][teal]([/teal]dir[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](([/teal]dir[teal]==-[/teal][purple]1[/purple] [teal]&&[/teal] pag[teal]==[/teal][purple]0[/purple][teal])[/teal] [teal]||[/teal] [teal]([/teal]dir[teal]==[/teal][purple]1[/purple] [teal]&&[/teal] pag[teal]==[/teal]Math[teal].[/teal][COLOR=darkgoldenrod]ceil[/color][teal]([/teal]fac[teal].[/teal]length[teal]/[/teal]per[teal])-[/teal][purple]1[/purple][teal]))[/teal] [b]return[/b]

  pag[teal]+=[/teal]dir

  [b]while[/b] [teal]([/teal]o[teal]=[/teal]ul[teal].[/teal]firstChild[teal])[/teal] ul[teal].[/teal][COLOR=darkgoldenrod]removeChild[/color][teal]([/teal]o[teal])[/teal]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal]i[teal]<[/teal]per[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
    [b]if[/b] [teal]([/teal]pag[teal]*[/teal]per[teal]+[/teal]i[teal]>=[/teal]fac[teal].[/teal]length[teal])[/teal] [b]break[/b]
    [b]var[/b] li[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'li'[/i][/green][teal])[/teal]
    li[teal].[/teal]innerHTML[teal]=[/teal]fac[teal][[/teal]pag[teal]*[/teal]per[teal]+[/teal]i[teal]][/teal]
    ul[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]li[teal])[/teal]
  [teal]}[/teal]
[teal]}[/teal]

window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  ul[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'facls'[/i][/green][teal])[/teal]
  [COLOR=darkgoldenrod]go[/color][teal]([/teal][purple]0[/purple][teal])[/teal]
[teal]}[/teal]

[b]<ul[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"facls"[/i][/green][b]></ul>[/b]

[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"go(-1);return false"[/i][/green][b]>[/b]prev[b]</a>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"go(1);return false"[/i][/green][b]>[/b]next[b]</a>[/b]

The advantage of Dan's 3 [tt]div[/tt] suggestion is that search engines will be able to index it.

Feherke.

http://free.rootshell.be/~feherke/

 

[Diggum1]

Great ideas, thanks guys!