Home » Archives for May 2013

JQuery mouseenter(), hover(), mouseleave() Examples

in , - on 06:07 - No comments
Using below example we can do the mouse enter and mouse leave events using jquery.

Below example will show the inside list span tag text on mouse over. 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        ul
        {
            margin-left: 20px;
            color: blue;
        }
        li
        {
            cursor: default;
        }
        span
        {
            color: green;
            display: none;
        }
    </style>
    <script type="text/javascript">
        //first way to do one mouse over and mouse leave -- using toggle 
        $(function () {
            $(".category").hover(function () {
                $(this).find("span").toggle();
            });
        });
        //Second way to do mouseenter and mouse leave event. 
        $(function () {
            $(".category1").mouseenter(function () {
                $this = $(this);
                $this.find("span").css("display", "block");
            }).mouseleave(function () {
                $this = $(this);
                $this.find("span").hide();
            });
        });
    </script>
</head>
<body>
    <ul>
        <li class='category'>
            <span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category'><span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category'><span>aspnettutorialonline.blogspot.com</span>
        </li>
    </ul>
 
    <ul>
        <li class='category1'>
            <span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category1'><span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category1'><span>aspnettutorialonline.blogspot.com</span>
        </li>
    </ul>
</body>
</html>
Output:
 
Read more
Labels: ,

How to implement validations on form controls using javascript before a postback occurs.

in , , , , - on 05:34 - No comments

If we are using submit button in the form, we have to validation data before sending to the server. For this on submit we will call the javascript method. from the method we will return true or false based on the validation result. 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function Validate() {
            //Need to do validations here. 
            //If any thing fails we have to return false other wise request go to server
        }
    </script>
</head>
<body>
    <form onsubmit="return Validate()">
        ... all controls will go here with submit button...
    </form>
</body>
</html>

If you have any queries or suggestions, please feel free to ask in comments section.
Read more
Labels: , , , ,

Getting inside ul (list) hyper link id and name using JQuery

in , - on 04:35 - No comments
By using below example we can get the id and anchor tag name using JQuery.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            debugger;
            var id = $('#links #active1').attr('id');
            var linkName = $('#links #active1 a').text();
            $('body').html('Id Name--------' + id + '<br />' + 'Name--------' + linkName);
            
        });
    </script>
</head>
<body>
    <ul id="links">
        <li id="active1"><a href="google.com" id="3">aspnettutorialonline.blogspot.com </a></li>
        <li id="active2"><a href="yahoo.com" id="2">Yahoo </a></li>
        <li id="Li1"><a href="facebook.com" id="A1">Facebook </a></li>
    </ul>
</body>
</html>
Output:

Getting inside ul hyper link id and name using JQuery
Getting inside ul hyper link id and name using JQuery
 
Read more
Labels: ,

Applying css background property to inner div inside table using root class name

in , - on 04:05 - No comments
Using below code we can apply css into table div by using root class name. 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.rootClass table div').css('background', 'green');
        });
    </script>
</head>
<body>
    <div class="rootClass">
  <h3>Header</h3>
  <div>
     <p>this is para</p>
     <div>second para</div>
     <div>
         <table border="1">
           <tbody><tr><td><div>aspnettutorialonline.blogspot.com</div></td><td>THis is second column</td></tr></tbody>
         </table>
     </div>
   </div>
</div>
</body>
</html>
Output:


Applying css background property to inner div inside table using root class name
Applying css background property to inner div inside table using root class name
 
Read more
Labels: ,

Access the objects inside another objects In the JSON Response Object using JQuery

in , , , - on 03:50 - No comments
Most of the AJAX response, we will get the JSON Resonse. Some times we may require to get the object details, inside other object. For this requirement, below code is useful.



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        var dataContainer = {
            metaData: {
                Paints: [{
                    id: 1,
                    color: { id: 123456 }
                },
                {
                    id: 2,
                    color: { id: 789 }
                }]
            }
        };
        $(function () {
            debugger;
            $.each(dataContainer.metaData.Paints,function(key,value){
                $('body').append($('<div>').html('<b>Id:</b>' + value.id + '----- <b> Color Code:</b>' + value.color.id));
            });
        });
    </script>
</head>
<body>
</body>
</html>
Output:
Read more
Labels: , , ,