Tuesday, November 23, 2010

How to create a slide show of external pages inside a DIV

The code below unables you to display various external pages inside a DIV and switching them every 15 seconds

First add a DIV to your html page

<div id="contentarea"></div>

Then save jquery.js file in the dame directory as your html page and add reference to jquery to the head section of your page:

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

Then add the following script to the head section:

<script type="text/javascript">

// Place the urls in this array
var urls = new Array("page1.html", "http://elena-sqldba.blogspot.com", "http://www.google.com");
// Set the number of seconds you want to view each page
var viewfor = 15;
var mark=1;


function changeurl(){
ajaxpage(urls[mark], 'contentarea');
mark+=1;// increments the mark variable (array element)
if (mark==urls.length){
mark=0;// returns to urls[0] at the end of the array count

function initSrc(){
ajaxpage(urls[0], 'contentarea');
window.setInterval("changeurl()", viewfor * 1000);

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false

loadpage(page_request, containerid)

page_request.open('GET', url, true)


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
var divElement = document.getElementById(containerid);
divElement.innerHTML = '';

try {
divElement.innerHTML = page_request.responseText;
catch (e) {
// IE fails unless we wrap the string in another element.
var wrappingElement = document.createElement('div');
wrappingElement.innerHTML = page_request.responseText;
} //end if
// -->

No comments:

Post a Comment