Thursday, 8 January 2015

jQuery Traversing And All Traversing Methods

What is Traversing?

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.
The image below illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.
jQuery Dimensions
Illustration explained:
  • The <div> element is the parent of <ul>, and an ancestor of everything inside of it
  • The <ul> element is the parent of both <li> elements, and a child of <div>
  • The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
  • The <span> element is a child of the left <li> and a descendant of <ul> and <div>
  • The two <li> elements are siblings (they share the same parent)
  • The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
  • The <b> element is a child of the right <li> and a descendant of <ul> and <div>


 An ancestor is a parent, grandparent, great-grandparent, and so on.
A descendant is a child, grandchild, great-grandchild, and so on.
Siblings share the same parent.

Traversing the DOM

jQuery provides a variety of methods that allows us to traverse the DOM.
The largest category of traversal methods are tree-traversal.
The next chapters will show us how to travel up, down and sideways in the DOM tree.

jQuery Traversing - Ancestors

An ancestor is a parent, grandparent, great-grandparent, and so on.
With jQuery you can traverse up the DOM tree to find ancestors of an element.

Traversing Up the DOM Tree

Three useful jQuery methods for traversing up the DOM tree are:
  • parent()
  • parents()
  • parentsUntil()

jQuery parent() Method

The parent() method returns the direct parent element of the selected element.
This method only traverse a single level up the DOM tree.
The following example returns the direct parent element of each <span> elements:

Example

$(document).ready(function(){
  $("span").parent();
});

Try it yourself »

jQuery parents() Method

The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element (<html>).
The following example returns all ancestors of all <span> elements:

Example

$(document).ready(function(){
  $("span").parents();
});

Try it yourself »
You can also use an optional parameter to filter the search for ancestors.
The following example returns all ancestors of all <span> elements that are <ul> elements:

Example

$(document).ready(function(){
  $("span").parents("ul");
});

Try it yourself »

jQuery parentsUntil() Method

The parentsUntil() method returns all ancestor elements between two given arguments.
The following example returns all ancestor elements between a <span> and a <div> element:

Example

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Try it yourself »

jQuery Traversing - Descendants

A descendant is a child, grandchild, great-grandchild, and so on.
With jQuery you can traverse down the DOM tree to find descendants of an element.

Traversing Down the DOM Tree

Two useful jQuery methods for traversing down the DOM tree are:
  • children()
  • find()

jQuery children() Method

The children() method returns all direct children of the selected element.
This method only traverse a single level down the DOM tree.
The following example returns all elements that are direct children of each <div> elements:

Example

$(document).ready(function(){
  $("div").children();
});

Try it yourself »
You can also use an optional parameter to filter the search for children.
The following example returns all <p> elements with the class name "1", that are direct children of <div>:

Example

$(document).ready(function(){
  $("div").children("p.1");
});

Try it yourself »

jQuery find() Method

The find() method returns descendant elements of the selected element, all the way down to the last descendant.
The following example returns all <span> elements that are descendants of <div>:

Example

$(document).ready(function(){
  $("div").find("span");
});

Try it yourself »
The following example returns all descendants of <div>:

Example

$(document).ready(function(){
  $("div").find("*");
});

Try it yourself »

jQuery Traversing - Siblings

Siblings share the same parent.
With jQuery you can traverse sideways in the DOM tree to find siblings of an element.

Traversing Sideways in The DOM Tree

There are many useful jQuery methods for traversing sideways in the DOM tree:
  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() Method

The siblings() method returns all sibling elements of the selected element.
The following example returns all sibling elements of <h2>:

Example

$(document).ready(function(){
  $("h2").siblings();
});

Try it yourself »
You can also use an optional parameter to filter the search for siblings.
The following example returns all sibling elements of <h2> that are <p> elements:

Example

$(document).ready(function(){
  $("h2").siblings("p");
});

Try it yourself »

jQuery next() Method

The next() method returns the next sibling element of the selected element.
The following example returns the next sibling of <h2>:

Example

$(document).ready(function(){
  $("h2").next();
});

Try it yourself »

jQuery nextAll() Method

The nextAll() method returns all next sibling elements of the selected element.
The following example returns all next sibling elements of <h2>:

Example

$(document).ready(function(){
  $("h2").nextAll();
});

Try it yourself »

jQuery nextUntil() Method

The nextUntil() method returns all next sibling elements between two given arguments.
The following example returns all sibling elements between a <h2> and a <h6> element:

Example

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

Try it yourself »

Narrow Down The Search For Elements

The three most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.
Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.

jQuery first() Method

The first() method returns the first element of the selected elements.
The following example selects the first <p> element inside the first <div> element:

Example

$(document).ready(function(){
  $("div p").first();
});

Try it yourself »

jQuery last() Method

The last() method returns the last element of the selected elements.
The following example selects the last <p> element inside the last <div> element:

Example

$(document).ready(function(){
  $("div p").last();
});

Try it yourself »

jQuery eq() method

