Today's Question:  What weekend projects have you created?        GIVE A SHOUT

  WRITE ARTICLE

 JAVASCRIPT


  Convert HTML to DOM elements using JavaScript

In some cases, one would want to convert a HTML string to the DOM elements so that JavaScript can handle them easily. This is frequently used when one get some data from third party APIs where the data is in HTML format. In JavaScript, there are a couple of ways one can use to convert HTML to DOM elements. DOMParser document.createElement DOMParser DOMParser can parse XML or HTML source stored in a string into a DOM Document. After the conversion, the normal JavaScript call of h...

844 0 0          JAVASCRIPT HTML DOM DOMPARSER DOCUMENT.CREATEELEMENT


  Deep clone of JavaScript object

In JavaScript world, it's frequently seen object clone. Normally when creating a clone of an object, it's only the reference being cloned but not all contents. In some scenarioes, it's desired to clone all the content instead of just the reference such that any change made to the cloned object will not change the original object. Differences between shallow clone and deep clone can be as simple as: Shallow clone : Only the object reference is cloned but not the content Deep clone : Clone all co...

4,270 0 0          JAAVSCRIPT SHALLOW COPY DEEP CLONE DEEP COPY SHALLOW CLONE


  Be cautious before deciding to use ReactJS in your product

ReactJS is an open source JavaScript library used for writing user interfaces. It revamps the way developers write web applications. More and more front end developers start to use this Facebook crafted library in their products or projects nowadays. However, although ReactJS is an open source library under BSD license, it doesn't mean there is no risk to freely adopts it in your products. If you are building or plain to build some products which may compete with Facebook or its subsid...

2,536 0 0          JAVASCRIPT FACEBOOK REACTJS VUE


  JavaScript to scroll element into view

In AJAX applications, there are frequent needs to scroll some element into view after some modification to the page. For example, after adding an item or updating an element in an admin panel, the page may need to be scrolled to the item added or updated so that we can see the changes immediately. In these cases, JavaScript can be used to scroll the element we want to show. In Vanilla JavaScript, there is no built-in function which can achieve scroll_element_into_view(), but most of modern brows...

4,158 0 0          JAVASCRIPT JQUERY SCROLLTO HOW-TO


  JavaScript programming style

Douglas Crockford is a JavaScript expert, he is the inventor of JSON. In November 2011 he made a speech "Youtube", during the speech he talked about what JavaScript programming style is.I recommend this speech to everyone, it not only helps you learn JavaScript but also make you enjoying because Crockford is very humorous and he made audience laugh frequently.Next I will summarize JavaScript programming style according to this speech and his article code convention. The so-called programming ...

6,421 0 0          JAVASCRIPT PROGRAMMING STYLE CURLY BRACES EQUAL


  jQuery to check whether checkbox is checked

In Vanilla JavaScript, the correct way of checking whether a checkbox is checked is to get the property checked of the checkbox. Assuming there is an checkbox with id "checkbox1", below line will return true if the checkbox is checked while it will return false if the checkbox is unchecked: document.getElementById("checkbox1").checked In jQuery, there are a few ways to check this. The first one is to using the corresponding counterpart of the Vanilla JavaScript, it is to check the checked proper...

3,712 0 1          JQUERY CHECKBOX CHECKED ATTR PROP


  Let browser prompt for storing password when doing AJAX login

In Web 2.0 era, more and more web applications are using AJAX to replace the traditional HTML form element to perform user login. This usually provides a better user experience than form submission. But it also brings a side effect to the end users. That is the browser will not prompt the user whether s/he wants to save the password so that s/he no needs to enter the username/password again when visiting the same site next time. Below is the code snippet which does the AJAX login.  <scri...

2,065 0 0          AJAX BROWSER PASSWORD LOGIN


  ScrollerJS vs Odometer

Both ScrollerJS and Odometer are two JavaScript libraries to transition one number to another number with animation. They provide user a fancy animation about scrolling numbers. These libraries can be used in many scenarios such as user statistic counter, timer or odometer. This post is going to have a comparison on these two open source libraries. Below is a table which lists the features the two libraries have: Feature ScrollerJS Odometer Language JavaScript and CSS JavaScript and CSS S...

5,927 0 0          JAVASCRIPT ODOMETER SCROLLERJS OPEN SOURCE CSS TRANSITION