Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Twitter Bootstrap and JS countdown?
#1
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 Smile


Thanks
Reply
#2
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?
Reply
#3
Possibly, but my JavaScript is terrible Toungue
Reply
#4
Well it's going to be javascript no matter how you try to do it Toungue. In less you have a countdown that redirects to another page with the real button.
Reply
#5
Something like this aught to suffice:

PHP Code:
var timeToWait 30// wait 30 seconds

var countDown setInterval(countDownTimer1000); // 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 Toungue
Reply
#6
So what would I put for the button? Toungue
Reply
#7
Whatever you want, just use a link with the ID of downloadButton and a blank href attribute if you want.
Reply
#8
Ok, so the ID needs to be "downloadButton" Smile I wasn't sure

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

Code:
.attr('class','class2')
Reply
#9
Yup, it should work just fine Smile
Reply
#10
(08-12-2012, 07:38 AM)Tom K. Wrote:  Also, I assume I can put another attribute on? Like the class? Using:

Code:
.attr('class','class2')

You can also use .addClass() if you would prefer that. Either work though.
Sculpture CMS
I'm just another unicorn.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)