Current time: 04-23-2014, 12:36 PM Hello There, Guest! (LoginRegister)


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Twitter Bootstrap and JS countdown?
08-11-2012, 02:13 PM
Post: #1
Twitter Bootstrap and JS countdown?
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

Quote:Golf and alcohol don't mix, that's why I don't drink and drive!
Video Tutorials: Installing MyBB | Upgrading MyBB
Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 02:21 PM
Post: #2
RE: Twitter Bootstrap and JS countdown?
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?

@AlexSmithWI
Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 02:42 PM
Post: #3
RE: Twitter Bootstrap and JS countdown?
Possibly, but my JavaScript is terrible Toungue

Quote:Golf and alcohol don't mix, that's why I don't drink and drive!
Video Tutorials: Installing MyBB | Upgrading MyBB
Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 03:25 PM
Post: #4
RE: Twitter Bootstrap and JS countdown?
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.

@AlexSmithWI
Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 03:59 PM (This post was last modified: 08-11-2012 03:59 PM by Euan T.)
Post: #5
RE: Twitter Bootstrap and JS countdown?
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

Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 08:28 PM
Post: #6
RE: Twitter Bootstrap and JS countdown?
So what would I put for the button? Toungue

Quote:Golf and alcohol don't mix, that's why I don't drink and drive!
Video Tutorials: Installing MyBB | Upgrading MyBB
Visit this user's website Find all posts by this user
Quote this message in a reply
08-11-2012, 09:23 PM
Post: #7
RE: Twitter Bootstrap and JS countdown?
Whatever you want, just use a link with the ID of downloadButton and a blank href attribute if you want.

Visit this user's website Find all posts by this user
Quote this message in a reply
08-12-2012, 07:38 AM (This post was last modified: 08-12-2012 07:40 AM by Tom K..)
Post: #8
RE: Twitter Bootstrap and JS countdown?
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')

Quote:Golf and alcohol don't mix, that's why I don't drink and drive!
Video Tutorials: Installing MyBB | Upgrading MyBB
Visit this user's website Find all posts by this user
Quote this message in a reply
08-12-2012, 10:39 AM
Post: #9
RE: Twitter Bootstrap and JS countdown?
Yup, it should work just fine Smile

Visit this user's website Find all posts by this user
Quote this message in a reply
08-12-2012, 01:23 PM
Post: #10
RE: Twitter Bootstrap and JS countdown?
(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.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)

Contact Us | MyBB | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication