Question

Here is what i have so far: http://jsfiddle.net/BgEtE/

I am trying to get something like this: http://fusionmedia.dk/construction/

I need a progress bar like that and i need the days to be displayed like they have it. Also, i need to use a font called “Russel square” for the timer. I have looked all over but am having trouble.

Answer 1

for the timer you can use this one and you could integrate a progress bar, but I am not very sure.

This is another great tutorial that you could easily adapt to get what you want.

Well, I am not an expert but it’s not so difficult, Take a look to this updated demo. Pay attention to the default variables // def values

   var iCms = 1000;
    var iMms = 60 * iCms;
    var iHms = 3600 * iCms;
    var iDms = 24 * 3600 * iCms;  

this what you need to use to “schedule” the progress bar in this section:

// def options
        var aDefOpts = {
            start: new Date(), // now
            finish: new Date().setTime(new Date().getTime() + 5 * iMms), // now + 5 days

For Example, if you write …+5 * iMms it would be five minutes from now. iDms => Days / iHms=> hours / iCms=> seconds.

Also look at the css I’ve added in the demo, I think that to use a custom font, you first have to upload the font to your server, and then add the font in the style-sheet using something like this:

@font-face{
font-family: myFont;
src: url('myFont.ttf');
}

@font-face{
font-family: myFontEI;
src: url('myFont.eot');
}

Then Attach it as a font family like so...

font-family: myFont, myFontEI;