CodingForums.com - Need help with an interrupt

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Need help with an interrupt (http://www.codingforums.com/showthread.php?t=284722)

Need help with an interrupt

In a post by _Aerospace_Eng_ on 06-08-2009, 10:27 PM

The following code works.

If a user wanted to click anywhere on the page being rotated to see more of the links on that page, what is the code to interrupt the rotation & where would that code be?

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Page</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
html, body, iframe {
height:100%;
width:100%;
overflow:hidden;
}
</style>
<script type="text/javascript">
var pages = new Array(); // this will hold your pages
pages[0] = 'page1.html';
pages[1] = 'page2.html';
pages[2] = 'page3.html';
pages[3] = 'page4.html';
pages[4] = 'page5.html';
pages[5] = 'page6.html';

var time = 30; // set this to the time you want it to rotate in seconds

// do not edit
var i = 1;
function setPage()
{
if(i == pages.length)
{
i = 0;
}
document.getElementById('holder').setAttribute('src',pages[i]);
i++;
}
setInterval("setPage()",time * 1000);
// do not edit
</script>
</head>

<body>
<iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe>
</body>
</html>
[CODE]

Well that was asking to be re-done.

I hope you're not intending to frame pages from another domain.

( Chrome needs to be running under http: protocol )

Code:

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Rotating Page</title>

<style type="text/css">

* {

margin:0;

padding:0;

border:0;

}

html, body{

height:100%;

width:100%;

overflow:hidden;

}

iframe{ width:100% }



#ifHolder{ width:80%; margin-left:10% }



</style>

</head>



<body>

<div id='ifHolder'>

 <iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe>

 <p>

 <input type='button' id='toggleBtn' value='Stop/Start'>

</div>

<script type="text/javascript"> /* Place BELOW iframe */



function iframeCycler( iframeID, seconds )

{

  var pages = new Array(), 

      ifr = document.getElementById( iframeID ),

      idx = 0,

      timer = null;



  for( var i = 2, arg; ( arg = arguments[ i ] ); i++ )

    pages.push( arg );    

      

  function f()

  {

    if( idx >= pages.length )

      idx = 0;

      

    ifr.setAttribute('src', pages[ idx++ ] );

  }

  

  function toggle()

  {

    if( timer )

    {

      clearInterval( timer );

      timer = null;

    }

    else    

      timer = setInterval( f, seconds * 1000 );

  }



  function addHandler( obj, evt, func )

  {

    obj.attachEvent ? obj.attachEvent( 'on'+evt,func ) : obj.addEventListener( evt, func, false );

  }

  

  addHandler( ifr, 'load', (function( iframe, func )

  {

    return function()

    {

      try

      {

        iframe.contentWindow.document.onclick = func;      

      }

      catch(e){}

    }   

  })( ifr, toggle ) );

    

  toggle();

  

  return toggle;

}



document.getElementById( 'toggleBtn' ).onclick = iframeCycler( 'holder', 1, 'page1.html', 'page2.html', 'page3.html' ); /*<- OK to add more pages */



</script>

</body>

</html>