< Pete Goodman Web developer >

JS Slide Navigation

This is an example of creating HTML 'slides' - content blocks set to 100% page height. If you resize your browser window, the slides will resize accordingly.

The sidebar to the left has a fixed position sitting on top of all the slides. Each slide starts at the edge of this sidebar and expands to the edge of the screen.

JavaScript has been used to generate the navigation in the top right corner. Scrolling between slides can be achieved by clicking on these links, or via pressing either the up or down keys on your keyboard.

JavaScript implementation

Three examples of the same concept, written in slightly different ways.

jQuery, Object literal
View Demo - (JS file)
YUI, Module pattern (singleton)
View Demo - (JS file)
YUI, Module pattern (with constructor)
View Demo - (JS file)