Sandeep Kumar Patel's Blog, page 8

JavaScript Array Methods Example

JavaScript Array provides lot of useful methods to working with. In this Demo, " We will explore all the methods present in JavaScript Array With Example ". Check the below code for all the Array Method Declaration using function:-var ARRAY_METHOD={
/*Concat : Combines two array*/
getConcatResult:function(array1,array2){
return array1.concat(array2);
},
/*Shift : Removes the First Element of the array*/
getShiftResult:function(array){
return array.shift();
},
/*UnShift : Adds new elements at th...

Using Jquery Proxy Mechanism

Jquery Provides Proxy Mechanism through $.proxy() method. Proxy mechanism is really helpful where we need some delegate to represent the functionality. Generic use case of a proxy mechanism is the way of binding different context to a method through a proxy wrapper. In this Demo, " We will create method to change color of the text and expose it with a proxy for different context ". In this example we have ,--A method called 'chageColor()' inside a EVENT_SCRIPT object. 
--This method is wrap...

Using Nth Child Selector in CSS And Jquery

CSS3 provides "Nth Child" selector for element selection. In this Demo, " We will see the use of Nth selector in CSS3 and Jquery ". JavaScript/Jquery Array Index starts from ZERO(0), But CSS3 indexing starts from ONE(1). This cause the problem of selecting an element.For example, when you select 1st element in Jquery it will select the 2nd element while in CSS3 it will select the 1st element. The HTML markup used for this demo is as below, <ol>
<li>sandeep</li>
<li>sandeep</li>...

Event Namespace in Jquery

Jquery provides custom events using namespace. A Event Callback method can be attached with a custom event  to a HTML element.A namespace can be created and used to a event using dot operator. In this Demo,"We will attach a click event with namespace for all the LI elements inside a Un-Ordered List". Below code shows a namespace 'StudentName' attached to click event for LI element followed by a css color change to red.$('.student-container li').on('click.StudentName', function (e) {
cons...

2-State Custom Animation Using From-To Pair

  A custom CSS3 Animation can be created using 'kreyframe' property. Using Keyframe the animation definition can be given using 'from' and 'to' keyword. These keywords designates the initial state  and final state of an animation. Using from/to keyword only 2 states of animation are possible.If we need to have multiple state animation, we can use "%" percentage for different state. In this Demo, "We will use from/to combination to create 2-state animation for a text to animate size a...

Jquery Promise Object For Asynchronous Method Handling

Jquery "promise()" method provides better way for handling asynchronous method. In JavaScript there are two types of methods, synchronous and asynchronous method. PROBLEM DOMAIN: "Asynchronous method generally has some callback like success, error or complete.There are many situation while coding in java script where we need to call a block of code after an asynchronous method finished execution.
This is where we see the problem as:-
 --Browser does not wait for asynchronous method to compl...

Getting Started With Tornado Web framework

"Tornado" is a Python based framework to create web applications. Most important features of this framework are:-                       ---Asynchronous I/O calls.
                       ---Web Sockets.
                       ---Maximum Polling .
In this Demo, "We will learn about installing the tornado site package wit...

Asynchronous File Upload With Bootstrap Progress Bar Indicator

"JQUERY AJAX FORM" provides Asynchronous File upload feature. The plugin can be found in the below link:-                   http://malsup.com/jquery/form/#download
To know about basics of this plugin checkout my previous post where i have shown a demo for asynchronous form upload. In This Demo, " We will see a File upload with a BOOTSTRAP progress bar indicator ". Some of the facts of this demo:-   ...

HandleBar Control Statements

HandleBar provides some built-in helpers in the shape of Block Level Expression. Some of the useful one are {{#each}}, {{#if}},{{#unless}} and {{#with}}. In this Demo " We  will see how to use these built-in helpers for templating the JSON Data ". Using {{#each }} we have iterated the student JSON object array and the hobbies in string array. {{#if }} statement is for checking Truth logic.{{#unless}} is the reverse of the {{#if }} logic. The HTML markup for testing the template scripts are...

Comment And Path Expression In HandlebarJS

Comments and Path expression are two advantage features for Handlebar templating. In this Demo, " We will see how to use comment inside a template.We will also see how a relative path expression works in a handlebar template ". You can check my previous post for basics of handlebar templating. Comments inside the templates will be ignored by the handlebar compilers.So It can not be downloaded to the browser while rendering.  We can create comment inside a template by two ways, {{!-- --}} a...