The eq() method returns an element with a specific index number of the selected elements.
The index numbers start at 0, so the first element will have the index number 0 and not 1. The following example selects the second <p> element (index number 1):

Example

$(document).ready(function(){
  $("p").eq(1);
});

Try it yourself »

jQuery filter() Method

The filter() method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.
The following example returns all <p> elements with class name "intro":

Example

$(document).ready(function(){
  $("p").filter(".intro");
});

Try it yourself »

jQuery not() Method

The not() method returns all elements that do not match the criteria.
Tip: The not() method is the opposite of filter().
The following example returns all <p> elements that do not have class name "intro":

Example

$(document).ready(function(){
  $("p").not(".intro");
});

Try it yourself »
Posted by at No comments:

Wednesday, 7 January 2015

jQuery delegate method And Bind Method Example/Demo

With jQuery 1.4.2 launch, a new method called "delegate()" was introduced. This method attaches a handler to one or more events for selected/specified elements. Let's take an example. I have created a table and using delegate method, I will attach the click event handler to every td element.

01<table border="1" width="200px" cellspacing="5" cellpadding="5">
02   <tr>
03       <td>Item 1</td>
04       <td>Item 2</td>
05   </tr>
06   <tr>
07       <td>Item 3</td>
08       <td>Item 4</td>
09   </tr>
10</table>
jQuery delegate() method code.
1<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
2<script type="text/javascript" language="javascript">  
3$(document).ready(function(){
4  $("table").delegate("td","click",function(){
5         alert('I am' + $(this).text());
6  });
7});
8</script>
It takes 3 arguments.

1. Selector
2. Event Type
3. Event Handler

See live Demo and Code.

You will say that this is very much possible with the bind() method. Below code will serve the purpose.
1$(document).ready(function(){        
2  $("table td").bind("click",function(){
3      alert('I am' + $(this).text());
4  });
5});
Then what's new with delegate() method?

bind() vs delegate()

bind() method will add event to element which are on the page when it was called. For example, there are only 4 td on the page when bind() was called. Later on, when you dynamically add more td in the table then bind() will not attach click event handler to those td. Let's extend our demo and place a button on the page which will add the td dynamically.
1<input type="button" value="Add TD" id="btnAdd" />
1$("#btnAdd").click(function(){
2   $("table").append("<tr><td>Item 5</td><td>Item 6</td></tr>");
3});
Now, when you run this page, you will not find click event for newly added td.

See live Demo and Code.

But with delegate(), you will find click event for newly added td. delegate() method adds event which are on the page and also listens for new element and add event to them.

See live Demo and Code.
Posted by at No comments:

jQuery - bind() vs live() vs delegate() methods

I had already posted about jQuery bind(), jQuery live() and  jQuery delegate() functions. All the three jQuery functions are used to attach events to selectors or elements. But just think why there are 3 different functions for same purpose? There can't be. right? So in this post, I will explain you how these functions are different from each other.


bind() vs live()

The basic difference between bind and live is bind will not attach the event handler to those elements which are added/appended after DOM is loaded. bind() only attach events to the current elements not future element.

bind() vs delegate()

The difference between bind and delegate is same as how bind differs from live function. I had explained the difference with an example in this post jQuery delegate function Example/Demo.

live() vs delegate()

As we had seen the advantage of live and delegate function that they attaches event to those elements also which are added/appended after DOM is loaded. But how they both are different?

Well, the difference between live and delegate is, live function can't be used in chaining. live function needs to be used directly on a selector/element. For example, if I have a div with id "dvContainer",which have a table in it with some other elements. And I want to attach a click event to tr tag of the table.
1$(document).ready(function(){        
2  $("#dvContainer")children("table").find("tr").live("click",function(){
3         alert('I am' + $(this).text());
4  });
5});
The above code will not work. However with delegate() you can achieve this functionality.
1$(document).ready(function(){        
2  $("#dvContainer")children("table").delegate("tr","click",function(){
3         alert('I am' + $(this).text());
4  });
5});
There is one more difference in terms of performance, if the context is not specified with the live function. Context means you are setting the search limit within a specific node. If you don't specify the context with live function then it attaches the handler to the document by default and when executed it traverse through the DOM which causes a performance issue.
1$(document).ready(function(){        
2  $("#tblData td").live("click",function(){
3         alert('I am' + $(this).text());
4  });
5});
In the above code, no context is specified so event gets attached to the document by default. It causes a huge performance issue. But with jQuery 1.4, you can specify the context with live function also.
1$(document).ready(function(){        
2  $("td",$("#tblData")[0]).live("click",function(){
3         alert('I am' + $(this).text());
4  });
5});
You can check the difference with FireQuery add-on for Firefox. With delegate, the context is always specified.
1$(document).ready(function(){        
2  $("#tblData").delegate("td","click",function(){
3         alert('I am' + $(this).text());
4  });
5});
Summary You can use any of these function but delegate function has advantage of performance, chaining issue and works for future created elements. Hope you find this article useful.
Posted by at No comments:

