ansaurus

Question

Possible to change background-color onClick, then automatically change back a second later?

Answer 1

+2 A:

Sure is possible!

Check out the documentation for setTimeout()

Here's a link to get you started.

http://www.w3schools.com/js/js_timing.asp

Keith Twombley 2010-06-09 07:30:22

Thanks very much for the link, I'll read through it and try my luck. Somebody please upvote Keith on my behalf.

yatman 2010-06-09 07:32:28

Answer 2

+5 A:

Edit - seems delay is for animation functions, not .css or similar. Revised code:

$('.key').click(function() {
      var $elem = $(this);
       var oldBG = $elem.css('background-color');
       $elem.css('backgroundColor', '#FF0000');
        setTimeout(function() {
            $elem.css('background-color', oldBG);
            }, 1000);
     });

working sample

jqueryui lets you animate color now, might be worth a look..

Dan Heberden 2010-06-09 07:37:43

@Dan Isn't it 'background-color' instead of 'backgrounColor' ?

mohang 2010-06-09 07:46:09

css attribute is background-color - jquery can use both, but for an object it takes backgroundColor (cause you can't have hiphens in object names).. so either works.

Dan Heberden 2010-06-09 07:47:09

That code makes a ton of sense, but it's not working! This is how I modified it:[edit: see code in my original post]I'm not sure why it doesn't work. My li class is "key", but I've also got a separate onClick function inside the li brackets. Could that be causing some interference?

yatman 2010-06-09 08:02:44

My bad on the delay function - it was going from red to oldBG with no delay. Revised the code and updated the answer

Dan Heberden 2010-06-09 08:14:00

Dan, that's awesome work. It's still not working for me, but since that Fiddle works, I'm sure the problem is with my code. I'll work it out, but thanks very much for the help!

yatman 2010-06-09 08:47:17

Figured it out - thanks again!

yatman 2010-06-10 19:57:01

Answer 3

A:

If you are willing to change your markup so that each button is an <a> element (perhaps inside those li elements), you can use

a:active {

To change the way the buttons look when pressed. http://www.w3schools.com/CSS/css_pseudo_classes.asp

Victor Stanciu 2010-06-09 07:42:09

Answer 4

A:

You can add a background color style to the element when clicked, and use the setTimeout function to remove it later:

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

(Note: There is a delay method in jQquery, but that is intended to be used with animation, not as a replacement for setTimeout.)

Working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

function calc(digit) {
    var lcd = $('#lcd');
    lcd.text(lcd.text() + digit);
}

</script>

</head>
<body>

<div id="lcd"></div>

<ul>
  <li class="key" onClick="calc('1')">1</li>
  <li class="key" onClick="calc('2')">2</li>
  <li class="key" onClick="calc('3')">3</li>
  <li class="key" onClick="calc('4')">4</li>
  <li class="key" onClick="calc('5')">5</li>
  <li class="key" onClick="calc('6')">6</li>
  <li class="key" onClick="calc('7')">7</li>
  <li class="key" onClick="calc('8')">8</li>
  <li class="key" onClick="calc('9')">9</li>
  <li class="key" onClick="calc('0')">0</li>
</ul>

</body>
</html>

Guffa 2010-06-09 07:44:16

Right, so I used your code but it's not working. What am I doing wrong, do you think? Your code makes sense. My li tag looks like this: <li class="key" onClick="calc('7')">7</li>, then I have your code in script tags in the header. onClick Conflict, maybe?

yatman 2010-06-09 08:13:32

@yatman: I don't know why it fails in your code. I tried the code with your tag in Firefox 3.6.3 and Internet Explorer 8, and it works just fine. Both the calc function and the jQuery event handler is called. I added a working example above.

Guffa 2010-06-09 09:19:54

Figured it out - thanks again!

yatman 2010-06-10 19:57:19

ansaurus

tags:

views:

answers:

Possible to change background-color onClick, then automatically change back a second later?

related questions