0

I want to detect when a specific part of a webpage changes and have the page refresh when it happens. Is this possible? For example, let's say there's a green, absolutely positioned element about 50px by 50px in the upper left corner of a page - I want the page to refresh whenever it turns red.

Basically what I'm trying to build is an overlay of a website that will detect when notifications pop up and refresh the page automatically. If there's other methods that are better than what I've come up with, please I'm open to anything.

  • 2
    What event turns it red? You should run a delegate when that fires. Of create a custom event to trigger your other code. – Jared Farrish Sep 29 '12 at 21:33
  • can't you handle the absolute element with jquery? – Taha Paksu Sep 29 '12 at 21:33
  • The thing is that I don't control when the element turns red - basically I need to create a script that will look for the change and then do something because of the change. –  Sep 29 '12 at 21:34
  • 1
    You mean it's an act of God? If something is triggering an event, you can piggyback on that event. See: http://api.jquery.com/on – Jared Farrish Sep 29 '12 at 21:51
  • I don't have control of the trigger though - I'm viewing a website through and iframe and trying to refresh it when any 'notification indicator' pops up. –  Sep 29 '12 at 22:00
  • Ok, that's the disconnect. You want a `window` parent to a (cross-domain?) `iframe` to "take a snapshot" of the `iframe` and determine if something blinks in that image? If that's what you're anticipating, without doing it in an extension to the browser, you're out of luck. – Jared Farrish Sep 29 '12 at 22:35
  • See [this question](http://stackoverflow.com/questions/4579682/how-to-save-image-of-iframe-underneath-html5-canvas). – Jared Farrish Sep 29 '12 at 22:36
  • That's exactly what I'm trying to do - darn it. –  Sep 29 '12 at 22:37
  • Is it possible to have the page just keep refreshing, without every single thing reloading every time? Some sort of quick refresh to check for new content? –  Sep 29 '12 at 22:40

2 Answers2

0

You could use:

$(element).on('DOMAttrModified', function() {
    //code
});

Not sure if this is standard.

Sidharth Mudgal
  • 4,234
  • 19
  • 25
  • It actually didn't get a chance of being implemented on all browsers, and is already [deprecated](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference). – bfavaretto Sep 29 '12 at 21:54
0

You could use this to check every second:

function hasChanged(hasItChanged)
{
 //your code, eg

 if(hasItChanged) alert("yep");
 else alert("nope");

}

function check(){
  if($("element").css("background-color") == "rgb(255, 0, 0)")
    hasChanged(true);

  else
    hasChanged(false);
}

setInterval(check, 1000); //check every second (1000 miliseconds)

Just change the if($("element").css("background-color") == "rgb(255, 0, 0)") line to some CSS that you find changes (and obviously change the $("element") to the selector you want).

EDIT: I've found you have to use RGB for it to work, as far as colours go. But you can always type $("element").css("background-color") into a browser's console and see what it gives you. Maybe you'll need an or statement for cross-browser support, although I presume that at least in modern browsers that won't be necessary.

  • This won't detect changes within an iframe with content from another domain though. –  Sep 29 '12 at 23:07