Random JavaScript Tutorials

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

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

<script>
var now = new Date();
console.log(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 an HTML element (DIV)

1. Place this code snippet in the HEAD element:

<style>
#mylayer {
    visibility: hidden;
    width: 400px;
    height: 370px;
}
</style>
<script>
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>

Related posts