Javascript event handling (all browsers except ie7)

Now that IE9 supports addEventListener and IE7's market share is diminishing (goodle analytics tell me that ie7 and older is at 14% and loses 2% per month).

If we can support ie8 (@31%) we can forever forget attachEvent.
That mean we support all current browsers but not ie7 and older.

CSS3 Ribbons

How to create this 3d ribbon using only CSS3:

CSS3 title Ribbon. Works in IE9, FF4, C6, O10.

javascript TabView

Simple TabView with CSS3 and Javascript

Javascript i18n (internationalization)

The users of a web app should be able to select the interface language of preference. The default language is english and the developer has to give a list of the terms used along with the translations in all languages supported.
Each term can be

Each user selects a UI language that is stored in: ins.oUser.eUsrLang

Enumeration ins.enLng contains all the languages our system supports.

If a specified term is not supported, in the language that the user has chosen, then the english term is used.

Ajax C#

• Visual Studio 2010/Solution Explorer
• Solution.Add New Project.Visual C#.Web.ASP_NET Empty Web Application
• Project.Add New Item.Visual C#.Generic Handler

aj.ashx

<%@ WebHandler Language="C#" Class="Aj" %>
using System;
using System.IO;
using System.Web;
public class Aj : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
        Stream stIn = context.Request.InputStream;
        int nLen = (int)stIn.Length;
        byte[] aIn = new byte[nLen];
        stIn.Read(aIn, 0, nLen);
        System.Text.UTF8Encoding enc = new System.Text.UTF8Encoding();
        string sData = enc.GetString(aIn);

        string[] aData = sData.Split();
        int nA = Convert.ToInt32(aData[2]);
        int nB = Convert.ToInt32(aData[3]);
        int nResult = nA + nB;  
        context.Response.CacheControl = "no-cache";
        context.Response.ContentType = "application/javascript";
        context.Response.Write("["+nResult.ToString()+"]");
    }
     public bool IsReusable {get {return false;}}
}

Ajax Javascript

How to call an ajax service from a web page using

• Javascript
• XMLHttpRequest
• POST

The server side implementation using C# is in another post.

Javascript Stopwatch

