www.webdeveloper.com
Results 1 to 5 of 5

Thread: simple background color change on click then after delay change back.

  1. #1
    Tyr is offline Newbie php HTML expert)
    Join Date
    May 2007
    Posts
    2

    Post simple background color change on click then after delay change back.

    Hi all, here's the background on what I'm doing: I'm making a photo gallery that you interact with on the touch screen of a camera on screen, I know that sounds confusing, but it makes sense visually. Anywho I have an image of a camera, and what I'd like to do just for fun is make it so it looks like the "flash" went off on the camera when you click on the take picture button. As well as play a short audio clip.

    Anywho I'm mainly trying to figure out how to just get the background to switch and then after a tiny delay switch back.

    Here's the code that I have for it

    Code:
    <script> function ChangeBackground()
    {
    document.body.style.backgroundColor="white"; //immediately change the background color to white
    setTimeout(document.body.style.backgroundColor="#000000", 100) //after 100 milliseconds change the background to black.
    }
    </script>
    Then in my page i currently have a button(I'm going to make it a selectable div or image map so there isn't an ugly button over the camera's button, but that's not important at the moment)

    Code:
    <input type="button" onclick="ChangeBackground()" Value="Flash"/>
    Can anyone point out why this code does not work? When I run it, the background doesn't change at all.

    Thank you javascript geniouses. I'm still learning but I'm eager to master javascript.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252

    Lightbulb

    100 milliseconds is pretty quick. For testing, I changed to 250 ms.
    Alter back, if necessary, after testing.

    I also initialized the body to something other than default white,
    which is what color changes to just before going black.
    Adjust as needed.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function changeColor(info) {
      document.body.style.backgroundColor=info;  // "#000000";
    }
    function ChangeBackground() {
      document.body.style.backgroundColor="white"; //immediately change the background color to white
      setTimeout("changeColor('#000000')", 250) //after 100 milliseconds change the background to black.
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body style="background-Color:#ffff00">
    <input type="button" onclick="ChangeBackground()" Value="Flash"/>
    </body>
    </html>

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    add this css to your doc to smooth things out and make the effect more noticeable.



    Code:
    body{
    	-webkit-transition-property: background-color;
    	-webkit-transition-duration: 200ms;
    	-moz-transition-property: background-color;
    	-mmoz-transition-duration: 200ms;
    	transition-property: background-color;
    	transition-duration: 200ms;
    }

  4. #4
    Tyr is offline Newbie php HTML expert)
    Join Date
    May 2007
    Posts
    2

    Wow thanks!

    Wow thanks you guys, that works perfectly!

    *virtual high five*

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252
    You're most welcome, I'm sure, from both of us.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles