Need help with an interrupt

RMBARBER · 12-25-2012, 06:37 PM

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]

Logic Ali · 12-25-2012, 11:32 PM

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>