11

I want fadeIn and fadeout backgroud-color using jQuery, I tried below code, It's affect the full div content , I need to add flash effect only for backgroud-color.

   $('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800)
    .fadeout("fast");
<div class="countbox">checkout</div>

I tried this on also but it's not working!

$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800).css("background-color","#FFFFFF");

What's the problem anyone can help me !

Edit

oops! my answer not applying to all window. Which one only giving flash effect for current window but I need to get the flash effect for all window. for example :- When I click on button, it should give me flash effect for div for all windows, exactly like in this website.

11
  • Are you confusing "window" with "div"? AFAIK, you mean you want the flash effect for all elements with a particular CSS style. Apr 18, 2011 at 8:51
  • i am not talking about multiple divs... this about browser window. you can see the flash auction here ... beezid.com .. that effect applies when some click on bid button ..thats what i want
    – Gowri
    Apr 18, 2011 at 9:05
  • 2
    So, you want something to "flash" on all open browsers (all over the Internet) which is viewing that particular web page? Like that auctioning page, which flashes on all browsers viewing that page when somebody placed a bid? Or like Stack Overflow which flashes a message when somebody has added a new answer? I'm afraid you have asked the wrong question then. This requires XHR/Ajax. Apr 18, 2011 at 9:21
  • 4
    Task #1: rewrite your question. You have asked the wrong question. Task #2: Give a higher bounty. This is a non-trivial type of solution, and not a lot of people would spend time teaching you how to do this withou some huge award. Apr 18, 2011 at 9:29
  • 1
    shouting wont get you anywhere...
    – g19fanatic
    Apr 19, 2011 at 11:00

9 Answers 9

5
+25

to do this in separate windows as you're mentioning in your comments, you will need to have some sort of postback to a server to signal when this will happen.

extending omerkirk's answer (which is the correct way to do this IMO).

do an setInterval(function(){.get();}); that periodicially gets information from some background server that stores the current state (per user probably...). When the current state changes, you do the .animate(); on the current window's background to match that of the background server...

This can get very tricky and problematic if you have multiple 'driving' windows instead of just one master window and x client ones...

Really this is a bad idea IMO...

1
  • 1
    This is correct. If you are trying to do this across browser windows, you will need some type of postback system to do the update, along with a way to synchronize the blinking if that is desired. Apr 15, 2011 at 14:27
1

Consider DrJokePu's answer at jQuery animate backgroundColor

0
1

Answer updated based on comments

This is going to be a little more work than you probably wanted it to be. You will need a database with 2 tables. Table will will hold active sessions IDs and table 2 will hold messages:

tblSessions
   ID            Int
   LastSeen      DateTime
   SessionID     Varchar(255)

tblMessages
   ID            Int
   Timestamp     DateTime
   SessionID     Varchar(255)
   Message       Varchar(255)

When a visitor comes to your page, you need to check if the visitor has a session ID. If the visitor does have a session ID already, update the LastSeen column in the tblSessions table. If the visitor doesn't have a session ID, assign on and add it to the tblSessions table. This code should be run on all your pages when they are loaded.

You will need to run a query on the database table tblSessions to remove all entries that have a LastSeen older than some X time. The value of X should be say 5 min. This query could be run at the top of each page load, or in a server backend process.

Now, anytime you want to flash everyone's screens, you add an entry in tblMessages for each entry in tblSessions. Set the Timestamp to the time you send the message, and set Message to "flash".

On the browsers side in javascript, setup a polling function with setInterval. In your polling functions call an ajax script to a server side page to return any messages. This server side script should query the tblMessages for any entries for the current session ID and pass them back. It should also remove the entries from the table.

Back in your javascript polling function you can check for the "Flash" message and flash the screen. The more frequently the polling function is called the more realtime your visitor will be, but more of a load will be but on your server.

Just like with the tbleSessions table, you will want to remove old entries from the tblMessages table if they are over say X +1 min time or you will get old results in the table that can cause issues down the road.

So.. This will flash the screen for anyone visiting your page, at roughly the same time. I say roughly because there is no way to flash at exactly the same time with network lag and everyone polling at slightly different times.... Well no easy way at any rate.

2
  • everybody answering the same but my question is different please check my edit part ... yes your code works fine but the flash effect not affect the all browser windows.. check stephen chung 's comment thats what i am looking for !
    – Gowri
    Apr 19, 2011 at 3:43
  • Answer updated to flash every visitor's page at ruffly the same time.
    – Justin808
    Apr 19, 2011 at 4:17
1

It's a late answer, I found your post trying to find my own project ^^, I developed, a while ago, a jQuery plugin that does exactly what you want to do.

It's very easy to use:

$("selector").flash()

Of course there is some configuration possible.

Check the demo and feel free to use/fork.

https://github.com/MarechJ/jQuery.flash

0

You can't animate background-color's opacity. You can animate its colour only.

Check this plugin.

1
  • Hello alex , please check my edit .. i want the flash effect for all window .. i hope you must have idea !
    – Gowri
    Apr 12, 2011 at 11:28
0

This works for me without any plugin

$('.countbox').css("background-color","#FF0000");
setTimeout(function() { $('.countbox').css("background-color","#FFFFFF"); },800);

we can also continuous color flashing using setInterval with randomly created colors inside this method .

2
  • Have you answered your question?
    – Dawson
    Apr 18, 2011 at 4:26
  • yes thats before but it doesn't work on all browser window thats my issue !
    – Gowri
    Apr 18, 2011 at 4:34
0

This should work. Jquery has an animate function of its own you don't have to use any plugin.

$(".countbox").animate({backgroundColor: "#ff0000"}, 1000);

This should animate your background color from its initial value to #ff0000 in 1000 ms(1 second). I think you should include the animation package from jQueryUI.

Hope it helps

3
  • omerkirk i already tried that .yes it works on current window but not in other window at the same time the button clicked please check my edit
    – Gowri
    Apr 12, 2011 at 11:47
  • @gowri I am not really sure what you mean for all windows( browser windows ? or multiple elements on the same page ?) if you mean all browser windows then I don't think that is possible. If you mean multiple elements on the same window then it should work, I just tried it on multiple divs with the same class and it worked like a charm. If you edit your post with an example for the non working code maybe we can solve your problem.
    – omerkirk
    Apr 14, 2011 at 8:35
  • here we go,beezid.com in this website anyone place the bid the flash effect is applied for the div when i click it gives the same effect ... i mean i need to see the flash effect in all browser windows ......
    – Gowri
    Apr 14, 2011 at 9:27
0

is that what you're looking for? Please see the demo:

http://jsfiddle.net/naveed_ahmad/GbvGU/

3
0

In order to flash the background on the client (single browser), you can use jquery .animate(). You will use this on the callback or as a function when it has to flash.
As you want the flash to happen all over the Internet you will need to run this animation on all open browsers. There are 2 ways to do it.

  1. set a timeout on the client which will check the server data whether it should flash, or not. the down-sides of doing this are that you have to poll quite often if you want "almost live" data, and the flash will not happen in the same time for everyone.
  2. you rise a server side callback, which will notify all open clients to flash, when the data has changed, but you won't be able to do that without server side logic. to do this with ASP.NET Web Pages read this http://msdn.microsoft.com/en-us/library/ms178208.aspx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.