how to paging with javascript and css

To create a web site or build a form is quite easy to do. The problems starting, when you think, that your form or your content is too long for one page. The easiest solution is to use the paging javascript combined with some CSS.

The script

Firstly you gonna need the script itself. There you go:

// JavaScript Document
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}

function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}

//in case of simple paging, without the form, this part is not needed

function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}

Save this as paging.js to your folder. (eg scripts/paging.js)

The CSS

We will need a class called page

.page{
position: absolute;
top: 10px;
left: 10px;
visibility: hidden;
}

For your first page, use this:

<div id="page1" class="page" style="visibility:visible;">
Your div's content
.
.
.
a button to the next page
</div>

The paging

All you have to do is put this button to the very bottom of your first page

And the second page is:

You can put a back button to the bottom of this page to allow the user go back to the first page.

Obviously, you can use as many pages as you want. Have fun.

If you have any problems using this paging method, drop me a line via my contact form.

This web development tutorial brought you by Attila Hajdu, expert web developer, multimedia specialist in Portsmouth.

back to css tips