What is the Jquery Event ? (Part 4)


Event are visitor action created on web application. If you have worked with asp.net web-form then you might be familiar with event, But web-form event perform the full post-back of page. where as Jquery event will not perform the post-back of page. This is the main advantage of using Jquery event in web application.

Some example of event are

1. Mouse hover
2. Button click
3. Radio button Selection
4. Checkbox selection
5. double click
6. MouseEnter
7. MouseLeave
8. Keyup
9. Keydown
10. Keydown
11. Submit
12. Change
13. Focus
14. Blur
15. Load
16. Resize
17. Scroll
18. Unload

Click Event Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

hover event example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").hover(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

double click event example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").dblclick(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

MouseEnter Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").mouseenter(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Focus Event Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("input").focus(function () {
                $(this).css("background-color", "green");
            });
        });
    </script>
</head>
<body>
    <div>
         FirstName: <input type="text" name="txtUserFirstName" value=" " /> <br />
          LastName : <input type="text" name="txtUserLastName" value=" " /> <br />
          EmailId : <input type="text" name="txtEmailId" value=" " /> <br />
        <button>Submit</button>
    </div>
</body>
</html>

Summary:

We have learnt some of the basic concept of event in Jquery Library

Posted in Jquery. 1 Comment »

How to display alternate color in table using Jquery Selector


jqueryselector

While working with asp.net mvc project, we will get scenario to display the alternate color of tabular grid. We can do this task using Jquery selector in very easy way like this


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("tr:odd").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend><b>Alternate table row color using Jquery selector</b></legend>
    
    <table border="1">
        <tr>
            <th>EmpName</th>
            <th>City</th>
            <th>Contact Num</th>
        </tr>
        <tr>
            <td>Ram</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Hari</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Mohan</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Rohan</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
    </table>
        </fieldset>
</body>
</html>

Note: in above example we have used $(“tr:odd”) as Selector

What is the Selector in Jquery ? (Part 3)


Jquery Selectors are one of the important part of Jquery library. It is process of finding out the element in Document Object Model(DOM).

We can also say selector is used to select one or more element in DOM
All the selector in Jquery start with $() sign.

There are the following selector in Jquery

1. #Id selector
2. class Selector
3. Universal Selector
4. Multiple element selector
5 Name Selector.

Now we will see the examples of all selector
1. #Id Selector:

It uses the Id attribute of an html and find out the specific id in HTML DOM element. It is the fastest and best ways to find out the specific Id in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example, we have used Id i.e “Line1” of Paragraph. which is used for hiding the specific paragraph .

2. Class Selector:

It is used to select the html element on basis of css class name.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
            font-size:20px;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example we are hiding the both paragraph on basis of css class name.

3. Universal Selector:

It will select all the element of Dom Element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("*").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <label>EmpName:</label>
    <input type="text" name="txtEmpName" value=" " />
    <br /><br />
    <button>Click Here</button>
</body>
</html>

Note: In above example it will hide all the element of Html element.

4. Multiple Element Selector

It is used to select the element on basis of multiple element in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss,#p2,#p3").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p Id="p2">This is the Second line</p>
    <p Id="p3">This is the third line</p>
    <button>Click Here</button>
</body>
</html>

It will hide the element on basis of css class,Id Name in above example.

5. Name Selector:

Name selector is used to select the html Dom element on basic of html tag name.

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("p,div").hide();
            });
        });
    </script>
</head>
<body>
    <p>This is the first line</p>
    <p>This is the Second line</p>
    <div id="Div1">
        <p>I am in Div1 </p>
    </div>
    <div id="Div2">
        <p>I am in Div2 </p>
    </div>
    <button>Click Here</button>
</body>
</html>

In the above example, if we have to hide all paragraph and div element then we can use name selector.

Summary

In the above examples, we have learnt the basic concept of selector in Jquery.

Posted in Jquery. 1 Comment »

Different ways to write Jquery function (Part 2)


So many time in interview, we will get this question. But maximum people give the answer of one or two approach of writing function in Jquery.

we can write the the function in Jquery 4 ways. I will include all the 4 ways in given below example.

jqueryfunction

Complete source code as given below


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery.min.js"></script>
    <script>
        //1 Standard ways
        jQuery(document).ready(function () {
            alert("Hello from Jquery");
        });
        
        //2 Standard ways using $ alias

        $(document).ready(function () {
            alert("Hello from Jquery using $");
        });

        //3 using shortcut 
        $(function () {
            alert("Hello from Jquery using shortcut");
        });

        //4 Shortcut with failsafe usage of $

        jQuery(function ($) {
            alert("Hello from Jquery with Failsafe");
        });
    </script>
</head>
<body>
</body>
</html>

Posted in Jquery. 1 Comment »

What is the Jquery ? (Part1)


Jquery is the Javascript library which has been written using javascript. Which simplifies the Javascript pragramming.

Jquery Library contains the following features
1. HTML/DOM manipulation
2. CSS manupulation
3. HTML event methods
4. Effect and animations
5. Ajax
6. Utilities

Sample code for Jquery Example which is used for hiding the paragraph

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>This is the line1</p> <br />
     <p>This is the line2</p> <br />
    <p>This is the line3</p> <br />

</body>
</html>

Note: here $(this).hide() is used for hiding the current paragraph line

webgrid reference is not found in asp.net view


While working with Webgrid in asp.net mvc, I was not getting the reference in view. Then i fixed the issue like this,

Step 1: Firstly i added the System.web.helper dll

Step 2: I went to the property of dll and change CopyLocal to True.

webgrid

How to set up the last page read on adobe pdf reader


if you are reading some eBooks using adobe pdf reader, you have completed some page like 20 or 30 in one days. Again if you have to read after few days then if you will open the same book, then it will open from first page, It is very horrible experience.

Now you can fix this problem like this

Step 1: Go to Edit Menu

Step 2: Click on Preferences in your Adobe PDF Reader

Step 3: Select Document tab and check the “Restore last view setting when reopening documents.”

pdf-reader