Menu ▼


<< < 1 2 3 4 5 6 > >>
By default jquery ui draggable will not work with buttons. To make it work with button you need to set the cancel property value to false
<script language="javascript">
    $(document).ready(function () {
        $("#btndrag").draggable({
            cancel: false
        });
    });
</script>
Example:

Source code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script language="javascript">
        $(document).ready(function () {
            $("#btndrag").draggable({
                cancel: false
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btndrag" value="Drag !" />

</body>
</html>
Read More...
Submited By : mrkraju On 15 Jan 2017

Using jQuery animate you can animate the controls. In this example we will see how to animate the control width using jQuery animate and toggle.

Example:
Click on menu icon to animate


jQuery code to slide/animate menu bar

    <script language="javascript">
        $(document).ready(function () {
            $(".menuicon").on("click", function () {
                $(".menu").animate({ width: 'toggle' }, "slow");
            });
        });
    </script>

Source code:

<html>
<head>
    <style>
        .menu {
            float: left;
            display: none;
            padding: 0px 5px;
        }

            .menu ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

                .menu ul li {
                    margin: 0;
                    padding: 0;
                }

                    .menu ul li a {
                        text-decoration: none;
                        color: #292323;
                        background: #ccc;
                        display: block;
                        padding: 5px 30px 5px 5px;
                        border-bottom: solid 1px #fff;
                        height: 20px;
                        white-space: nowrap;
                    }

        .menuicon {
            border: solid 1px #000;
            border-radius: 50%;
            padding: 5px 8px;
            float: left;
            cursor: pointer;
        }

        .menuiconbar {
            width: 25px;
            height: 5px;
            background-color: black;
            margin: 3px 0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".menuicon").on("click", function () {
                $(".menu").animate({ width: 'toggle' }, "slow");
            });
        });
    </script>
</head>
<body>
    <div>
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blogs</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="menuicon">
            <div class="menuiconbar"></div>
            <div class="menuiconbar"></div>
            <div class="menuiconbar"></div>
        </div>
    </div>
    <br clear="all" />
</body>
</html>

Read More...
Submited By : mrkraju On 06 Oct 2016

This example shows you how to blink div background using jQuery toggleClass and javascript setInterval.

jQuery toggleClass() example!



Source code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .divmsg {
            background: green;
            color: #fff;
            display: inline-block;
            margin: 20px;
            padding: 20px;
            border-radius:5px;
        }

        .divred {
            background: red !important;
        }

        #btntoggle, #btnstoptoggle {
            margin: 10px 20px;
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="divmsg">
        jQuery toggleClass() example!
    </div><br />
    <input type="button" id="btntoggle" value="Blink background using toogle" /><br />
    <input type="button" id="btnstoptoggle" value="Stop blinking" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" language="javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            var blink = null;
            $("#btntoggle").on("click", function () {
                if (blink == null)
                    blink = setInterval(blinkMessage, 500);
            });
            $("#btnstoptoggle").on("click", function () {
                if (blink != null) {
                    clearInterval(blink);
                    blink = null;
                    $(".divmsg").removeClass("divred");
                }
            });
        });

        function blinkMessage() {
            $(".divmsg").toggleClass("divred");
        }
    </script>
</body>
</html>

Read More...
Submited By : mrkraju On 25 Sep 2016

This example shows you how to show/hide the jQuery UI tooltip based on the given value in a textbox. In this example we have taken a textbox for age and when the user enter the age not in the range of 1 to 100 then it should show the tooltip.

Example
Enter Age:

Code to show the tooltip
$("#txtage").tooltip({
    items: "#txtage",
    content: "Age should be between 1 and 100."
});
$("#txtage").tooltip("open");

Code to hide the tooltip
$("#txtage").tooltip("disable");

Source code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            var agetooltip = null;
            $("#txtage").on("keyup", function () {
                if ($("#txtage").val() == "") {
                    if (agetooltip != null)
                        $("#txtage").tooltip("disable");
                }
                else {
                    var age = parseInt($("#txtage").val(), 10);
                    if (age >= 1 && age <= 100) {
                        if (agetooltip != null)
                            $("#txtage").tooltip("disable");
                    }
                    else {
                        if (agetooltip == null)
                            agetooltip = $("#txtage").tooltip({
                                items: "#txtage",
                                content: "Age should be between 1 and 100."
                            });
                        $("#txtage").tooltip("open");
                    }
                }
            });
        });
    </script>
</head>
<body>
    Enter Age:
    <input type="text" id="txtage" />
</body>
</html>
Read More...
Submited By : mrkraju On 13 Apr 2016

This example shows you how to create a draggable div using jquery & jquery ui. You can make the div as draggable by simple applying jquery ui draggable() function in document.ready() event.

Syntax

<script language="javascript">
    $(document).ready(function () {
        $("#divContent").draggable();
    });
</script>

Example

