CODEWITHSUNDEEP
javascripthtmlcssfrontendflipclock
Spriggs857
Spriggs857

Reputation: 13

Autocentering Flipclock.js object on all screen sizes

I'm trying to find a way to dynamically center my flipclock.js on a page regardless of screen size. Every solution I have found so far seems to not be working (due to some inner specifications in flipclock.js code in my opinion). I'm using github pages to host this clock here: http://spriggs857.github.io/misc/ and here is my code:

<style type="text/css"> 
    #counter {
        position:fixed;
        top: 50%;
        left: 30%;
        width:70em;
        height:50em;
    }
</style>

<body>
  <div id="counter" class="clock" style="margin:-4em;"></div>

    <script type="text/javascript">
        var clock;
        $(document).ready(function() {
            // Grab the current date
            var currentDate = new Date();
            var pastDate  = new Date('April 19, 2015 23:17:00');
            // Calculate the difference in seconds between the future and     current date
            var diff = currentDate.getTime() / 1000 - pastDate.getTime() /         1000;
            // Instantiate a countdown FlipClock
            clock = $('.clock').FlipClock(diff, {
                clockFace: 'DailyCounter'
            });
        });
    </script>
</body>

Any and all help will be greatly appreciated. I also want to center large text above and below this timer so if anyone can help with that I will be eternally grateful!

Upvotes: 1

Views: 2571

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13689

It is centered it's just your width isn't right. Set the counter width to auto instead.

<style type="text/css"> 
    #counter {
        position:fixed;
        top: 50%;
        left: 50%;
        width:auto;
        height:50em;
    }
</style>

Update

I noticed that the margin:-4em; on the #counter element isn't generated by the plugin. To fix it update that margin to make it fully centered.

  <style type="text/css"> 
        #counter {
            position:fixed;
            top: 50%;
            left: 50%; // make it 50% for all sizes
            width:auto;
            height:50em;
            margin-left: -310px; // #counter width divided by two
        }
    </style>

Upvotes: 4

Related Questions