Finite state machine is a very useful design model, it can be used to simulate many events in the world.In short, finite state machine has three features:Number of states is finiteAt any moment, one object can only be in one stateIn some condition, it will transfer from one state to another stateIn JavaScript, finite state machine can be applied in many places. For example, one menu element on a webpage. When the mouse hovers on the menu, the menu will show up, while the mouse moves away, the menu will hide. If we use a state machine, there are two states(show and hide), the mouse will trigger...

Have you ever seen the count down component of Apple before its app downloads reached 50 billion times? It's really cool. On a website, we often need to have a count down function, for example, when a e-commerce site initiates some promotions or some organizations want to start an event. In this post, we introduce some cool jQuery countdown scripts and plugins.Circular Countdown jQuery Plugin MORE INFO / DEMOCoconut – Jquery Countdown Plugin - MORE INFO / DEMOIt contains 4 circles with different sizesDynamic Countdown with Counter – MORE INFO /&nb...

Starting from jQuery 1.9, $.browser is no longer supported to detect the nrpwser type and version. The substitute is $.support. In the newer jQuery 2.x versions, IE 6/7/8 are also not supported. If users want to support IE 6/7/8, they must use jQuery 1.9. If you want to fully support IE and want to use jQuery 1.9 and jQuery 2.0, the official solution is:<!--[if lt IE 9]> <script src='jquery-1.9.0.js'></script><![endif]--><!--[if gte IE 9]> <script src='jquery-2.0.0.js'></script><![endif]-->For the long run, this can help in browser feature ...

In this post, we will share some less known but powerful JavaScript tips which can benefit both novice and veteran JavaScript developers.1. Truncate array with array lengthWe all know that object are passed by reference in JavaScript, but we may be bitten by this rule. Please check below example:var arr1 = arr2 = [1, 2, 3];//Change arr1arr1 = []; // arr2 will still be [1,2,3]arr1 and arr2 point to the same array [1,2,3] initially, later when arr1 repoints to [], the reference to arr2 is not changed, it will still point to [1,2,3]. But if we want both arr1 and arr2 point to [], what should we d...

Writing JavaScript code is tedious and error prone. You not only need to implement the necessary functions, but also need to ensure cross browser compatibility. This often causes the low efficiency of JavaScript developers. Here we recommend 12 tips you can benefit from.1. Remove array element by indexIf we want to remove one element in an array, we can use splice.function removeByIndex(arr, index) { arr.splice(index, 1);}test = new Array();test[0] = ’Apple’;test[1] = ’Ball’;test[2] = ’Cat’;test[3] = ’Dog’;alert(“Array before removing el...

JavaScript is a programming language which can be used on both front end and back end. Its popularity should mainly be attributed to its power in front end side. While people seem not realize its power in back end until the appearance of Node.js. Node.js is a server-side software system designed for writing scalable Internet applications, notably web servers. Programs are written on the server side in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability.It was widely known by program...

There are lots of websites containing only one page now with the popularity of AJAX. The website will load different contents according to different inputs from users.This approach provides good user experience and it also helps save bandwidth, the drawback is that AJAX contents are not easy to be indexed by search engines. For example, if you have a website:http://example.comUsers can see different contents with the appended # structure in the URL:http://example.com#1http://example.com#2http://example.com#3However, the search engine will only index example.com and ignore the #. To resolve thi...

jQuery is one of the most popular JS library among front end developers because of its functionality and usability. Here we share with you some useful jQuery code snippets which can be used in our daily front end development.1. Smoothly return to page top$(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; });});2. Modify image size$(window).bind("load", function() { // Modify i...