View Full Version : Display div for set amount of time, and then fade out?

12-06-2009, 07:12 PM
Hey guys.

So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! :)
I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it.

I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy.

After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds.

Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.?

Thanks a lot! :D

12-06-2009, 07:30 PM
function display(div) {

function fadeout(div) {
div.style.opacity-=.1 //for FF
div.style.filter="alpha(opacity="+(div.style.opacity*100)+")"; //for IE
if(div.style.opacity>0) setTimeout("fadeout(div)",100);

var div=document.getElementById("yourdiv");


Should work OK

Edit - functional in FF and IE8. Use 40 instead of 100 in the fadeout() setTimeout for a smoother looking transition, or decrease the amount by which you decrement the opacity (if you still want it to last a second)