Selector In JQUERY / Types Of Selctors

jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing  and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Try it yourself »

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

Try it yourself »

The .class Selector

The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test" will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

More Examples of jQuery Selectors

Syntax Description Example
$("*") Selects all elements Try it
$(this) Selects the current HTML element Try it
$("p.intro") Selects all <p> elements with class="intro" Try it
$("p:first") Selects the first <p> element Try it
$("ul li:first") Selects the first <li> element of the first <ul> Try it
$("ul li:first-child") Selects the first <li> element of every <ul> Try it
$("[href]") Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Try it
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
$(":button") Selects all <button> elements and <input> elements of type="button" Try it
$("tr:even") Selects all even <tr> elements Try it
$("tr:odd") Selects all odd <tr> elements Try it
Use our jQuery Selector Tester to demonstrate the different selectors.
For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):

Example

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Posted by at No comments:

Partial Print Document JavaScript.

 Learn to allow users to print specific parts of your documents instead of printing the entire web page. We will apply print buttons near each printable portion of the document.

<html>
 <head>
 <script>
function printContent(el)
{
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
} </script>
</head>
 <body>
 <h1>My page</h1>
<div id="div1">DIV 1 content...</div>
<button onclick="printContent('div1')">Print Content</button>
<div id="div2">DIV 2 content...</div>
<button onclick="printContent('div2')">Print Content</button>
 <p id="p1">Paragraph 1 content...</p>
<button onclick="printContent('p1')">Print Content</button>
</body>
 </html>
Posted by at No comments:

Tuesday, 6 January 2015

How To Configure Asp.Net Application On IIS Steps

Install IIS
http://www.codeproject.com/Tips/365704/Install-IIS-on-Windows

Compile Application
Type Below code on asp.net command prompt

aspnet_compiler -p "Application Path" -v / "Destination Path"

 Open IIS From Control Panel 

 Control Panel\All Control Panel Items\Administrative Tools

 OR
Run type
inetmgr       enter

Configure Application

Problum

HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this directory

http://stackoverflow.com/questions/15816924/http-error-403-14-forbidden-the-web-server-is-configured-to-not-list-the-conte
Add In WebConfig

<system.webServer>

<`directoryBrowse enabled="true"` />
</system.webServer>

403.14 the web server is configured to not list the contents of this directory

http://stackoverflow.com/questions/17510440/unrecognized-attribute-targetframework-note-that-attribute-names-are-case-s

Setting In Application Pool Will Change


command%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe /i

or

command%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe /i

http://www.microsoft.com/en-in/download/confirmation.aspx?id=30653&cffa64c5-a636-96fc-e97a-0e907fcc4c04=True
(1:11:18 PM) http://localhost:8181/index.aspx



add In Web Config



<httpHandlers>
    <add verb="*" path="index.aspx" type="CloudConnectHandler" />
  </httpHandlers>
  </system.web>

  <appSettings>
    <add key="webpages:Enabled" value="true"/>
 
  </appSettings>

<system.webServer>
  <validation validateIntegratedModeConfiguration="false"/>
  <modules runAllManagedModulesForAllRequests="true">
    <remove name="ScriptModule" />
    <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add name="ErrorHandlerModule" type="System.Web.Mobile.ErrorHandlerModule, System.Web.Mobile, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" preCondition="managedHandler" />
    <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule" preCondition="managedHandler" />
    <remove name="UrlRoutingModule-4.0"/>
    <add name="UrlRoutingModule-4.0" type="System.Web.Routing.UrlRoutingModule, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" preCondition="" />

  </modules>


  <handlers>


    <remove name="WebServiceHandlerFactory-Integrated" />
    <remove name="ScriptHandlerFactory" />
    <remove name="ScriptHandlerFactoryAppServices" />
    <remove name="ScriptResource" />
    <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
  </handlers>

  <directoryBrowse enabled="true"/>
</system.webServer>
Posted by at No comments:

How to Install IIS7 On windows 7

By default, you do not have administrative user rights if you are logged on as a user other than the built-in administrator, even if you were added to the Local Administrators group on the computer (this is a new security feature in Windows Server® 2008 called Local User Administrator). Log on either to the built-in administrator account, or explicitly invoke applications as the built-in administrator by using the runas command-line tool.

Steps

First of all, select the Control Panel.
Sample Image
In the Programs section, select Turn Windows Features on or off.
Sample Image
You might encounter the following screen:
Sample Image
Now, simply click on the features that are checked on the following screens and then hit the OK button.
Sample Image
Sample Image
A progress bar will appear.
Sample Image
Once the installation is over, to confirm it, simply type the following URL into your browser: http://localhost.
If installation is successful, then you will see the following screen:
Sample Image
Now you can use Internet Information Services Manager to manage and configure IIS. To open IIS Manager, click Start, type inetmgr in the Search Programs and Files box, and then press Enter.
Sample Image

Point of interest

Posted by at No comments:
Subscribe to: Posts (Atom)