Javascript: Text file saving workaround for ie8

One might not believe it but according to the statistics on Netmarketshare.com, it shows that Internet Explorer 8 still holds close to 20% of the market share in the browser world. Therefore, you might be coming across tricky situations where there is a need to save some data from the browser into a text file and here's a possible workaround for ie8.

* Click here for the statistics taken from Netmarketshare.com.
^ Click here to access the demo that I have created on 'JSFiddle'.
~ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Javascript: Cloning an object...

In Case, you need to do a complete clone of an object in Javascript and you want the original to remain unaffected, then you probably can give this method a go. :)

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Javascript: Some useful sites that helps.

Frankly speaking, I don't have a fantastic memory and in case, you don't have a fantastic memory, you probably can use the following sites to search for useful examples and references. Even though these sites doesn't provide an example for all everything, but it's a great place to start searching.

W3Schools This has been around for quite some time. Not only it covers 'Javascript', it also covers coding environment like 'PHP', 'SQL', 'ASP.NET', etc... Though most of the time it covers only the basic stuff, but it's a great place to get you started.

JavaScripture This covers JavaScript only. But with the number of examples that was provided on the site itself to demonstrate the usage of the different types of JavaScript syntax, makes this a pretty good place to start searching.

Simple Javascript Timer Implementation

Well basically this is a post meant for myself. I keep forgetting how to get this done. Basically this is a simple implementation of a Timer in Javascript.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: Input type number and maxlength fix

Well, there might be situations that you need to limit the number of characters that you are allowing the user to enter in a numerical text field. Therefore, here's a fix for angularJS.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: ng-repeat with conditioning styling

Well, in order to reduce the amount of work, you might be using quite a bit of 'ng-repeat' in your views/html files that uses angularJS. However, there might be a need to style the individual items differently. Therefore...

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: Simple Debugging...

In case you are given an Angular JS based project and you are supposed to do some debugging work, here's a way to get you started with some simple message logging.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: Simple Animation

Here's a simple example on ho to create an animation using AngularJS.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: IE and inline dynamic style...

We saw this interesting bug with AngularJS and inline style with IE browsers. And we finally managed to find a workaround for this problem. And the solution requires ng-style and a separate function. :D

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: 2D Array binding

Here's a simple example to demo 2D array binding with AngularJS.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Playing with Google Search :)

Google search isn't just a search tool. It also comes with...

'Calculator' Click here to give the 'Calculator' a go.

'Unit Converter' Click here to give the 'Unit Converter' a go.

Click here for more interesting search results in Google.

HTML: Post your data into a popup window

Rather than posting the data to a new page, you might need have to post the data to a popup. Therefore, this would help you to get a rough idea on how to do that. (Things get pretty interesting when you learn new stuff everyday. :D)

Source code of the main html file - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Form</title>
<script language="javascript" type="text/javascript">
  function submitForm(formName){
 var popupWin = window.open("",formName,"status,height=540,width=500,resizable=yes,scrollbars=yes");
 popupWin.focus();
  }
</script>
</head>
<body>
<form action="formResults.php" method="post" name="myForm" target="popupWin" onsubmit="javascript:submitForm(this.target);">
Name:<br /><input name="name" type="text" size="50" maxlength="50" /><br />
Address:<br /><input name="address" type="text" size="50"/><br />
<input name="submit" type="submit" value="Submit the form data to a popup"/>
</form>
</body>
</html>

Here's the simple form that I would be posting the data to - formResults.php

Your name is: 
<br />
<?php
  echo $_REQUEST["name"]
?>
<br />
<br />
Your address is: 
<br />
<?php
  echo $_REQUEST["address"]
?>

* Click here for the demo shown in this post.

AngularJS: Select element + filter function

If you are going to use a <select> element in your website that is going to build on top of AngularJS, and at the same time if you ended up using a mixture of normal <option> element and <select> element with ng-repeat, rather than using ng-show to hide some of the elements, it might be better to use a filter function.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Checking for Unicode Characters using Regular Expressions

When there's a need to validate a mixture of strings and unicode characters, it's kinda irritating when you have to throw in all the crazy conditioning statements. Luckily now there's Regular Expressions that can help us to make our job much more easier for example...

* Click here to view a demo of unicode characters matching using Regular Expression.
^ Click here for the list of ascii characters and their corresponding entities.

AngularJS: Moment + timezone example

At my current workplace, they were using this javascript class to handle the time for different time zones, therefore I have created a simple example to showcase this class. :D

Main HTML file - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Moment Timezone</title>
</head>
<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
  <div ng-controller="SelectCtrl">The time in
    <select ng-model="selectedItem" ng-options="item.label for item in myData  | orderBy:'label'" ng-change="updateTime()"></select> is {{formattedTime}}.
  </div>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controller.js"></script>
  <script type="text/javascript" src="js/moment.min.js"></script>
  <script type="text/javascript" src="js/moment-timezone.min.js"></script>
  <script type="text/javascript" src="js/moment-timezone-data.js"></script>
</body>
</html>

Javascript file that stores the respective time zone data - moment-timezone-data.js

//The data of the time zone of the various time zone.
tzData = {
    "zones": {
        "Asia/Singapore": [
            "6:55:25 - LMT 1901_0_1 6:55:25",
            "6:55:25 - SMT 1905_5_1 6:55:25",
            "7 - MALT 1933_0_1 7",
            "7:20 - MALST 1936_0_1 7:20",
            "7:20 - MALT 1941_8_1 7:20",
            "7:30 - MALT 1942_1_16 7:30",
            "9 - JST 1945_8_12 9",
            "7:30 - MALT 1965_7_9 7:30",
            "7:30 - SGT 1982_0_1 7:30",
            "8 - SGT"
        ],
        "Australia/Sydney": [
            "10:4:52 - LMT 1895_1 10:4:52",
            "10 Aus EST 1971 10",
            "10 AN EST"
        ],
        "EST5EDT": [
            "-5 US E%sT"
        ],
        "Europe/Amsterdam": [
            "0:19:32 - LMT 1835 0:19:32",
            "0:19:32 Neth %s 1937_6_1 1:19:32",
            "0:20 Neth NE%sT 1940_4_16_0 0:20",
            "1 C-Eur CE%sT 1945_3_2_2 1",
            "1 Neth CE%sT 1977 1",
            "1 EU CE%sT"
        ],
        "Europe/London": [
            "-0:1:15 - LMT 1847_11_1_0 -0:1:15",
            "0 GB-Eire %s 1968_9_27 1",
            "1 - BST 1971_9_31_2",
            "0 GB-Eire %s 1996",
            "0 EU GMT/BST"
        ]
    },
    "rules": {
        "Aus": [
            "1917 1917 0 1 7 0:1 0 1",
            "1917 1917 2 25 7 2 0 0",
            "1942 1942 0 1 7 2 0 1",
            "1942 1942 2 29 7 2 0 0",
            "1942 1942 8 27 7 2 0 1",
            "1943 1944 2 0 8 2 0 0",
            "1943 1943 9 3 7 2 0 1"
        ],
        "AN": [
            "1971 1985 9 0 8 2 2 1",
            "1972 1972 1 27 7 2 2 0",
            "1973 1981 2 1 0 2 2 0",
            "1982 1982 3 1 0 2 2 0",
            "1983 1985 2 1 0 2 2 0",
            "1986 1989 2 15 0 2 2 0",
            "1986 1986 9 19 7 2 2 1",
            "1987 1999 9 0 8 2 2 1",
            "1990 1995 2 1 0 2 2 0",
            "1996 2005 2 0 8 2 2 0",
            "2000 2000 7 0 8 2 2 1",
            "2001 2007 9 0 8 2 2 1",
            "2006 2006 3 1 0 2 2 0",
            "2007 2007 2 0 8 2 2 0",
            "2008 9999 3 1 0 2 2 0",
            "2008 9999 9 1 0 2 2 1"
        ],
        "US": [
            "1918 1919 2 0 8 2 0 1 D",
            "1918 1919 9 0 8 2 0 0 S",
            "1942 1942 1 9 7 2 0 1 W",
            "1945 1945 7 14 7 23 1 1 P",
            "1945 1945 8 30 7 2 0 0 S",
            "1967 2006 9 0 8 2 0 0 S",
            "1967 1973 3 0 8 2 0 1 D",
            "1974 1974 0 6 7 2 0 1 D",
            "1975 1975 1 23 7 2 0 1 D",
            "1976 1986 3 0 8 2 0 1 D",
            "1987 2006 3 1 0 2 0 1 D",
            "2007 9999 2 8 0 2 0 1 D",
            "2007 9999 10 1 0 2 0 0 S"
        ],
        "Neth": [
            "1916 1916 4 1 7 0 0 1 NST",
            "1916 1916 9 1 7 0 0 0 AMT",
            "1917 1917 3 16 7 2 2 1 NST",
            "1917 1917 8 17 7 2 2 0 AMT",
            "1918 1921 3 1 1 2 2 1 NST",
            "1918 1921 8 1 8 2 2 0 AMT",
            "1922 1922 2 0 8 2 2 1 NST",
            "1922 1936 9 2 0 2 2 0 AMT",
            "1923 1923 5 1 5 2 2 1 NST",
            "1924 1924 2 0 8 2 2 1 NST",
            "1925 1925 5 1 5 2 2 1 NST",
            "1926 1931 4 15 7 2 2 1 NST",
            "1932 1932 4 22 7 2 2 1 NST",
            "1933 1936 4 15 7 2 2 1 NST",
            "1937 1937 4 22 7 2 2 1 NST",
            "1937 1937 6 1 7 0 0 1 S",
            "1937 1939 9 2 0 2 2 0",
            "1938 1939 4 15 7 2 2 1 S",
            "1945 1945 3 2 7 2 2 1 S",
            "1945 1945 8 16 7 2 2 0"
        ],
        "C-Eur": [
            "1916 1916 3 30 7 23 0 1 S",
            "1916 1916 9 1 7 1 0 0",
            "1917 1918 3 15 1 2 2 1 S",
            "1917 1918 8 15 1 2 2 0",
            "1940 1940 3 1 7 2 2 1 S",
            "1942 1942 10 2 7 2 2 0",
            "1943 1943 2 29 7 2 2 1 S",
            "1943 1943 9 4 7 2 2 0",
            "1944 1945 3 1 1 2 2 1 S",
            "1944 1944 9 2 7 2 2 0",
            "1945 1945 8 16 7 2 2 0",
            "1977 1980 3 1 0 2 2 1 S",
            "1977 1977 8 0 8 2 2 0",
            "1978 1978 9 1 7 2 2 0",
            "1979 1995 8 0 8 2 2 0",
            "1981 9999 2 0 8 2 2 1 S",
            "1996 9999 9 0 8 2 2 0"
        ],
        "EU": [
            "1977 1980 3 1 0 1 1 1 S",
            "1977 1977 8 0 8 1 1 0",
            "1978 1978 9 1 7 1 1 0",
            "1979 1995 8 0 8 1 1 0",
            "1981 9999 2 0 8 1 1 1 S",
            "1996 9999 9 0 8 1 1 0"
        ],
        "GB-Eire": [
            "1916 1916 4 21 7 2 2 1 BST",
            "1916 1916 9 1 7 2 2 0 GMT",
            "1917 1917 3 8 7 2 2 1 BST",
            "1917 1917 8 17 7 2 2 0 GMT",
            "1918 1918 2 24 7 2 2 1 BST",
            "1918 1918 8 30 7 2 2 0 GMT",
            "1919 1919 2 30 7 2 2 1 BST",
            "1919 1919 8 29 7 2 2 0 GMT",
            "1920 1920 2 28 7 2 2 1 BST",
            "1920 1920 9 25 7 2 2 0 GMT",
            "1921 1921 3 3 7 2 2 1 BST",
            "1921 1921 9 3 7 2 2 0 GMT",
            "1922 1922 2 26 7 2 2 1 BST",
            "1922 1922 9 8 7 2 2 0 GMT",
            "1923 1923 3 16 0 2 2 1 BST",
            "1923 1924 8 16 0 2 2 0 GMT",
            "1924 1924 3 9 0 2 2 1 BST",
            "1925 1926 3 16 0 2 2 1 BST",
            "1925 1938 9 2 0 2 2 0 GMT",
            "1927 1927 3 9 0 2 2 1 BST",
            "1928 1929 3 16 0 2 2 1 BST",
            "1930 1930 3 9 0 2 2 1 BST",
            "1931 1932 3 16 0 2 2 1 BST",
            "1933 1933 3 9 0 2 2 1 BST",
            "1934 1934 3 16 0 2 2 1 BST",
            "1935 1935 3 9 0 2 2 1 BST",
            "1936 1937 3 16 0 2 2 1 BST",
            "1938 1938 3 9 0 2 2 1 BST",
            "1939 1939 3 16 0 2 2 1 BST",
            "1939 1939 10 16 0 2 2 0 GMT",
            "1940 1940 1 23 0 2 2 1 BST",
            "1941 1941 4 2 0 1 2 2 BDST",
            "1941 1943 7 9 0 1 2 1 BST",
            "1942 1944 3 2 0 1 2 2 BDST",
            "1944 1944 8 16 0 1 2 1 BST",
            "1945 1945 3 2 1 1 2 2 BDST",
            "1945 1945 6 9 0 1 2 1 BST",
            "1945 1946 9 2 0 2 2 0 GMT",
            "1946 1946 3 9 0 2 2 1 BST",
            "1947 1947 2 16 7 2 2 1 BST",
            "1947 1947 3 13 7 1 2 2 BDST",
            "1947 1947 7 10 7 1 2 1 BST",
            "1947 1947 10 2 7 2 2 0 GMT",
            "1948 1948 2 14 7 2 2 1 BST",
            "1948 1948 9 31 7 2 2 0 GMT",
            "1949 1949 3 3 7 2 2 1 BST",
            "1949 1949 9 30 7 2 2 0 GMT",
            "1950 1952 3 14 0 2 2 1 BST",
            "1950 1952 9 21 0 2 2 0 GMT",
            "1953 1953 3 16 0 2 2 1 BST",
            "1953 1960 9 2 0 2 2 0 GMT",
            "1954 1954 3 9 0 2 2 1 BST",
            "1955 1956 3 16 0 2 2 1 BST",
            "1957 1957 3 9 0 2 2 1 BST",
            "1958 1959 3 16 0 2 2 1 BST",
            "1960 1960 3 9 0 2 2 1 BST",
            "1961 1963 2 0 8 2 2 1 BST",
            "1961 1968 9 23 0 2 2 0 GMT",
            "1964 1967 2 19 0 2 2 1 BST",
            "1968 1968 1 18 7 2 2 1 BST",
            "1972 1980 2 16 0 2 2 1 BST",
            "1972 1980 9 23 0 2 2 0 GMT",
            "1981 1995 2 0 8 1 1 1 BST",
            "1981 1989 9 23 0 1 1 0 GMT",
            "1990 1995 9 22 0 1 1 0 GMT"
        ]
    },
    "links": {}
};

moment.tz.add(tzData);

Javascript file that stores our AngularJS Application - app.js

// declare a module
var myApp = this.angular.module('myApp', ['myAppControllers']);

Javascript file that stores our Angularjs Controllers - controller.js

// declare a controller
angular.module('myAppControllers', []).
  controller('SelectCtrl', function ($scope) {
    //the selections for the time zone drop down
    $scope.myData = [{
      label: "Singapore",
      value: "Asia/Singapore"
    }, {
      label: "Sydney",
      value: "Australia/Sydney"
    }, {
      label: "EST5EDT",
      value: "EST5EDT"
    }, {
      label: "Amsterdam",
      value: "Europe/Amsterdam"
    }, {
      label: "London",
      value: "Europe/London"
    }];

 //Preselect the first item in the array
    $scope.selectedItem = $scope.myData[0];
    $scope.formattedTime = "";
    $scope.timer;
 //This function will pick up the selected item from the
 //drop down and display the corresponding time of the
 //time zone
    $scope.updateTime = function () {
   var tempDate;
   var strTz = $scope.selectedItem.value;
      tempDate = moment.tz(strTz);
      $scope.formattedTime = tempDate.format('MMMM Do YYYY, h:mm:ss a');
   $scope.$apply();
    }
    $scope.updateTime();
 //We will run the function updateTime every second
    setInterval(function () {
      $scope.updateTime()
    }, 1000);
  });

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.
~ Click here to find out more about 'AngularJS'.
* Click here to find out more about 'moment.js'.
^ Click here to find out more about 'Moment Timezone'.
~ Click here to generate the data for the respective time zone for 'Moment Timezone'.

