CODEWITHSUNDEEP
javascripthtmlpentaho
Dhinakar
Dhinakar

Reputation: 4151

how to stop the js function on mouse over in it?

This code dynamically moves some dashboard files within specified interval of time in front end. Now once i move my mouse on any particular dashboard files its not stopping. So suggest me the code to stop the dynamic action on mouse over.

var i=0;

var stp;

var dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
          '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
          '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function k()
{
self.setInterval("clock()",8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}


function StopFunction(){
clearInterval(stp);
}

Layout page:

<div class="map">
<body onload="k()" onmouseover="StopFunction()">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm">
</iframe>
</div>
</div>
.

-- Edit

Now onmouseover function is working but when i remove the mouse no action takes place. I tried using onmouseout function. Can anyone suggest me the js function to retain or continue the existing the old one after removing the mouse.

Upvotes: 1

Views: 3584

Answers (2)

mplungjan
mplungjan

Reputation: 177685

Try this - complete code - all unobtrusive Only thing to consider is the global var which is frowned upon

DEMO

<html>
<head>
<script>
var tId, urlIndex=0, dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
      '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
      '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];

function clock() {
  document.getElementById('mainfrm').src =dd[urlIndex];
  urlIndex++;
  if(urlIndex>=dd.length) {
    urlIndex=0;
  }
}
function k() {
  tId = setInterval(clock,8000);
}
window.onload=function() {
  k(); // start the script
  var mapDiv = document.getElementById("mapDiv");
  mapDiv.onmouseover=function() {
    clearInterval(tId)
  }

  // the following MAY trigger when over the iframe - remove if necessary
  mapDiv.onmouseout=function() {
    k();
  }

}
</script>
</head>
<body>

  <div id="mapDiv" class="map">
    <iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm"></iframe>
  </div>
</body>
</html>

Upvotes: 2

Afshin
Afshin

Reputation: 4215

var stp;
function k()
{
 stp=setInterval(function(){clock()},8000);
}
function clock()
{
 document.getElementById('mainfrm').src =dd[i];
 i++;
 if(i==4)
{
 i=0;
 }
 }

function StopFunction()
{
  clearInterval(stp);
}

<div class="map" onmouseover="StopFunction()">

Upvotes: 4

Related Questions