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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post

    Best way to do this?

    There is a iFrame.. and displayed in that iframe is a certain URL... and outside of that iFrame there is a SKIP/Continue button that is disabled for 10 seconds. After 10 seconds, that button becomes available and when the user clicks it, it changes the webpage displayed in the iFrame to something else, thus disabling the skip button for another 10 seconds. Now, how I have it setup is that the last URL in the array is a script on my site that does an action.. is there an easier way to do this? am i able to POST into my own document using that submit button in order to change a value i have setup?

    Here is my code..
    Code:
    <html>
      <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Untitled Document</title> 
        <script>
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://asdfasdf.com"
          ]; 
    
          function loadNextPage(dir) {   
            cnt+=dir;
            if (cnt<0) cnt=webpageArray.length-1; // wrap
            else if (cnt>= webpageArray.length) {
                    this.form.action = '';
                   } // wrap
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            return false; // mandatory!
          } 
        </script>
      </head> 
    
      <body>  
      <iframe id="myframe" src="http://cnn.com/"></iframe> 
    <form name="this_form" method="GET" action="">
    <input type="submit" name="submit3" value="Submit" onclick="return loadNextPage(1)">
    
    </form>
      </body> 
      </html>
    Last edited by markman641; 10-04-2012 at 12:42 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    ??? where is all the stuff you talked about?

    Where is the 10 second delay, for example?

    And you say the last URL is "a script on my site that does an action." But you don't say what action that is and/or show the contents of that last URL.

    Not clear why you need the last URL to do what it is doing. Why not just put the equivalent code right in this page, triggered when "Continue" is clicked but there are no more URLs to show?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Oh...and if you changed from type="submit" to type="button" you wouldn't need to worry about returning any value from the button click.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    I was messing with the code and updated my code above.. everything works, but now I just need to add the 10 second delay!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Again:
    Code:
    <input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">
    and move your <script> to the *BOTTOM* of the page (just before the </body>) for simplicity and this will then work:
    Code:
        <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://asdfasdf.com"
          ]; 
    
          function loadNextPage(dir) {   
            cnt+=dir;
            if (cnt<0) cnt=webpageArray.length-1; // wrap
            else if (cnt>= webpageArray.length) {
                    this.form.action = '';
                   } // wrap
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            document.this_form.submit3.disabled = true;     
            setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );
          } 
          loadNextPage(0); // actually loads first page
        </script>
    It doesn't matter, but if you wish you could change the <iframe> to just:
    Code:
      <iframe id="myframe"></iframe>
    because now the code will start off by loading the first URL into the iframe.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    markman641 (10-04-2012)

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Again:
    Code:
    <input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">
    and move your <script> to the *BOTTOM* of the page (just before the </body>) for simplicity and this will then work:
    Code:
        <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://asdfasdf.com"
          ]; 
    
          function loadNextPage(dir) {   
            cnt+=dir;
            if (cnt<0) cnt=webpageArray.length-1; // wrap
            else if (cnt>= webpageArray.length) {
                    this.form.action = '';
                   } // wrap
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            document.this_form.submit3.disabled = true;     
            setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );
          } 
          loadNextPage(0); // actually loads first page
        </script>
    It doesn't matter, but if you wish you could change the <iframe> to just:
    Code:
      <iframe id="myframe"></iframe>
    because now the code will start off by loading the first URL into the iframe.
    Unfortunately, this does not work. The page loads, although the continue button is enabled by default and when i click it, it does nothing.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    A typo in my code:
    Code:
    setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );
    "functiion" should be "function".

    This page works for me:
    Code:
    <html>
      <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Untitled Document</title> 
      </head> 
    <body>  
    
    <iframe id="myframe"></iframe> 
    
    <form name="this_form" method="GET" action="">
        <input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">
    </form>
    <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://codingforums.com"
          ]; 
    
          function loadNextPage(dir) {   
            cnt += dir;
            // this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap
            
            if (cnt>= webpageArray.length) {
                alert("we are done");
                return;
            } 
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            document.this_form.submit3.disabled = true;     
            setTimeout( function() { document.this_form.submit3.disabled = false; }, 10000 );
          } 
          loadNextPage(0); // actually loads first page
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    markman641 (10-04-2012)

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Thanks! If anyone is wondering, I changed it up just a bit so that after the last page, it submits the form.

    Code:
    <html>
      <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Untitled Document</title> 
      </head> 
    <body>  
    
    <iframe id="myframe"></iframe> 
    
    <form name="this_form" method="POST" action="">
        <input type="submit" name="submit3" value="Submit" onclick="loadNextPage(1)">
    </form>
    <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://codingforums.com"
          ]; 
    
          function loadNextPage(dir) {   
            cnt += dir;
            // this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap
            
            if (cnt>= webpageArray.length) {
                return;
            } 
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            document.this_form.submit3.disabled = true;     
            setTimeout( function() { document.this_form.submit3.disabled = false; }, 10000 );
          } 
          loadNextPage(0); // actually loads first page
    </script>
    </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    So um, I'm really bad with javascript. How do i display the countdown in the Submit button?

    Like:
    Submit... 10
    Submit... 9
    Submit... 8
    Submit... 7
    Submit... 6
    Submit... 5
    Submit... 4
    Submit... 3
    Submit... 2
    Submit... 1
    Submit... 0
    Submit!
    Last edited by markman641; 10-05-2012 at 03:05 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Untested.
    Code:
    <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://codingforums.com"
          ]; 
          var countDown;
    
          function doCountDown( )
          {
              var btn = document.this_form.submit3;
              if ( countDown <= 0 )
              {
                  btn.value = "Submit";
                  btn.disabled = false;
                  return;
             }
             btn.value = "Submit... " + countDown;
             btn.disabled = true;
             --countDown; 
             setTimeout( doCountDown, 1000 );
        }
    
        function loadNextPage(dir) {   
            cnt += dir;
            // this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap
            
            if (cnt>= webpageArray.length) {
                alert("we are done");
                return;
            } 
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            countDown = 10;
            doCountDown( );
        } 
        loadNextPage(0); // actually loads first page
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    markman641 (10-05-2012)

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Works like a charm dude! I can't thank you enough You've helped so much.

    Here is my fully developed code (added one line to it to automatically scroll back to top after they click submit


    Just ONE more thing though. I attempted to put in a code that detects the length of the page in iframe and automatically adjust the iframe to show the full length, however this code did not work. If you are able to update my code below to do that, it would be freakin amazing

    Code:
    <iframe id="myframe" width=100% height=1000px></iframe> 
    
    <form name="this_form" method="POST" action="">
        <input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1)">
    </form>
    <script type="text/javascript">
          var cnt=0,webpageArray = [
            "http://cnn.com/",
            "http://rapidcashgpt.com/", 
            "http://codingforums.com"
          ]; 
          var countDown;
    
          function doCountDown( )
          {
              var btn = document.this_form.submit4;
              if ( countDown <= 0 )
              {
                  btn.value = "Submit";
                  btn.disabled = false;
                  return;
             }
             btn.value = "Submit... " + countDown;
             btn.disabled = true;
             --countDown; 
             setTimeout( doCountDown, 1000 );
        }
    
        function loadNextPage(dir) {   
            cnt += dir;
            // this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap
            
            if (cnt>= webpageArray.length) {
                return;
            } 
            var iframe = document.getElementById("myframe"); 
            iframe.src = webpageArray[cnt]; 
            countDown = 10;
            doCountDown( );
    $('html, body').animate({ scrollTop: 0 }, 'fast');
        } 
        loadNextPage(0); // actually loads first page
    </script>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    ??? I don't see any code in there that attempts to do what you said.

    I'm not even sure that it is possible, when the contents of an <iframe> are coming from a foreign site. I think the rules that prevent cross-domain scripting prevent it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    ??? I don't see any code in there that attempts to do what you said.

    I'm not even sure that it is possible, when the contents of an <iframe> are coming from a foreign site. I think the rules that prevent cross-domain scripting prevent it.
    No, i deleted the code because it didnt work. And yes, I'm pretty sure it's possible

  • #14
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Alright I ran into a problem.. this isn't working with Firefox but it works fine in Chrome..

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Which code isn't working in FF? Exactly what is in your post #11 or something different?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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