Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Display div for set amount of time, and then fade out?

    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!

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Code:
    function display(div) {
    div.style.display="block";
    }
    
    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");
    
    display(div);
    setTimeout("fadeout(div)",2500);
    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)
    Last edited by gusblake; 12-06-2009 at 07:34 PM.

  • Users who have thanked gusblake for this post:

    SirDarren (12-06-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •