ansaurus

Question

jQuery Binary Clock

Answer 1

+2 A:

Go to the following URL:

http://www.scottklarr.com/files/binary-clock/clock.htm

and view the source.

Here is a breakdown:

This code sets up jQuery and the plugin:

<head>
<link href="binary-clock.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="binary-clock.js"></script>
</head>

It also references a style sheet, which can be downloaded from http://www.scottklarr.com/files/binary-clock/clock.css

This code:

<div id="binaryClock">
    <div id="bcHa">
        <img src="led0.png" alt="" id="bcHa1" />
        <img src="led0.png" alt="" id="bcHa2" />
    </div>
    <div id="bcHb" class="edge">
        <img src="led0.png" alt="" id="bcHb1" />
        <img src="led0.png" alt="" id="bcHb2" />
        <img src="led0.png" alt="" id="bcHb4" />
        <img src="led0.png" alt="" id="bcHb8" />
    </div>

    <div id="bcMa">
        <img src="led0.png" alt="" id="bcMa1" />
        <img src="led0.png" alt="" id="bcMa2" />
        <img src="led0.png" alt="" id="bcMa4" />
    </div>
    <div id="bcMb" class="edge">
        <img src="led0.png" alt="" id="bcMb1" />
        <img src="led0.png" alt="" id="bcMb2" />
        <img src="led0.png" alt="" id="bcMb4" />
        <img src="led0.png" alt="" id="bcMb8" />
    </div>

    <div id="bcSa">
        <img src="led0.png" alt="" id="bcSa1" />
        <img src="led0.png" alt="" id="bcSa2" />
        <img src="led0.png" alt="" id="bcSa4" />
    </div>
    <div id="bcSb">
        <img src="led0.png" alt="" id="bcSb1" />
        <img src="led0.png" alt="" id="bcSb2" />
        <img src="led0.png" alt="" id="bcSb4" />
        <img src="led0.png" alt="" id="bcSb8" />
    </div>
</div>

...is where the actual clock is referenced on the page. It contains div references for all of the image files that comprise the dot elements of the clock. It also contains some CSS class references, so some styling is taking place.

This code:

<script type="text/javascript">
    $(document).ready(function() { 
         updateBinaryClock(); 
    });
</script>

...waits for the page to fully load in the browser, and then kickstarts the clock plugin.

Robert Harvey 2009-09-22 20:49:17

$this.append('<div class="clock"><d... Does that code mean that it needs no container? It just writes directly to the html file?I have a <script> in the head the src's the file.And this:<script type="text/javascript">$(document).ready(function() { binaryClock(); });</script>in the body. What am I doing wrong? Please help.

Vian Esterhuizen 2009-09-22 21:08:56

If you save a copy of the page source at the link above as an .HTM file into a folder on your computer, and put the scripts and images being used by that web page in the same folder, it should just work.

Robert Harvey 2009-09-22 21:16:06

I appreciate that, but I legitimately want to learn what I'm doing. Thanks for the help though. I think I'm getting close.

Vian Esterhuizen 2009-09-22 21:22:29

Figured it out.Thanks

Vian Esterhuizen 2009-09-22 21:42:19

Answer 2

+1 A:

Use this JavaScript:

$(document).ready(function () {
    $('#clock_div').binaryClock();
});

For this HTML code:

<div id="clock_div"></div>

Demo (with plugin source) here.

Anatoliy 2009-09-22 20:50:03

ansaurus

tags:

views:

answers:

jQuery Binary Clock

related questions