The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,468 other followers

Simple iframe clock via Free Clocks for Your Website

Posted by jpluimers on 2021/08/11

Using [WayBack] Free Clocks for Your Website, I created this clock for a 1920×1080 web dashboard which is a web page hosted on [WayBack] raw.githack.com with an iframe hosted at www.timeanddate.com

I know that is a risk, but that is OK for now: that site has existed for a very long time and probably will last a while.

There is a truckload of options you can use, despite the clock being simple. Luckily the [WayBack] FAQ: Free Clocks for Your Website explains these options.

This is the gist of the above “this clock” page:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
body {
margin: 0; /* override browser setting for body `margin: 8px;` */
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
.box {
float: left;
width: 100vw; /* Firefox/Chrome outside Mac OS X: force viewport-width */
overflow: hidden; /* remove scroll bars; does not work for iframes */
background-color: azure;
}
iframe {
border-width: 0; /* override browser setting for iframe `border-width: 2px; */
height: 100vh;
width: 50vw;
}
.clock_iframe {
float: right;
height: 30vh;
width: 16vw;
}
</style>
<title>Clock in frame</title>
</head>
<body>
<div class="box">
<iframe class="clock_iframe" src="https://freesecure.timeanddate.com/clock/i6xvy9ve/n16/szw300/szh300/hoc000/cf100/hgr0/fiv0/fas34/fdi74/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1" frameborder="0" width="300" height="300">
<!– https://www.timeanddate.com/clocks/free.html –>
</iframe>
</div
</body>
</html>

–jeroen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

 
%d bloggers like this: