Ajax dynamic scrolling pages

Demo

Download script

You can download the entire script from this zip file.

Configuration

Files in package

• ajax-dynamic-pages.html = Main HTML file.
• js/ajax.js - Ajax (Sack Library)
• js/ajax-dynamic-content - The dynamic content script from this site
• js/ajax-dynamic-pages - The main JS file for this script

How to configure the script

Step 1: Create HTML tag where the dynamic pages will be inserted

Just create an empty HTML element somewhere on your page. Example:

<div id="pageContainer">


</div>

Step 2: Create and configure class object

The next thing you have to do is to create an object of the class DHTMLgoodies_scrollingPages and configure this object. This could should be placed below the HTML tag you created in step 1. Here's an example of such js code:

<script type="text/javascript">
var dynPageObj = new DHTMLgoodies_scrollingPages();
dynPageObj.setTargetId('pageContainer');
dynPageObj.setUrl('getPage.php?pageNo=0');
dynPageObj.setScrollSpeed(20);
dynPageObj.loadPage();
</script>

First we create the object. Then we specify that the element with id="pageContainer"(ref. step 1) should be the target for our dynamic pages. Next, we specify which url to insert into this page.

We can also specify scroll speed. A lower value means faster scrolling.

Finally, we call the loadPage method which will load the first page and display it inside <DIV id="pageContainer">.

Step 3: Load additional pages

This is done by inserting links(<A> tags) inside our dynamic pages(i.e. getPage.php here). This is how this link could look like:

<a href="#" onclick="dynPageObj.setUrl('getPage.php?pageNo=2');dynPageObj.loadPage();this.style.display='none';return false">Next page</a>

You can find more help on the js methods here