You can drag this div to anywhere on the screen.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
    .content
    {
        border: solid 2px #ccc;
        padding: 20px;
        width: 200px;
        height: 150px;
        color: #CC3916;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
    $(document).ready(function () {
        $("#divContent").draggable();
    });
</script>
</head>
<body>
<div id="divContent" class="content">
    You can drag this div to anywhere on the screen.
</div>
</body>
</html>

Read More...
Submited By : mrkraju On 10 Dec 2015

This example shows you how to disable or enable all controls/elements in a div using jquery. To disable all controls you need to set the disabled attribute value to disabled using jquery attr() method. to re-enable all the controls you need to remove the disabled attribute by using jquery removeAttr() method;

Syntax

//To disable
$("#divContainer").find("input, button, submit, textarea, select").attr("disabled", "disabled");

//To re-enable
$("#divContainer").find("input, button, submit, textarea, select").removeAttr("disabled");

Note
Anchor(hyperlink) elements don't support disabled attribute so we have to implement on click event as e.preventDefault();. To re-enable hyperlink we have to unbind the click event.
Syntax

//To disable
$("#divContainer").find("a").addClass("disablehyper").click(function (e) {                
    e.preventDefault();
});

//To re-enable
$("#divContainer").find("a").removeClass("disablehyper").unbind("click");

Example
  

UserName

Password

Rember me


Home Page

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .disablehyper
        {
            color: #ccc;
            cursor: text;
        }
        .disablehyper:hover
        {
            color: #ccc;
            cursor: text;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#btnDisable").on("click", function () {
                $("#divContainer").find("input, button, submit, textarea, select").attr("disabled", "disabled");
                $("#divContainer").find("a").addClass("disablehyper").click(function (e) {
                    e.preventDefault();
                });
            });
            $("#btnEnable").on("click", function () {
                $("#divContainer").find("input, button, submit, textarea, select").removeAttr("disabled");
                $("#divContainer").find("a").removeClass("disablehyper").unbind("click");
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnDisable" value="Disable Controls" />
    <input type="button" id="btnEnable" value="Enable Controls" />
    <div id="divContainer" style="broder: solid 1px #ccc; padding: 10px;">
        UserName<br />
        <input type="text" id="txtUserName" />
        <br />
        Password<br />
        <input type="password" id="txtPassword" />
        <br />
        <input type="checkbox" id="chbRember" />Rember me
        <br />
        <input type="button" id="btnLogin" value="Login" />
        <br />
        <br />
        <a href="/home.aspx" target="_blank">Home Page</a>
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 09 Dec 2015

This example shows you how to set the iframe source(src) using jquery and how to change the iframe source dynamically. In this example a dropdown contains list of page urls, when you select the page url from the dropdown it will be loaded in the iframe by assigning the src using jquery.

Syntax

$("#ifrm").attr("src", pageurl);

Example
Page Source


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#ddlsource").on("change", function () {
                var pageurl = $(this).val();
                $("#ifrm").attr("src", pageurl);
            });
        });
    </script>
</head>
<body>
    Page Source<br />
    <select id="ddlsource">
        <option value="">Select</option>
        <option value="http://dotnetlearners.com/tutorial/angularjs/17/angularjs-tutorial-introuduction-to-angularjs">
            AngularJS Tutorial</option>
        <option value="http://dotnetlearners.com/stats.aspx">Stats</option>
        <option value="http://dotnetlearners.com/home.aspx">Home</option>
    </select>
    <br />
    <br />
    <iframe id="ifrm" height="500" width="500" scrolling="auto"></iframe>
</body>
</html>

Read More...
Submited By : mrkraju On 08 Dec 2015

This example shows you how to show the html as text in div using jquery with out rendering. By using jquery text() function we can assign the html code to div and additionally we have to replace the space with &nbsp; and new line(\n) with html <br/>

jQuery code

<script language="javascript">
    $(document).ready(function () {
        $("#txtInput").on("keyup", function () {
            $("#divOutput").text($("#txtInput").val());
            $("#divOutput").html($("#divOutput").html().replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;'));
        });
    });
</script>

Example

Enter or copy paste html code in the below textbox


Output

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#txtInput").on("keyup", function () {
                $("#divOutput").text($("#txtInput").val());
                $("#divOutput").html($("#divOutput").html().replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;'));
            });
        });
    </script>
</head>
<body>
    Input<br />
    <textarea id="txtInput" rows="20" style="width: 100%;"></textarea>
    <br />
    <br />
    <div id="divOutput" style="border: solid 1px #ccc; padding: 20px; background: #ffe;">
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 05 Dec 2015

jQuery.merge() function is used to merge the content of two arrays. merge function will merge the content of two arrays into the first array.

Example 1
Below example will merge the first array elements and second array elements into first array.

Two arrays:

var firstary = ["one", "two", "three"];
var secondary = ["four", "five", "six"];

Merge Two arrays
$.merge(firstary, secondary);

Output
firstary -> ["one", "two", "three", "four", "five", "six"];
secondary -> ["four", "five", "six"];

Example 2
Below example will merge the first array elements and second array elements into new array and keeps the first and second array elements as it is.

Two arrays:

var firstary = ["one", "two", "three"];
var secondary = ["four", "five", "six"];

Merge Two arrays into new array
var thirdary = $.merge($.merge([], firstary), secondary);

Output
firstary -> ["one", "two", "three"];
secondary -> ["four", "five", "six"];
thirdary -> ["one", "two", "three", "four", "five", "six"];

Read More...
Submited By : mrkraju On 21 Nov 2015

To trim string value using jquery simple use $.trim()

Below example will show you how to trim a string.

var str = "    Hello    ";
str = $.trim(str);

Below example will trim the textbox value when click on Trim button.

Input :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Login Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        function trimtext() {
            var str = $("#txtInput").val();
            str = $.trim(str);
            $("#txtInput").val(str);
        }
    </script>
</head>
<body>
    <div>
        Input :
        <input type="text" id="txtInput" value="        Hello       " />
        <input type="button" value="Trim" onclick="trimtext();" />
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 19 Nov 2015
<< < 1 2 3 4 5 6 > >>




Search dotnetlearners.com