New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Ajax dynamic scrolling pages
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
No one has commented this - be first!
Post your comment
Comment preview: