Topic

I’m working with a 200×100 div area that i’d like to implement the clock in. how do i go about doing that?

Replies

Hi,

Clock has all dimensions set as relative (uses all EM values in styles) to the font size. It is enough to set smaller font size and the clock will be smaller and simplest way to do this is to add font size setting directly on the element you are applying clock to. If that is not enough, and you need to have smaller paddings around the numbers, you need to modify plugin styles to set more restrictive and custom values.

Milan

well, it just seems like everything is set to element style, so i’m unsure where in the javascript i should look into

This is for modification of CSS not JavaScript. All styling is done with CSS, JavaScript has nothing to do with that. So, if you apply jQuery call on an element like this one:

<div id="my-timer-element"></div>

You need to add extra styling for it, like this:

#my-timer-element {
font-size: 8px;
}

Also, you can use that ID as starting point to change any style you might need else for that specific rating element. This is basic CSS, really.

Milan

i was wondering if you can help me with this. i’m doing a build in bootstrap and utilizing responsive design with multiple instances of clock. however when you first open the page the clocks are vertical. after you rollover it has the desired state. would you take a look? thanks

http://racerxfactor.com/idealology/home.html

Layout on that page is very badly done with some sort of responsive layout where you put clock in a small space to start (.span1 with 70px), and than inside on cursor hove some JS kicks in and resizes DIV to 400%. So, to start, clock is put into space of 70px, after rollover it is expanded to 200px.

You should make proper layout with widths that are set correctly, since the animation done now will not work with every browser and every device.

thanks, i didn’t catch that

is there a way to effect the font size of the labels i.e. days months years, without effecting the clock fonts?

Yes, each element of the clock has own class based on type (labels) and on the segment (days, hours…). So, you can add own styles for each one to make it different. Use browsers inspectors (firebug for firefox, for instance) to get class for each element.

Milan