There really isn't any reason to use AJAX get this effect, unless you're talking about tens of thousands of pages.

Simply start by loading your navigation in an unordered list. Include all the natural elements and none of the pagination controls.

Then write javascript that will take your unordered list and wrap it so you get:

<div class="paginated">
  <a class="backward">&lt;</a>
  <ul class='nav'>....</ul>
  <a class="forward">&gt;</a>

or something similar. Then use CSS to position everything how you want. Your UL is going be how ever wide want and your LI elements are going to be inline.

Here's the trick, use the CSS clip property to control the visible contents of the UL. The JavaScript events on your two forward and backward anchors would then change the clip to show the next window of stuff.


On 23-Dec-08, at 6:04 AM, Jeffrey Jones wrote:

Hoi Tim,

Not my site and not my choice unfortunately. I already pointed these flaws out.

The other problem is that the navigation menus makes use of honking great images which means that the navigation menu wouldn't fit in the page if it were displayed in full.

Again I am aware of the drawbacks of such a set-up (I will put in a sitemap page if I can) but it isn't my site and the owner has definite ideas about how he wants it to look, it is very much form over function.



Tim Gossett wrote:
On Tue, Dec 23, 2008 at 4:20 AM, Jeffrey Jones <> wrote:

Lets say I have a simple Radiant based site. Pages with sub-pages etc etc.
All very simple.

However the user wants the navigation menu to be scrollable using little
buttons Like the following

NAV1 - NAV2- NAV3- NAV4 <>

Clicking the > button would change the nav to

NAV5 - NAV6- NAV7- NAV8 <>

and so on using AJAX to update the navigation menu. This navigation menu is going to be on the one layout this site will use so all the pages will have
it without exception. Now, how can I do this?

If you rely on AJAX to bring in parts of the navigation menu, then your site won't work for users without JavaScript enabled (read: Google won't be able to use the navigation menu). Also, you'll be creating superfluous requests to load a little bit of HTML, which is a big performance hit. Why not do

Have your layout create a list with all of the navigation links that might otherwise be loaded by AJAX. (This will ensure that the site works for
non-JS users). Use JS to hide all but the first four nav links when
body.onLoad. Bind a function to your little buttons .onClick to hide those
four and show the next four nav links.

Your users won't have to wait for an HTTP request to complete before they can see the nav links they want, and your menu will be wicked-fast, leaving
some headroom for sexy animations (slides, fades, etc.).

No need to write an extension.

Radiant mailing list

Radiant mailing list

Radiant mailing list

Reply via email to