/    Sign up×
Community /Pin to ProfileBookmark

Flipclock.js

Copy linkTweet thisAlerts:
Jun 25.2015

I’m trying to use FlipClock.js but it’s not working for me, I’m new to JavaScript.

[CODE] <script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”js/flipclock.min.js”></script>
<script>

var clock = $(‘.your-clock’).FlipClock({

clock.setTime(3600);
clock.setCountdown(true);

});
</script>[/CODE]

My CSS:

[CODE]<link rel = “stylesheet” type=”text/css” href=”css/flipclock.css”>
<link rel = “stylesheet” type=”text/css” href=”css/font-awesome.min.css”>[/CODE]

The Website to download all files are:
[url]http://flipclockjs.com/[/url]

Thanks for anyone who helps me out!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 26.2015 — 
  • 1. You didn't post any HTML. Do you have a container for your clock?
    [code=html]<div class="your-clock"></div>[/code]

  • 2. You have placed javascript instructions into the object being passed to FlipClock at initialization. You have to place these instructions [B]behind[/B] that call:
    var clock = $('.your-clock').FlipClock({
    });
    clock.setTime(3600);
    clock.setCountdown(true);

  • 3. You have to ensure that the DOM is ready (i. e. your container has been created) when the javascript is executed. The simplest way to do this is to place the javascript at the end of the body section.


    • This works for me:
    [code=html]<!DOCTYPE html>
    <html>
    <head>
    <title>Flipclock</title>
    <link rel="stylesheet" type="text/css" href="compiled/flipclock.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="compiled/flipclock.min.js"></script>
    </head>
    <body>
    <div class="your-clock"></div>
    <script>
    var clock = $('.your-clock').FlipClock({
    });
    clock.setTime(3600);
    clock.setCountdown(true);
    </script>
    </body>
    </html>[/code]
    (You will have to adjust the paths.)
    Copy linkTweet thisAlerts:
    @jzhang172authorJun 27.2015 — Thank you very much, although I figured it out before you replied, I really appreciate it. I get very few help as I am learning this by myself and anyone that reaches out, I'm very grateful for. Like you said, I needed a div container for the javascript.
    ×

    Success!

    Help @jzhang172 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...