title: Javascript - JQuery - clearInterval/setInterval - iframe cycle won't stop on click
body: <p>I'm fairly new to Javascript in general, and I cobbled together a small script from things found mostly on this site to try to get a small iframe to cycle through a bunch of links, which it does brilliantly. However, I also want it to stop cycling when the user clicks on the iframe or any of its contents.</p>
  
  <p>Here is the code I have so far. There is only one iframe on the HTML page.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
  &lt;!--
  var sites = [
    "side/html5.html",
    "side/silverlight.html",
    "side/wordpress.html",
    "side/mysql.html",
    "side/php.html",
    "side/css3.html"
  ];
  var currentSite = sites.length;
  var timerId;
  var iframeDoc = $("iframe").contents().get(0);
  
  $(document).ready(function ()
  {
    var $iframe = $("iframe").attr("src","side/html5.html");
  
    timerId = setInterval(function()
    {
      (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
      $iframe.attr("src",sites[currentSite]);
    }, 4000);
  
    $(iframeDoc).bind('click', function()
    {
      clearInterval(timerId);
    });
  
  });
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;sidebar&gt;
  &lt;iframe name="sideframe" src="side/html5.html"&gt;&lt;/iframe&gt;
  &lt;/sidebar&gt; ..etc..
  </code></pre>
  
  <p>Please help, I am trying to learn Javascript as fast as I can but as far as I can see, it <em>should</em> work, but it really doesn't.</p>
  
  <p>Thanks for any help you can give me, it's really appreciated.</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>Okay, I've got a new script now, mostly based off of Elias' work, but it doesn't work either. I've pinned it down in Firebug and it's saying that the timerCallback.currentSite value IS updating properly, though I can't find the $iframe's src value to check for it explicitly. As far as I can tell, it is updating the variables properly, it's just not updating the iframe properly. Am I calling/setting the iframe correctly in this code? Also, is the linked in jquery library sufficient for my purposes? I'm a little lost of all these libraries to link to...</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
  
  &lt;!--
  
  var sites = 
  [
    "side/html5.html",
    "side/silverlight.html",
    "side/wordpress.html",
    "side/mysql.html",
    "side/php.html",
    "side/css3.html"
  ];
  
  var $iframe = $("iframe").attr("src","side/html5.html");
  
  function timerCallback()
  {
      timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1;
      $iframe.attr("src",sites[timerCallback.currentSite]);
  
      $($('iframe').contents().get('body')).ready(function()
      {
          $(this).unbind('click').bind('click',function()
          {
              var theWindow = (window.location !== window.parent.location ? window.parent : window);
              theWindow.clearInterval(theWindow.timerId);
          });
      });
  
  }
  
  var timerId = setInterval(timerCallback, 4000);
  
  //--&gt;
  
  &lt;/script&gt; 
  </code></pre>