Streaming live at 10am (PST)

Adding TimeCircles Countdown


#1

Hello,

I need help implementing this countdown: http://git.wimbarelds.nl/TimeCircles/index.html

I have added a DIV element, given it the ID: "DataCountdown", and used the Custom Attributes to add [data-date="2015-08-28 17:00:00"].

To replicate this code that was generated on the developer's page:

<div id="DateCountdown" data-date="2015-08-28 17:00:00" style="width: 100%;"></div>

I then added the files JS and CS files to my DropBox, and linked them in the Custom Code > Footer Code section of the site settings:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.dropbox.com/s/7ug410cxw8s0ggc/TimeCircles.js?dl=0"></script>
<link href="https://www.dropbox.com/s/y7l090yfq68wiv7/TimeCircles.css?dl=0" rel="stylesheet">
<script type="text/javascript">

$("#DateCountdown").TimeCircles({
"animation": "smooth",
"bg_width": 0.7,
"fg_width": 0.013333333333333334,
"circle_bg_color": "#ffffff",
"time": {
"Days": {
"text": "Days",
"color": "#5C6BC0",
"show": true
},
"Hours": {
"text": "Hours",
"color": "#FFCA28",
"show": true
},
"Minutes": {
"text": "Minutes",
"color": "#66BB6A",
"show": true
},
"Seconds": {
"text": "Seconds",
"color": "#EF5350",
"show": true
}
}
});

</script>

What am I missing? Please advise.

Thanks,


#2

Hi @PMAGz

can you give us your read-only link so we can look deeper in to the issue?

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

thanks smile


#3

Hey there, author of TimeCircles here.

I'm not familiar with webflow, but looking at your code it looks like you're linking to the javascript file and css file incorrectly. At the end of both there is ?dl=0, that should be (I think) ?dl=1 . With that said, if you can host these files somewhere other than dropbox; I would recommend it.

A good way would be using rawgit.com, go there and enter the URL of the files as they are on github. ie:
https://raw.githubusercontent.com/wimbarelds/TimeCircles/master/inc/TimeCircles.js and
https://raw.githubusercontent.com/wimbarelds/TimeCircles/master/inc/TimeCircles.css

Note that, simply using the URL's I provided above won't work well, since the content type for those wouldn't be set correctly. Rawgit will help with that as well as providing better load times for the files (CDN).

I hope this helps smile

[edit]

You might also want to put the javascript inside jQuery's "on DOM ready". It would look something like:


$(function(){
$('#DateCountdown').TimeCircles({
// Your options here
});
});

(Kind of annoying that the indentation isn't preserved).


#4

Hi @WimBarelds

Thanks for joining the forums and for the help smile


#5

Thanks, Wim! I'll try this and see if I can get it to work. I'm inexperienced when it comes to jQuery and js, in general...so it's probably something very simple that I am just overlooking. Stay tuned.


#6

Hi Wim,

I've tried using rawgit to reference the files, as you suggested...but still to no avail. Do I need to edit/update any of the script code for my use, or is it ready to go as is?

Here's what I have done, thus far:

  1. Added reference links to the CSS, JS, and JQUERY files to the HEAD section of my page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/wimbarelds/TimeCircles/master/inc/TimeCircles.js"></script>
<style>
    /**
     *	This element is created inside your target element
     *	It is used so that your own element will not need to be altered
     **/
    .time_circles {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /**
     *	This is all the elements used to house all text used
     * in time circles
     **/
    .time_circles > div {
        position: absolute;
        text-align: center;
    }

    /**
     *	Titles (Days, Hours, etc)
     **/
    .time_circles > div > h4 {
        margin: 0px;
        padding: 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Century Gothic', Arial;
    }

    /**
     *	Time numbers, ie: 12
     **/
    .time_circles > div > span {
        display: block;
        width: 100%;
        text-align: center;
        font-family: 'Century Gothic', Arial;
        font-size: 300%;
        margin-top: 0.4em;
        font-weight: bold;
    }
</style>
  1. Created a DIV on my page with the ID "DateCountdown" and DATA-DATE info...and gave it a width of 100%

<div class="countdown-wrap" id="DateCountdown" data-date="2015-08-28 17:00:0"></div>
  1. I then added the custom code for my unique settings to the HEAD of my page (is this the correct spot?):

<script type="text/javascript">
    $(document).ready(function(){
        $('#DateCountdown').TimeCircles({
            "animation": "smooth",
            "bg_width": 1.2,
            "fg_width": 0.016666666666666666,
            "circle_bg_color": "#eee",
            "time": {
                "Days": {
                    "text": "Days",
                    "color": "#5C6BC0",
                    "show": true
                },
                "Hours": {
                    "text": "Hours",
                    "color": "#FFCA28",
                    "show": true
                },
                "Minutes": {
                    "text": "Minutes",
                    "color": "#66BB6A",
                    "show": true
                },
                "Seconds": {
                    "text": "Seconds",
                    "color": "#EF5350",
                    "show": true
                }
            }
        });
    });
</script>

What am I missing?!


#7

Can you link to a page where I can see this? At a glance all I can see "wrong" is that your data-date attribute seems to be missing a 0 at the end.

The script for timecircles is placed after the timecircles script is loaded right?


#8

Just a headsup:

I've found why this error was occurring. The problem stems from webflow always loading a jQuery javascript file. It does this after the footer, at (as I understand it) a time where no scripts can be loaded anymore at a later time.

This is bad! It means that in order to use jQuery, the website has to load two jQuery files. What's worse is that it makes the use of jQuery plugins impossible (or more accurately: Somewhat difficult). The user loads jQuery, loads the jQuery-plugin they wish to use; and the jQuery variable ends up being overwritten (which makes the jQuery plugin inaccessible).

I would strongly recommend loading the jquery javascript file somewhere near the top of the head element. This would solve not only this problem; but also others like it; plus IMO it's cleaner code-wise smile

I've suggested a work-around for PMAGz, so he should be able to get his problem solved. But ideally this is something that webflow should fix.


#9

Hi @WimBarelds

Can your script be put into our footer script area? The footer script area lets uses add their own script which loads after the jQuery call.

For more information on this, please refer to this article: http://help.webflow.com/site-settings/custom-code#adding-body-code


#10

The script can be put in the footer area (it's simply a <script src=".../TimeCircles.js"> and $('#Id').TimeCircles({ /* options */ }); .Would this put the script after jQuery is included? If so, that should work; but when I suggested this PMAGz said he thought this wasn't possible.

If it is, that's a viable solution.

[edit] Sidenote:

On the page you linked to, it has this code snippet: $(document).ready(function(){ ...
This works fine, and there's nothing really wrong with it. But it's the "old" method/code for accomplishing this, the new way is simply $(function(){ ... . Works the same.


#11