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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable Button for time period on page load

    Hi,

    Hopefully someone can help. I want to disable a button on a webpage for 30 seconds after the page loads. After 30 seconds the button will become active and allow them to go onto the next page. The button is an image if that makes a difference. I would be so grateful if someone could show me what to put in the head tags and body of the page.

    Thanks in advance for any responses.

    Gerard

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here you are:-


    Code:
    Click on this image which will beome enabled after 30 seconds<br>
    <input type = "image"  src = "myImage.gif" alt = "whatever" id = "mybutton" onclick = "go2page()" disabled = true>
    
    
    <script type = "text/javascript">
    
    setTimeout(delay,30000);  // 30 seconds
    
    function delay() {
    document.getElementById("mybutton").disabled = false;
    }
    
    function go2page() {
    // window.location.href = "YourNextPage.html";
    }
    
    </script>
    Place the script right ahead of the closing </body> tag.

    30 seconds is quite a long time to make a user to wait unless there is a very good reason and they will very likely get bored and move away from your site.


    Quizmaster: What do crossed swords signify on an Ordnance Survey Map?
    Contestant: A swimming pool.
    Last edited by Philip M; 05-14-2013 at 12:50 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the quick reply. I have copied the code as you said however it does not seem to be working. The image shows up and is not enabled (its clickable but doesn't do anything) however it does not seem to become active after 30 seconds.

    I think it might be better also if I swap the button image after the 30 seconds. i.e. have a button faded out that's not clickable and after 30 seconds a proper button appears.

    Didn't realize until you gave me the code and I tested it that people might just think the button is broke.

    Thanks again for your help btw

  • #4
    New Coder
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps you could post your code and we can take a loot at it.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by gerdydog View Post
    Hi,

    Thanks for the quick reply. I have copied the code as you said however it does not seem to be working. The image shows up and is not enabled (its clickable but doesn't do anything) however it does not seem to become active after 30 seconds.

    I think it might be better also if I swap the button image after the 30 seconds. i.e. have a button faded out that's not clickable and after 30 seconds a proper button appears.

    Didn't realize until you gave me the code and I tested it that people might just think the button is broke.

    Thanks again for your help btw
    Well, it works for me.

    Use this to test:-

    Code:
    This image will beome enabled after 3 seconds<br>
    <input type = "image"  src = "myImage.gif" id = "mybutton" onclick = "go2page()" disabled = true>
    
    
    <script type = "text/javascript">
    
    setTimeout(delay,3000);  // 3 seconds
    
    function delay() {
    document.getElementById("mybutton").disabled = false;
    alert ("Button now enabled");
    }
    
    function go2page() {
    alert ("OK");
    // window.location.href = "YourNextPage.html";
    }
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    This is exactly what I put in the body.

    <input type = "image" src = "images/splashme.png" class="splashme" alt = "whatever" id = "mybutton" onclick = "go2page(john.html)" disabled = "true">

    and then I put this before the final </body> tag

    <script type = "text/javascript">

    setTimeout(delay,30000); // 30 seconds

    function delay() {
    document.getElementById("mybutton").disabled = false;
    }

    function go2page() {
    // window.location.href = "YourNextPage.html";
    }

    </script>


    Forgive for being stupid but do I also need to call in a certain javascript library in the header? At the minute I only have a call to Jquery for something else. Sorry if I am sounding stupid!

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    onclick = "go2page(john.html)"

    Where on earth did to get that from?

    It should be just onclick = "go2page()"

    and then in the script

    function go2page() {
    window.location.href = "john.html";
    }

    Why have you placed "true" in quotes? It is a Boolean value, not a string.
    If you embellish the code you have been given without knowing what you are doing then you likely to experience problems.
    Last edited by Philip M; 05-14-2013 at 07:30 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dont know how the quotes got there! Sorry for being stupid anyhow. It is now working great.

    Thank you so much for the help, Super Skillz

    If not yourself as I dont want to be pestering you and changing the question again maybe someone else reading this thread would know how to make this script with a default button not clickable and after 30 seconds a different button appears that's clickable.

    Thinking of having a copy of the button only faded out (Just an image with no link) and then after the time limit is up it becomes active (The proper image with link appears).

    Thanks again Philip

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    That is somewhat different from what you first asked for.

    Code:
    <div id = "div1" style="display:block">
    <image src = "One.gif">
    </div>
    <div id = "div2" style = "display:none">
    <input type = "image"  src = "Two.gif" onclick = "go2page()">
    <div>
    
    <script type = "text/javascript">
    
    setTimeout(delay,30000);  // 30 seconds
    
    function delay() {
    document.getElementById("div1").style.display="none";
    document.getElementById("div2").style.display="block";
    }
    
    function go2page() {
    // window.location.href = "YourNextPage.html";  // the actual url of your page
    }
    
    </script>
    Fading an image is more complicated. You will find examples at
    http://www.vicsjavascripts.org.uk/

    Or use jQuery - many examples to be found with Google.
    Last edited by Philip M; 05-14-2013 at 09:22 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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