CODEWITHSUNDEEP
javascriptjqueryhtml
Noop
Noop

Reputation: 67

How do I make a function to run only when the mouse is NOT hovering a specified div?

what I got now is:

 function()
      {
          setInterval("getSearch()",10000);
      getSearch();

      }
  );

But I want this interval to pause if the mouse cursor is placed inside a div on my website. How do I attack this problem? Surely I need to give the div an ID.. But some input on how to make the javascript/jquery part is much appreciated.

EDIT: More of my code.. I'm not quite sure where to insert the code in the answers inside this:

$( function() { setInterval("getSearch()",10000); getSearch();

      }
  );

TwitterCache = {};

function getSearch() {

        var url = "http://search.twitter.com/search.json?q=test&refresh=6000&callback=?"; // Change your query here
        $.getJSON
        (
            url,
        function(data)
        {
            if( data.results ) // Checks to see if you have any new tweets
            {
                var i = -1, result, HTML='', HTML2='';
                while( (result = data.results[++i]) && !TwitterCache[result.id] )
                {
                      insert html.. blabla}

Upvotes: 1

Views: 158

Answers (5)

Alireza Eliaderani
Alireza Eliaderani

Reputation: 1974

insert this in your dom-ready function:

var inv = setInterval("getSearch",1000);
$('#yourdiv').mouseover(function(){
    clearInterval(inv);
}).mouseout(function(){
    inv = setInterval("getSearch",1000);
})

Upvotes: 0

Nareshkumar Rao
Nareshkumar Rao

Reputation: 95

The simplest way, and the shortest

Simplest method would be:

<div id="yourDiv">
EXAMPLE TEXT
</div>

<script language="Javascript">

var interval = setInterval("getSearch()",1000);

document.getElementById("yourDiv").addEventListener('mouseover', function()
{
clearInterval(interval);
},false);

document.getElementById("yourDiv").addEventListener('mouseout', function()
{
interval = setInterval("getSearch()",1000);
},false);
</script>

Upvotes: 0

bruno
bruno

Reputation: 1841

I think this should work:

$("#divID").hover(
  function () {
    PauseTheInterValThing()
  }, 
  function()
  {
    setInterval("getSearch()",10000);
    getSearch();
  }
);

Upvotes: 0

RoToRa
RoToRa

Reputation: 38400

setInterval returns a "reference" to that interval you set up, allowing you to stop it with window.clearInterval(), and that's what you have to do:

var myInterval;

function startMyInterval() {
  if (!myInterval) {
    // It's better to call setInterval width a function reference, than a string, 
    // also always use "window", in case you are not in its scope.
    myInterval = window.setInterval(getSearch, 10000); 
  }
}

function stopMyInterval() {
  if (myInterval) {
     window.clearInterval(myInterval);
  }
}

startMyInterval(); // Start the interval 

jQuery("#myDiv").hover(stopMyInterval, startMyInterval);

Upvotes: 2

rahul
rahul

Reputation: 187030

Set a global variable

var intID;

Assign setInterval to this variable

intID = setInterval("getSearch()",10000);

Set an id for the div

$("#divid").hover(function(){
    clearInterval(intID);
},
function(){
    // set the interval again
});

Upvotes: 1

Related Questions