Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down 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]

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •