scaling FlipClock about flipclock HOT 11 CLOSED

The ideal scenario for me would be to have a theme's api. I would be nice to include other flip clock styles similar to this one. http://codepen.io/rikschennink/details/lyuaf

The only other CSS I know about is what I used on http://flipclockjs.com/. It's semi-responsive in that if you scale your browser window down it does what you want. I didn't write all the CSS, as it came from another CodePen. The new CSS file is as easy as it has ever been, somebody spent some time and cleaned it up and even created as SASS file. I don't use SASS yet personally, so that file is a little behind the compiled CSS so if somebody know how to update it, I am sure others would appreciate it.

from flipclock.

so that file is a little behind the compiled CSS

o.k., that explains a part of the trouble I had.

from flipclock.

Ok, So it seems if you try to scale by .5 or by .55 or any other odd number the flips move a little bit (although they do in firefox anyway)

I found if i reduced the width below the original size of clock it messed up.

Fudged it a little by having negative margin, but might help someone get it going or improve on scaling.

Preview will be at kurtstrong.com homepage for a while and then will be moved inside projects, titled 'embarrasing'.

...Here is my css for my page...

.clock {
position: relative !important;
padding-top: 0px;
margin-left: -194px;
height:100px;
width: 800px;
/zoom: .6;/
transform: scale(.54);
-ms-transform: scale(.54); /* IE 9 /
-webkit-transform: scale(.54); / Safari and Chrome /
-o-transform: scale(.54); / Opera /
-moz-transform: scale(.54); / Firefox */

... In the flipclock.css file i think you may need to have this on...

.flip-clock-wrapper {
position: relative;
}

from flipclock.

I just use the library to add two countdown clocks with position absolute and with scaling binding on browser resize and I found a jumping issue so to fix it I just added a greater z-index in .flip-clock-wrapper ul li.flip-clock-active {
z-index: 999999; }

also i use the transform scale successfully with the transform-origin:0 0; to keep the same x and y while scaling

from flipclock.

anyone got the scaling working?

from flipclock.

yes , just use the css transform feature to scaling

from flipclock.

@ljcp, thanks for the post. Could you be more specific about how you got this working? A working example would be extremely helpful. Thanks either way.

from flipclock.

@flow-phys something like they already posted:

.clock {
    transform-origin: 0 0;
    transform: scale(.25);
    -ms-transform: scale(.25);
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(.25);
    -o-transform-origin: 0 0;
    -o-transform: scale(.25);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(.25);
}

Then

<div class="clock"></div>
<script type="text/javascript">
        $(function () {
            //debugger;
            var clock = $('.clock').FlipClock(3000, {
                countdown: true,
                clockFace: 'MinuteCounter'
            });
        });

from flipclock.

Possibly close this issue and reference to #161 for responsive styles? Ideally the clock face should not need to use css transforms to scale. This will also require changing the way all components of the clock are sized.

from flipclock.

Thank you!

from flipclock.

https://codepen.io/rikschennink/details/lyuaf

from flipclock.