search

objectivehtml / FlipClock

http://flipclockjs.com/
MIT License
2.74k stars 954 forks source link

Firefox Counter Problem #326

Closed enessefak closed 6 years ago

enessefak commented 7 years ago

untitled untitled

killerbees19 commented 7 years ago

I had the same problem, but only when the clock (or it's parent objects) are displayed with center alignment and width is uneven. You can see my (Javascript based) workaround here: Live Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script src="https://www.happytec.at/js/jquery-2.1.1.js" type="text/javascript"></script>
        <script src="https://www.happytec.at/js/flipclock.js" type="text/javascript"></script>

        <script src="https://www.happytec.at/js/functions_flipclock.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://www.happytec.at/style/css/flipclock_small.css" type="text/css">

        <title>Example</title>
    </head>
    <body>
        <div style="padding: 15px;">
            <div class="flip-clock-container" id="countdown_container">
                <div id="countdown">
                    <noscript>
                        Static text...
                    </noscript>
                </div>
                <div class="flip-clock-overlay">
                    <a href="http://example.com/">
                        <img alt="" src="https://www.happytec.at/images/pixel_transparent.gif" border="0" style="width: 100%; height: 100%;">
                    </a>
                </div>
            </div>
        <div>

        <script type="text/javascript">

            $(document).ready(function()
            {
                flipclock_countdown('countdown', 1616685, '&ndash;');
                flipclock_center('countdown', 'countdown_container'); // <-- RELEVANT LINE!
            });

        </script>
    </body>
</html>

flipclock_small.css

@import url("flipclock.css");

.flip-clock-label { display: none; }
.flip-clock-wrapper { margin: 0px; width: 426px; }

.flip-clock-wrapper ul { width: 40px; height: 40px; margin: 2px; }
.flip-clock-wrapper ul li { line-height: 40px; }
.flip-clock-wrapper ul li a div div.inn { border-radius: 3px; font-size: 35px; }
.flip-clock-wrapper ul li a div.down { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.flip-clock-wrapper ul li a div.up:after { top: 19px; height: 2px; }

.flip-clock-divider { width: 10px; height: 44px; }
.flip-clock-dot.top { top: 13px; } .flip-clock-dot.bottom { top: 25px; }
.flip-clock-dot.top, .flip-clock-dot.bottom { left: 2px; }
.flip-clock-dot{ width: 6px; height: 6px; }

.flip-clock-container { width: 426px; height: 48px; }
.flip-clock-overlay { width: 426px; height: 48px; position: relative; left: 0px; top: -49px; z-index: 10; }

functions_flipclock.js

function flipclock_countdown(id, time, c)
{
    if(time < 0)
    {
        return flipclock_static(id, c);
    }

    return clock = $('#' + id).FlipClock(Math.abs(time - 1),
    {
        countdown: true,
        clockFace: 'DailyCounter',
        minimumDigits: 9
    });
}

function flipclock_static(id, c)
{
    $('#' + id).addClass('flip-clock-wrapper');
    $('#' + id).html('<ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><span class="flip-clock-divider hours"><span class="flip-clock-label">Stunden</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><span class="flip-clock-divider minutes"><span class="flip-clock-label">Minuten</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><span class="flip-clock-divider seconds"><span class="flip-clock-label">Sekunden</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul><ul class="flip "><li class="flip-clock-active"><a href="#"><div class="up"><div class="shadow"></div><div class="inn">' + c + '</div></div><div class="down"><div class="shadow"></div><div class="inn">' + c + '</div></div></a></li></ul>');
}

function flipclock_center(id, container)
{
    callback = function()
    {
        $('#' + container).css('position', 'relative');
        $('#' + container).css('left', Math.round(($('#' + container).parent().width() - $('#' + id).width()) / 2) + 'px');
    };

    $(document).ready(callback);
    $(window).on('resize', callback);
}
objectivehtml commented 6 years ago

This shouldn't be an issue in the new version closing this old thread as the library as been rewritten. Open a new issue if anyone is still having issues on the new js-es6 branch, which is the v1 draft release.