Simple JavaScript Clock - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
June 5, 2014 at 2:26 pm #172000

minterdewitt
Participant

I am having difficulty with something and I know very little about JavaScript.‏ Basically, I need a clock counting upwards from September 26th, 2013 to whatever the current date may be, showing the years, months, and days.‏ I need to be able to style it as well.‏ Everything I’ve found thus far is already styled or it doesn’t include years.‏ Any help would be greatly appreciated!

Edit: And it needs to be able to run without adding any JavaScript to the head. It needs to run completely in a WordPress widget.

June 5, 2014 at 2:47 pm #172003

Paulie_D
Member

http://praveenlobo.com/techblog/javascript-countup-timer/

June 6, 2014 at 4:34 am #172054

minterdewitt
Participant

I need it to run without adding any JavaScript to the head. I know it’s possible. Is there some other way to do it?

June 6, 2014 at 5:30 am #172063

Mawaha
Participant

If you’re writing a widget you should still be able to use the wp_enqueue_scripts hook as it executes after all the widget related hooks.

So you should still be able to add any scripts to the <head> you need to get your widget to work.

June 19, 2014 at 8:55 am #173163

minterdewitt
Participant

Okay, so I finally got the JavaScript working. Within the widget. Here’s a CodePen of where I am thus far. Now, my next question is, how do I style it using custom CSS? More specifically, how do I add classes and IDs to the JavaScript itself, so I can change its appearance? Here‘s an example of how I want to style it. Thank you in advance! If you want to see it in action on my site, visit here. It’s in the widgets above the footer.

June 19, 2014 at 10:40 am #173173

Alen
Participant

http://codepen.io/alenabdula/pen/sGjlA

June 19, 2014 at 10:51 am #173175

minterdewitt
Participant

Thank you, @Alen. I didn’t realize it was as simple as just wrapping everything in divs. Thank you muchly!

June 19, 2014 at 12:11 pm #173186
minterdewitt
Participant
Okay, so this is more of a CSS issue than JavaScript, but I need to center the counter within the widget. This is what I have for the CSS side:
```
/* COUNTER */

    .counter-paragraph {
        text-transform: uppercase;
    }

    #counter {
        font-size: 4em;
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    #counter div {
        display: inline-block;
        text-align: center;
    }

    #counter strong {
        font-family: "bebas-neue", sans-serif !important;
        font-weight: normal;
    }

    #counter small {
        display: block;
        font-size: 16px;
        margin-top: 18px;
        text-transform: uppercase;
        font-weight: 300;
    }
```
And it’s not centering the content. Yes, I could put a margin that’s half the width of the counter, but that number will change every time the counter changes, so I need to do it programmatically. Once I do this, I’ll be finished! Here‘s the website.

Edit: Also, it’s taking very long for the site to load. Is this because I have the JavaScript within the widget rather than putting it in the footer?
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘JavaScript’ is closed to new topics and replies.