CodingForums.com
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Best way to do this? (http://www.codingforums.com/showthread.php?t=275081)

markman641 10-03-2012 10:36 PM
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>

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 (Post 1276048)
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 (Post 1276675)
??? 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?


All times are GMT +1. The time now is 01:22 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.