Class: WorldClock

pbs.WorldClock

A prototype to represent a single world clock.

The timezone can be specified either as an argument to the constructor, or by specifying it with the data attribute data-timezone on the span to be converted into a clock. An argument to the constructor takes precedence over the data attribute.

The markup produced to represent the clock is very simple:

<span class="pbs-worldclock">
 <span class="pbs-worldclock-hours">HH</span>
 <span class="pbs-worldclock-separator">:</span>
 <span class="pbs-worldclock-minutes">MM</span>
</span>

No CSS attributes are set on any of the elements, so all styling is left to the user. Below is a sample style:

.pbs-worldclock{
   font-weight: bold;
   display: inline-block;
   border: 1px solid green;
   border-radius: 3px;
   padding: 3px;
   background-color: black;
   color: lightgreen;
   font-family: monospace;
}

Constructor

new WorldClock($span, tzopt)

Parameters:
Name Type Attributes Default Description
$span jQuerySingleSpan

a jQuery object representing the HTML span element to be transformed into a clock. Note that all existing content within the span will be will be removed.
tz TimeZoneString <optional>
 Europe/London

The timezone for the clock.
Throws:

An error is thrown when an invalid value is passed for any of the arguments.

Type
TypeError

Members

(private) _$hours :jQuerySingleSpan

The inner span for the hours.

Type:

(private) _$minutes :jQuerySingleSpan

The inner span for the minutes.

Type:

(private) _$separatorHM :jQuerySingleSpan

The inner span for the separator between the hours and minutes.

Type:

(private) _$span :jQuerySingleSpan

A jQuery object representing the span containing the clock.

Type:

(private) _intervalId :integer

When the clock is running, the ID of the interval controlling it, otherwise, 0.

Type:
  • integer

(private) _timezone :TimeZoneString

The clock's timezone as a string.

Type:

Methods

(static) autoInitialise($containersopt)

Initialise all spans with the class pbs-worldclock-auto within a given set of containers.

Parameters:
Name Type Attributes Default Description
$containers jQueryObject <optional>
 $(document)

the container(s) to search for spans to be automatially transformed into clocks. By default the entire document is searched.
Throws:

An error is thrown if the first argument is present, but not a jQuery object.

Type
TypeError

start()

Start the clock.

stop()

Stop the clock.

timezone(tzopt) → {TimeZoneString}

Get and/or set the clock's timezone.

Parameters:
Name Type Attributes Description
tz TimeZoneString <optional>
Throws:

An error is thrown if an argument is passed that is not valid.

Type
TypeError
Returns:
Type
TimeZoneString