AngularJS: Select + Option in Angular

If you are going to use a <select> element in your website that is going to build on top of AngularJS, rather than using a mixture of <select> and <option> element, it would be best if you use a combination of <select> and the attribute 'ng-options'. As for the reason why, you can take a look at the demo below, and take a look at it again across browsers like 'Internet Explorer 8/9', 'Mozilla Firefox', etc...

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

AngularJS: Alternate Background Row Styles

When you have a table with fixed contents, it is pretty easy for you to apply styling that applies different set of styles on alternate table rows. However, things get more and more tricky when you are hiding and showing some of the rows. Therefore, here's a simple example that I have created using 'AngularJS' that helps you to overcome the problem of alternate background styles + hidden rows.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Hiding a Option element in your webpage

By applying a style="display:none" to the <option> element in your webpage will not give you the desired results across all the browsers. Therefore, you either remove or add the <option> element when needed or create 2 different set of <select> element to provide the user the correct set of menu.

Here's the source code of the page that I have created, try viewing it using different browsers like 'Internet Explorer', 'Mozilla Firefox' and 'Google Chrome' and you can spot the difference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide a menu option</title>
</head>
<body>
Fruits:
<select>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pear" style="display:none">Pear</option>
    <option value="pineapple">Pineapple</option>
</select>
</body>
</html>

