CSS Codes
CSS Layouts

<html>
<head>

<link rel="stylesheet" type="text/css" href="ajaxpagination.css" />

<script src="ajaxpagination.js" type="text/javascript">

/***********************************************
* Ajax Pagination script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body>

<ul>
<li><a href="javascript:mybookinstance.refresh(bookonflowers)">Load Flowers Data Set (4 pages)</a></li>
<li><a href="javascript:mybookinstance.refresh(bookonanimals)">Load Animals Data Set (3 pages)</a></li>
<li><a href="javascript:mybookinstance.refresh(bookcombo)">Load Large Data Set (12 pages)</a> (Notice the 4 page range limit within pagination DIV)</li>
</ul>

<div id="paginate-top"> </div>
<div id="bookcontent"> </div>
<div id="paginate-bottom"> </div>

<p><a href="javascript:mybookinstance.selectpage(1)">Select 2nd page dynamically</a></p>


<script type="text/javascript">

var bookonflowers={
pages: ["demofiles/flower.htm", "demofiles/flower2.htm", "demofiles/flower3.htm", "demofiles/flower4.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}

var bookonanimals={
pages: ["demofiles/external.htm", "demofiles/external2.htm", "demofiles/external3.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}

var bookcombo={
pages: ["demofiles/flower.htm", "demofiles/flower2.htm", "demofiles/flower3.htm", "demofiles/flower4.htm", "demofiles/external.htm", "demofiles/external2.htm", "demofiles/external3.htm", "demofiles/flower.htm", "demofiles/flower2.htm", "demofiles/flower3.htm", "demofiles/flower4.htm", "demofiles/external.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}

var mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent", ["paginate-top", "paginate-bottom"])

</script>

</body>

</html>