MyBB Community Forums

Does anybody know how to make a button using twitter's bootstrap CSS framework that counts down?

Twitter bootstrap has button that can be enabled or disabled using JavaScript. Basically I want it to load te page in a disabled state, count down for ten seconds and then activate to provide the link for a few files I want to host


Thanks

Could you not have text that count downs with the same styling as a button and then after the countdown replace it with a real button?

Possibly, but my JavaScript is terrible

Well it's going to be javascript no matter how you try to do it . In less you have a countdown that redirects to another page with the real button.

Something like this aught to suffice:

var timeToWait = 30; // wait 30 seconds

var countDown = setInterval(countDownTimer, 1000); // run our function every second

function countDownTimer()
{
	timeToWait = timeToWait-1; // count timer down by one

  	if (timeToWait <= 0) // if timer is finished, stop counting down and change our download button
	{
		clearInterval(countDown);
		$('#downloadButton').html('Download Now!').attr('href', 'downloadNow.jpg'); // change this to do whatever you want the button to do...
		return;
	}

	$('#downloadButton').html(timeToWait + ' seconds to wait...'); // display the countdown time left
}

Obviously you'll wish to change it to perform as you want. I haven't tested it either but it might do what you want

So what would I put for the button?

Whatever you want, just use a link with the ID of downloadButton and a blank href attribute if you want.

Ok, so the ID needs to be "downloadButton" I wasn't sure

Also, I assume I can put another attribute on? Like the class? Using:

.attr('class','class2')

Yup, it should work just fine

(2012-08-12, 07:38 AM)Tom K. Wrote: [ -> ]Also, I assume I can put another attribute on? Like the class? Using:

.attr('class','class2')

You can also use .addClass() if you would prefer that. Either work though.