getButterfly Logo getButterfly

I needed some structural updates for a site, and among them, I added some JavaScript snippets. I will show you 3 of them in this article:

The simplest, most lightweight clock ever written in JavaScript :)
Form field hints using a bit of CSS
Show/Hide Switch Function for a HTML element (DIV)

The simplest, most lightweight clock ever written in JavaScript

1. Add this JavaScript code where you want the clock to appear:

<script type="text/javascript">
var now=new Date();
document.write(now.getDate() + ' ' + "JanFebMarAprMayJunJulAugSepOctNovDec".substr(now.getMonth()*3,3)+', '+now.getFullYear());
</script>

Form field hints using a bit of CSS

1. Add this CSS code to your document:

dl {
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 130px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
.hint {
display: none;
position: absolute;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
background-color: #ffc;
}
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(_images/pointer.gif) left top no-repeat;
}

2. Add this JavaScript code to your document:

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
addLoadEvent(prepareInputsForHints);

3. Add this HTML code to your document:

<dl>
<dt>
<label for="firstname">First Name:</label>
</dt>
<dd>
<input name="firstname" id="firstname" type="text" />
<span class="hint">This is your firstname.<span class="hint-pointer"> </span></span>
</dd>
<dt>
<label for="lastname">Last Name:</label>
</dt>
<dd>
<input name="lastname" id="lastname" type="text" />
<span class="hint">This is your last/family name.<span class="hint-pointer"> </span></span>
</dd>
<dt>
<label for="email">Email:</label>
</dt>
<dd>
<input name="email" id="email" type="text" />
<span class="hint">This is your regular e-mail address.<span class="hint-pointer"> </span></span>
</dd>
<dt><label for="year">Birth Year:</label></dt>
<dd>
<select id="year" name="year">
<option value="">Year</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
</select>
<span class="hint">This is your birth year.<span class="hint-pointer"> </span></span>
</dd>
<dt>
<label for="username">Username:</label>
</dt>
<dd>
<input name="username" id="username" type="text" />
<span class="hint">This is your username/nickname (5 to 9 characters).<span class="hint-pointer"> </span></span>
</dd>
<dt>
<label for="password">Password:</label>
</dt>
<dd>
<input name="password" id="password" type="password" />
<span class="hint">This is your secret password (5 to 9 characters).<span class="hint-pointer"> </span></span>
</dd>
<dt class="button"> </dt>
<dd class="button">
<input type="submit" class="button" value="Submit" />
</dd>
</dl>

Show/Hide Switch Function for a HTML element (DIV)

1. Place this code snippet in the HEAD element:

<style type="text/css">
<!--
#mylayer {
visibility: hidden;
width: 400px;
height: 370px;
}
-->
</style>
<script type="text/javascript">
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible') {
obj[id].style.visibility = 'hidden';
}
else {
obj[id].style.visibility = 'visible';
}
}
</script>

2. Place this code snippet in the BODY element:

<a href="javascript:ShowHide('mylayer')">Show/Hide DIV switch</a>
<div id="mylayer">This is dummy content this is dummy content this is dummy content this is dummy content this is dummy content this is dummy content</div>

That’s it for the JavaScript tutorials.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply