Best way to do this?

markman641 · 10-03-2012, 10:36 PM

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>

Old Pedant · 10-03-2012, 11:24 PM

??? 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?

Old Pedant · 10-03-2012, 11:26 PM

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.

markman641 · 10-03-2012, 11:43 PM

I was messing with the code and updated my code above.. everything works, but now I just need to add the 10 second delay!

Old Pedant · 10-04-2012, 12:24 AM

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.

markman641 · 10-04-2012, 12:38 AM

Quote:

Originally Posted by Old Pedant

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.

Old Pedant · 10-04-2012, 01:12 AM

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>

markman641 · 10-04-2012, 01:53 AM

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>

markman641 · 10-05-2012, 02:01 AM

So um, I'm really bad with javascript. How do i display the countdown in the Submit button?

Like:

Quote:

Submit... 10
Submit... 9
Submit... 8
Submit... 7
Submit... 6
Submit... 5
Submit... 4
Submit... 3
Submit... 2
Submit... 1
Submit... 0
Submit!

Old Pedant · 10-05-2012, 02:35 AM

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>

markman641 · 10-05-2012, 03:15 AM

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>

Old Pedant · 10-05-2012, 06:57 PM

??? 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.

markman641 · 10-06-2012, 10:08 PM

Quote:

Originally Posted by Old Pedant

??? 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

markman641 · 10-27-2012, 09:57 PM

Alright I ran into a problem.. this isn't working with Firefox but it works fine in Chrome..

Old Pedant · 10-29-2012, 12:35 AM

Which code isn't working in FF? Exactly what is in your post #11 or something different?