Change content using AJAX with FadeIn FadeOut effect
Here you will find how to do such a trick: when somebody clicks the button, the old content fades out and then the new fades in.
To do this I used jQuery witch is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
The java script code is quite short and easy:
function refreshContent() {
$("#content").fadeOut("slow", function(){
$("#content").load("getrandomcontent.php",false, function() {
$("#content").fadeIn("slow");
});
})
return false;
}
Now you can use this function for a link
<a href="#" onclick="return refreshContent();">Refresh</a>
When you click it, the content in div element with an id “content” will be changed. getrandomcontent.php is used to get random content.
If this post helped you to solve your problem, please donate me. Donation button can be found on the right side of the page.
Hi Algirdas,
A quick message to ask if you would be interested doing a bit of freelance work. I need a javascript which is similar to yours, but with additional functionalities. I’ll give you more details if you are interested.
best regards,
Tim
What are your rates for freelance work?
I found this and thought it was useful. But what if you wanted to just load a text file?
I noticed if I replace the .php file for a .txt file, it seems to work in all browsers but it doens’t work in IE browsers at all.
I can’t seem to find anywhere on the web about jquery not being able to load txt files. IF you have any advice please let me know..
Sorry but I do not have any advices for you. You may ask for advice in http://forum.jquery.com/. If you find solution, please add comment here too :)
This is a great trick! I only wish it worked in Internet Explorer.
I’m sorry. I got it to work. Very, very nice. Thank you.
Actually it’s working…
yah it’s a mess for me as well in IE7.
scratch my last, got it working with IE7 finally. Thanks!
Thought I would share how i’ve used this: I created an argument named ‘musicstyle’ and then in the html when I run the show_highlight script it passes the variable as the ‘musicstyle’.
(javascript)
function show_hightlight(musicstyle) {
$(“#swapout”).load(‘show_’+department+’.php’,false);
return false;
}
(html)
This allowed me to have one function that can call as many php pages as I want passing the argument replacing the ‘musicstyle’. So after it runs, it ends up coding out as one the variables in place of the argument ‘musicstyle’.
For example:
‘show_trance.php’
‘show_hiphop.php’
‘show_breakbeat.php’
see, the word trance was passed into +musicstyle+ when that link was selected, if the hiphop link gets selected, it passes the variable ‘hiphop’ into +musicstyle+
So then I just code up a few pages with those names to have data show up for them (show_trance.php, show_hiphop.php,etc)
Just thought I would share
actually it works