Jump to content

Fade in/out on each div content change


bmx322

Recommended Posts

Hello All You Brilliant Folk!

 

First, thanks to all those who helped me get my ajax fixed!

 

Now that I have a div that is gets different fesh content every 10 seconds from the database I would like to have it fade in and out.

 

I come here as a last resort. I like to try and figure things out. I got the ajax script almost working and only had ONE error that I couldn't find. Just so you know I don't come here asking you all to write my code!

 

Well, again, after hours of searching, reading, and trying to find a good example of the fade thingy, I've come here. I'm using PHP, AJAX, and MySQL for this. It is not using JQuery, don't know if that will help.

Here's the process flow.The ajax populates a div on page load and refreshes the content every 10 seconds (at this point). I'd like the content to fade out, grab the next content, then fade in with the new content. Here's the working code minus the PHP file.

ALL HELP IS GREATLY APPRECIATED!

 

<html>
<head>
<SCRIPT language=JavaScript type="text/javascript">
var http = createRequestObject();
var i = 1;






function createRequestObject() {
// find the correct xmlHTTP, works with IE, FF and Opera
var xmlhttp;
try {
  	xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e) {
    try {
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e) {
    	xmlhttp=null;
    }
  }
  if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {
  	xmlhttp=new XMLHttpRequest();
  }
return  xmlhttp;
}

// Make the XMLHttpRequest object
function sendRequest() {

// Open PHP script for requests
try{
var page = "testimo_query.php?num=" + i;
http.open("GET", page, true);
http.setRequestHeader('Content-Type',  "text/text");
http.onreadystatechange = handleResponse;
http.send(null);
}
catch(e){
	// caught an error
	alert('Request send failed.');
}

if (i<6){
   if(i==5){
   i=1;
   }else{ i++; }
}	
}

function handleResponse() {

try{
    if(http.readyState == 4){
        var response = http.responseText;
       // UPDATE ajaxTest content

       }
}
catch(e){
	// caught an error
	alert('Response failed.');
}

}

function repeatloop()
{
sendRequest();


setTimeout("repeatloop()", 10000);
}

window.onload=function() {
repeatloop();
}

</script>
</head>
<body>
<div id="ajaxDiv">
</div>
</body>
</html>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.