* Click here for the demo shown in this post.

Tour de Flex

I was trying to look for the Style Explorer for Flex 4 but it seems that the closest alternative right now would be...

The contents shown in the above are taken from 'Adobe' website.

You can click on the button shown in the above to download and install the desktop application 'Tour de Flex' too.

* Click here for the official website for 'Tour de Flex'.
^ Click here for the web version of 'Tour de Flex'.

HTML: Background Colour with Opacity

Well, I was working the other day and one of my colleagues told me that the div that has a background colour with an opacity of 70 doesn't work in IE. After a bit of Googling and a bit of trial and error, I managed to get it working. (It works in Google Chrome, Mozilla Firefox, Internet Explorer 7, 8 and 9. However, the solution doesn't really work with Internet Explorer with different standards.)

Let's go through parts of the source codes first. The following liner will enforce your Internet Explorer 9 onwards to fall back and use Internet Explorer 8 standards. However, this will also caused all your Internet Explorer 9 codes to malfunction.

<meta http-equiv="X-UA-Compatible" content="IE=8" >

The following codes are meant for super old browsers that doesn't supports the css RGBa(3 primary colours and alpha).

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;

The following codes are meant for super new browsers that supports the css RGBa(3 primary colours and alpha). (For example: latest Mozilla Firefox, Google Chrome, etc.)

/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);

The following codes are meant for the older Internet Explorers. Would need to add the condition <!--[if lte IE 8]>, because browsers like Internet Explorer 9 will apply both filters and RGBa. =.=""

    <!--[if lte IE 8]>
        <style>
            #mainbg1 {
                /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
                /* For IE 8*/
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
            }
        </style>
    <![endif]-->

And here's all the source codes at one glance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <title>Test</title>
    <style type="text/css" media="screen"> 
        body{
            margin: 0px;
			background-color:#00FF00;
		}
        #mainbg {
            width:100%; 
			height:1000px; 
			text-align:center; 
			position:absolute;
        }
        #mainbg1 {
            width:500px;
            height:500px;
            margin: 0px auto;
	
            /* Fallback for web browsers that doesn't support RGBa */
            background: rgb(0, 0, 0) transparent;
            /* RGBa with 0.7 opacity */
            background: rgba(0, 0, 0, 0.7);
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            #mainbg1 {
                /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
                /* For IE 8*/
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
            }
        </style>
    <![endif]-->
</head>
<body>
<div id="mainbg">
    <div id="mainbg1">
    </div>
</div>
</body>
</html>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.