Ajax dynamic scrolling pages

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

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

Comments

hadideveloper
Hi,
thanks for your code, but there is problem why this ajax is called only once? first time I call the function it works fine but the next time it does not work
hadideveloper at 03:00AM, 2011/10/08.
geeta
can we show single page on time means only 10 records at a time on click on next button
geeta at 05:25AM, 2012/01/20.
vnbnvb
ghjghjghj
vnbnvb at 10:04AM, 2012/02/08.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com