ncr/example.html

## example.html
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
  <script type="text/javascript">

    (function($) {
      $.fn.at_intervals = function(code, interval) {
        return this.each(function() {
          var it = this // this is it :)
          var interval_id = setInterval(function(){
            if($(it).parents("html").length == 1) {
              console.log("codes")
              code();
            } else {
              console.log("kill -9")
              clearInterval(interval_id);
            }
          }, interval);
        });
      };
    })(jQuery);

  </script>
</head>
<body>
  <h1>FF + FireBug. Observe console</h1>
  <a href="#" id="quit">Quit (remove the widget from DOM)</a>
  <script type="text/javascript">
    $("#quit").click(function(){
      $("#tagsoup1").empty()
    });
  </script>


  <div id="tagsoup1">
    <div id="tagsoup2">

      <div id="widget">
        <p>Widget with setIntervals. Self-contained piece of code and looks.</p>
        <div id="logic" style="background-color: red; width: 66px; height: 66px"></div>
        <script type="text/javascript">
          $("#widget").at_intervals(function(){
            $("#logic").toggle(200)
          }, 1000);
        </script>
      </div>

    </div>
  </div>
</body>
</html>


## jquery.at_intervals.js
(function($) {
  $.fn.at_intervals = function(codes, interval) {
    return this.each(function() {
      var it = this // this is it :)
      var interval_id = setInterval(function() {
        // check if "it" is still in the DOM
        if($(it).parents("html").length == 1) {
          codes();
        } else {
          clearInterval(interval_id);
        }
      }, interval);
    });
  };
})(jQuery);
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
	<script type="text/javascript">

	(function($) {
	$.fn.at_intervals = function(code, interval) {
	return this.each(function() {
	var it = this // this is it :)
	var interval_id = setInterval(function(){
	if($(it).parents("html").length == 1) {
	console.log("codes")
	code();
	} else {
	console.log("kill -9")
	clearInterval(interval_id);
	}
	}, interval);
	});
	};
	})(jQuery);

	</script>
	</head>
	<body>
	<h1>FF + FireBug. Observe console</h1>
	<a href="#" id="quit">Quit (remove the widget from DOM)</a>
	<script type="text/javascript">
	$("#quit").click(function(){
	$("#tagsoup1").empty()
	});
	</script>


	<div id="tagsoup1">
	<div id="tagsoup2">

	<div id="widget">
	<p>Widget with setIntervals. Self-contained piece of code and looks.</p>
	<div id="logic" style="background-color: red; width: 66px; height: 66px"></div>
	<script type="text/javascript">
	$("#widget").at_intervals(function(){
	$("#logic").toggle(200)
	}, 1000);
	</script>
	</div>

	</div>
	</div>
	</body>
	</html>
	(function($) {
	$.fn.at_intervals = function(codes, interval) {
	return this.each(function() {
	var it = this // this is it :)
	var interval_id = setInterval(function() {
	// check if "it" is still in the DOM
	if($(it).parents("html").length == 1) {
	codes();
	} else {
	clearInterval(interval_id);
	}
	}, interval);
	});
	};
	})(jQuery);