Did you find this useful?
Socialize it today.


Adding a Time Enabled Button for your Website

Wednesday, January 23, 2013

You may have visited some web sites that have certain controls in place such as delaying the enabling of buttons and links on the page, or requiring that a captcha code be submitted prior to enabling components on the page. This is generally done to ensure that when web spiders and bots that access your page, do not arbitrarily invoke the target components on the page. Another example may be that you want to present certain content to your user, an advert or a video presentation prior to enabling additional content.

In this tutorial, we are going to cover how to build a countdown timer that can be used to delay a button from being enabled on the page. This can be an effective way to ensure that your visitor is a human and also require that a delay occurs prior to serving the visitor the additional content. This additional content could be a video, a download link, or some other resource on your web site.

The HTML

We will start with a simple HTML example. All we need for this example is a simple button element. In this example, we will disable the button element by default so that the visitor is not able to click the button until the timer has reached '00' seconds. Once the timer is finished, the button will be enabled. We will enable the button using JavaScript.


<div id="wrapper">
  <div id="myTimer"></div>
  <button type="button" id="myBtn" class="btnDisable" disabled onclick="alert('Finally!')">Please wait...</button>
</div>

There a few things you may want to note about this HTML code. The button has an id attribute that we will use to reference in our JavaScript, a disabled attribute with no value, and an onclick event that we are just using for demonstration purposes. The onclick event will not be triggered until the button is enabled.


The CSS

We use CSS to style our timer as well as the other components used in this demo such as the div elements that surround the timer and button.


#wrapper {
  text-align:center;
  border:1px solid #7F7F7F;
  width:150px;
  margin:25px auto;
  padding:25px;
  background-color:#E3E4E4;
}

#myTimer {
  font:64px Tahoma bold;
  padding:20px;
  display:block;
}

button {
  width:125px;
  padding:10px;
}

.btnEnable {
  background-color:#E6F9D2;
  border:1px solid #97DE4C;
  color:#232323;
  cursor:pointer;
}

.btnDisable {
  background-color:#FCBABA;
  border:1px solid #DD3939;
  color:#232323;
  cursor:wait;
}

In our CSS sample, we use a different class for the enabled and disabled button.


JavaScript and jQuery

Most of the code used in this example is pure JavaScript. However, there are a few lines of jQuery included. So make sure that you reference the jQuery library in your page.


var sec = 15;
var myTimer = document.getElementById('myTimer');
var myBtn = document.getElementById('myBtn');
window.onload = countDown;

function countDown() {
  if (sec < 10) {
    myTimer.innerHTML = "0" + sec;
  } else {
    myTimer.innerHTML = sec;
  }
  if (sec <= 0) {
    $("#myBtn").removeAttr("disabled");
    $("#myBtn").removeClass().addClass("btnEnable");
    $("#myTimer").fadeTo(2500, 0);
    myBtn.innerHTML = "Click Me!";
    return;
  }
  sec -= 1;
  window.setTimeout(countDown, 1000);
}

In this example, you should notice that most of the code is written in pure JavaScript. However, there are three lines of code that leverage the jQuery library. The first two jQuery statements deal with the removal of the disabled attribute and class, and the enabling of the 'btnEnable' class on the HTML button. The third creates an animated effect and fades the timer over 2500 milliseconds. It is not required to use jQuery for this example, but I did include it only because jQuery makes those particular steps much easier when compared with the JavaScript equivalent. In this example, we assign the 'sec' variable to 15 which is the number of seconds we want our timer to start the countdown at. Once the countdown reaches '00', the button is enabled. We used the setTimeout method to create a delay of 1000 milliseconds, or 1 second before the countDown() function is executed again. Once the 'sec' variable is equal to '0', the function exists and is no longer executed.


Demo

You can view our online demo by clicking on this link.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor Murachs JavaScript and DOM Scripting JavaScript and jQuery: The Missing Manual