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;
   
   
         $(document).ready(function(){
          initSrc();
         });

 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){
               try{
                   page_request = new ActiveXObject("Microsoft.XMLHTTP")
               }
               catch (e){}
          }
      }
      else
          return false

      page_request.onreadystatechange=function(){
          loadpage(page_request, containerid)
      }
    
      page_request.open('GET', url, true)
      page_request.send(null)

 }

 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;
             divElement.appendChild(wrappingElement);
          }        
         } //end if
 }
// --> 
</script>