I want to measure how long some processes are taking. So I wrote the Stopwatch class (click "Start", wait some seconds, click "Stop":

Class Stopwatch

"use strict";
ins.Stopwatch = function () {
    var dFr, dTo, that = this;
    this.nMilliseconds;
    this.nSeconds;
    this.nMinutes;
    this.nHours;
    this.nDays;
    var _bRun = false;
    this.bRun = function () { return _bRun; };
    this.Start = function () {
        _bRun = true;
        this.Reset();
        dFr = new Date();
    };
    this.Stop = function () {
        _bRun = false;
        if (!dFr) {
            return Reset();
        } else {
            dTo = new Date();
            return Calc();
        }
    };
    this.Reset = function () {
        dFr = dTo = null;
        this.nMilliseconds =
        this.nSeconds =
        this.nMinutes =
        this.nHours =
        this.nDays = 0;
        return 0;
    };
    this.toString = function (sFormat) {
        if (typeof sFormat !== "string") sFormat = "m:s.f";
        return sFormat.replace(/d/g, this.nDays.toString()).
            replace(/h/g, this.nHours.toString().PadLeft(2, "0")).
            replace(/m/g, this.nMinutes.toString().PadLeft(2, "0")).
            replace(/s/g, this.nSeconds.toString().PadLeft(2, "0")).
            replace(/f/g, this.nMilliseconds.toString().PadLeft(3,"0"));
    };
    var Calc = function () {
        if (dFr && dTo && dFr.getTime() < dTo.getTime()) {
            var nTime = dTo.getTime() - dFr.getTime()
            that.nMilliseconds = Math.round(nTime);

            that.nSeconds = Math.floor(that.nMilliseconds / 1000);
            that.nMilliseconds -= that.nSeconds * 1000;

            that.nMinutes = Math.floor(that.nSeconds / 60);
            that.nSeconds -= that.nMinutes * 60;

            that.nHours = Math.floor(that.nMinutes / 60);
            that.nMinutes -= that.nHours * 60;

            that.nDays = Math.floor(that.nHours / 24);
            that.nHours -= that.nDays * 24;
            return nTime;
        } else {
            return that.Reset();
        }
    };
    this.Reset();
};
if (typeof String.prototype.PadLeft != "function") {
    String.prototype.PadLeft = function (nLen, sPad) {
        if (typeof sPad !== "string") sPad = " ";
        if (typeof nLen !== "number") nLen = 2;
        var sResult = this;
        while (sResult.length < nLen) sResult = sPad + sResult;
        return sResult;
    };
}

Usage:

    var oSW = new i.Stopwatch();
    var oBtn, oDiv;
    window.onload = function () {
        oBtn = document.getElementById("btnFr");
        oDiv = document.getElementById("divResults");
        oBtn.onclick = ToggleSW;
    };
    var ToggleSW = function () {
        oBtn.disabled = true;
        if (oSW.bRun()) {
            oSW.Stop();
        } else {
            oSW.Start();
        }
        oBtn.innerHTML = oSW.bRun() ? "Stop" : "Start";
        oDiv.innerHTML = oSW.bRun() ? "" : oSW.toString("m:s:f");
        oBtn.removeAttribute("disabled");
    };

DOM prototype extensions

DOM should be OO. Fortunately it is to fix with javascript.
The problem is that the code becomes very verbose (and not elegant) when I want to create a part of a web page in code.
When I want to create a table in code, I create a documentFragment and call a MakeTable function:
DOM is not object oriented so for just one row and two cells:

HTML5 Forms browser support

In the first column you can test the TextBox described in the 3rd column.
The second column your browser claims support (or not) of the feature.
The first 6 rows test the new attributes and the following rows test the new input types.
You should try it with the latest Opera & Chrome.

		<input placeholder="write here" />
		<input autofocus />
		<input required />
		<input pattern="\d/\d/\d{4}" />
		<input list="lista" /><datalist id="lista"> <option value="www.ins.gr" label="ins" /> <option value="pkario.blogspot.com" label="blog" /> <option value="www.insmoney.gr" label="insmoney" /> </datalist>
		<input multiple type="email" />
		<input type="email" />
		<input type="url" />
		<input type="number" min="2" max="11" step="3" />
		<input type="range" min="2" max="11" step="3" value="5" />
		<input type="tel" />
		<input type="time" min="11:00" max="22:00" step="30" />
		<input type="date" />
		<input type="month" />
		<input type="week" />
		<input type="datetime" />
		<input type="datetime-local" />
		<input type="search" results="10" autosave="txtSearch" />
		<input type="color" />
27%		<progress value="27" max="100">27%</progress>
value is 70		<meter min="0" max="100" value="70" low="-100" hight="100">value is 70</meter>
Web workers		var oWorker = new Worker("work.js");
Canvas		var oContext = document.createElement('canvas').getContext;
SVG		document.implementation.hasFeature( "http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")
Offline apps		window.applicationCache;
localStorage		window.localStorage["sKey"]=sValue;
sessionStorage		window.sessionStorage["sKey"]=sValue;
Web SQL Database		window.openDatabase
indexedDB		window.indexedDB, mozIndexedDB, webkitIndexedDb
Web Sockets		window.WebSocket
Cross doc messaging		window.postMessage
File API		FileReader
Geo Location		navigator.geolocation
getters & setters		function Person(){ var _sName; } Person.prototype = { get sName(){return this._sName;}, set sName(sVal){this._sName = sVal;} }
A set of words that is marked		A <mark>set of words</mark> that is marked
5pm		<time datetime="2010-08-20T17:00">5pm</time>

CSS entries:

 input:valid {background-color:#efe;}
 input:invalid {background-color:#fee;}

function to check validity:

function Check(oEvt) {
 oEvt = oEvt || event;
 var oEl = oEvt.target || oEvt.srcElement;
 return ("validity" in oInput)? oEl.validity.valid: null;
}

Table based infobox with css3

Table based infobox: html:

<table><thead><tr>
<th>Attribute</th><th>Value</th>
</tr></thead><tbody>
<tr><td>width</td><td>100px</td></tr>
<tr><td>title</td><td>text</td></tr>
<tr><td>colspan</td><td>4</td></tr>
<tr><td>rowspan</td><td>2</td></tr>
</tbody></table>

<table><thead><tr><th>
 Title
</th></tr></thead><tbody><tr><td>
<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
  <li>Fourth element</li>
  </ul>
</td></tr></tbody></table>

css (part of Reset.css included):

* { /*** Reset start ***/
 padding:0;
 margin:0;
 font-family:Tahoma,Verdana,Arial;
 font-size:100%;
}
ul {
 list-style:disc outside;padding-left:25px;
}
table {
 border-spacing:0;
 border:1px solid #666;
}
body {color:#333;}
/* Reset end */
table {
 margin:20px;
 width:10em;
 
 background:#ace;
 background: -moz-linear-gradient(top,#eff,#ace 7%, #ace 90%,#777 );
 background: -webkit-gradient(linear, left top, left bottom,  color-stop(0,#eff), color-stop(0.07, #ace), color-stop(1,#777));

 -moz-border-radius:.6em;
 border-radius:.6em;
 
 -webkit-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 -moz-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
}
 
table th {
 padding:.4em;
 text-align:center;
 border-bottom:1px #888 solid;
 background-color:transparent;
 text-shadow: .06em .06em .1em rgba(0,0,0,0.5);
}
table td {
 background:#fafafa;
 padding:.5em;
 border:1px #888 solid;
}
table tr:last-child td:first-child {
 -moz-border-radius-bottomleft:.5em;
 border-bottom-left-radius:.5em;
}
table tr:last-child td:last-child {
 -moz-border-radius-bottomright:.5em;
 border-bottom-right-radius:.5em;
}