How to create a floating JavaScript Clock for UTC and Local Time?


Tags: javascript,jquery,css,jquery-ui

Problem :

I would like to create a rather plain, but attractive clock stylable with css that will float in the upper right corner of a page about 100 pixels down from the top and a 5 pixel margin between the clock's right side and the vertical scrollbar.

I need two clocks: one to display UTC time with a UTC label to the left and a second to display Local Time likewise.

These two clocks should also float so that when you scroll down the page they will become top justified after moving down the page.

How would I go about creating an arrangement of this nature? Could you please provide an example of how the code to create this? jQuery would be fine if simpler.

The two clocks may look something like this:

Two clocks that float right and attach to top on scrolldown



Solution :

1) here is a script that will fix the container in IE

http://www.gregjopa.com/2011/07/conditional-fixed-positioning-with-jquery/

2) clock plugin
http://www.ajaxupdates.com/jclock-jquery-clock-plugin/
https://github.com/dsparling/jclock

change the jQuery to the latest though

Example - please download the respective sources to your own server:

DEMO

<!doctype html>
<html>
<head>
<title>Conditional Fixed Positioning with jQuery</title>

<style type="text/css">
#wrapper {
    width: 960px; 
    margin: 0 auto;
}

#header {
    border: 1px solid;
    padding: 10px;
    margin-bottom: 10px;
}

#content {
    float: right;
    width: 620px;
    padding: 0 10px 10px;
    border: 1px solid;
    margin-bottom: 10px;
}

#right-column {
    width: 300px;
    float: right;
    position: relative;
}

#sidenav {
    border: 1px solid;
    margin-bottom: 10px;
    background-color: #F0F0F0;
    padding: 5px;
}

.sidenav-fixed {
    position:fixed;
    top:0;
    margin:0;
    width: 288px;
}

#links {
    border: 1px solid;
    padding: 5px;
}

h3 {
    padding-left: 5px;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/dsparling/jclock/master/jquery.jclock.js"></script>

<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-throttle-debounce/master/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
<script type="text/javascript" src="https://raw.github.com/gist/855078/bf649cd4b0b2df52d3840835c6f7699b79935bab/modernizr-tests.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    if (Modernizr.positionfixed && !Modernizr.appleios && !Modernizr.android) {

        // cache selector queries
        var sidenav = $('#sidenav'),
        sidenavWrap = $('#sidenav-wrap'),
        view = $( window ),
        sidenavHeight = sidenav.outerHeight(true),
        sidenavWrapperOffset = sidenavWrap.offset();

        function horizontalScrollCheck() {
            // update sidenav left position when horizontal scrollbar exists and is scrolled            
            if (view.scrollLeft() > 0) {
                sidenav.css('left', (-1 * view.scrollLeft() + 8));
            }
            else if (sidenav.css('left') != sidenavWrapperOffset.left) {
                sidenav.css('left', sidenavWrapperOffset.left);
            }
        }

        function stickyNavCheck() {

            // apply fixed positioning when sidenav scrolls to the top of the browser and is smaller than viewport height
            if ($(this).scrollTop() > sidenavWrapperOffset.top && view.height() > sidenavHeight){

                if (!sidenav.hasClass('sidenav-fixed') ) {
                    sidenav.addClass('sidenav-fixed');

                    // fill visual space of static positioned sidenav
                    sidenavWrap.css('margin-bottom', sidenavHeight);
                }
                else {
                    horizontalScrollCheck();
                }

            } else {
                if (sidenav.hasClass('sidenav-fixed') ) {
                    sidenav.removeClass('sidenav-fixed');
                    sidenavWrap.css('margin-bottom', 0);
                }
            }       

        }

        // using Cowboy's jQuery throttle/debounce plugin to throttle the scroll event
        view.bind("scroll resize", $.throttle( 100, stickyNavCheck ) );

        // update offset and left position of sidenav on resize event
        view.bind("resize", $.throttle( 100, function() {
                sidenavWrapperOffset = $('#sidenav-wrap').offset();
                if (sidenav.hasClass('sidenav-fixed') ) {
                    horizontalScrollCheck();
                }
            })
        );

    }   


      var options = {
        timeNotation: '12h',
        am_pm: true,
        fontFamily: 'Verdana, Times New Roman',
        fontSize: '20px',
        foreground: 'yellow',
        background: 'red'
      }

  $('#jclock1').jclock(options);

  options["utc"]=true;
  options["utc_offset"]=-1;
  $('#jclock2').jclock(options);


});

</script>
</head>

<body>

<div id="wrapper">

    <div id="header">
        <h1>Conditional Fixed Positioning w/ jQuery</h1>
    </div>

    <div id="right-column">

        <div id="sidenav-wrap">
            <div id="sidenav">
                <h2>Sticky Clock</h2>
                <p><div class="corner"><div class="jclock"></div></div></p>

<p><div class="nocorner"><div class="jclock"></div></div></p>




                <a href="#">Back to Top</a>
            </div>
        </div>  



    </div>

    <div id="content">

        <h2>Scrollable Content</h2>
        <hr />
        <a id="1"></a>
        <h3>Ut consequat est vitae erat</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <h3>Opto tego, distineo luptatum</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="2"></a>
        <h3>Praesent egestas nulla vel</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <h3>Opto tego, distineo luptatum</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="3"></a>
        <h3>Aenean placerat libero vel</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="4"></a>
        <h3>Morbi viverra lacus pretium</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="5"></a>
        <h3>Ut sit amet orci at magna</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="6"></a>
        <h3>Suspendisse accumsan molestie</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

        <a id="7"></a>        
        <h3>Praesent scelerisque</h3>
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>

    </div>

</div>
</body>

</html>

    CSS Howto..

    How to make both text and image change on rollover via CSS?

    How can I select second element and after that in CSS?

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    CSS: How to fill a dynamic container that contains fixed sized elements?

    How could I center a div that is inside a div? Auto margins aren't working

    How to merge CSS classes?

    How to fluid images when resize window?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How do I remove a CSS class from one anchor and assign it to another using jquery?

    How to emulate table cells with CSS (without float)?

    How to align links on top of each other inside of a box with CSS?

    How to remove the border line around the element in html and css?

    How can I get divs inside a div to continue on a new row when the current row (screen horizontally) is full?

    How can I add CSS to grandchild pages in an unordered list on Wordpress?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How to center menu css

    How to have a DIV appear after you hover over an image/link/another div?

    CSS: How to accomplish a div which is blurred at the edges?

    How to apply CSS style in javascript for id generated at runtime

    How to create live event for css

    How to get background colors with fullCalendar and Bootstrap

    How do I set the height of an iframe with the min-height property in the body?

    how to vertically align this div?

    How to set -fx-max-width to USE_PREF_SIZE in JavaFX css?

    Entire window becomes blur after a modal is shown jQuery why?

    how to add classes to the dropdown menu in the TinyMCE table editor

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    in slick slideshow, just want center slide to be active

    How to style differently only the first list item from unsorted list

    How to center part of a navbar