Menu ▼


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

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 weekend days in jQuery datepicker. To disable weekend days we have to set beforeShowDay function value to $.datepicker.noWeekends

Example: Disable weekend days
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            beforeShowDay: $.datepicker.noWeekends
        });
    });
</script>

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                beforeShowDay: $.datepicker.noWeekends
            });
        });
    </script>
</head>
<body>
    Show Other Date :
    <input id="txtdate" type="text">
</body>
</html>

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

Show datepicker on button click
To show datepicker on button click we need to set the property showOn value to "button" and set buttonText value to "Select date".

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            showOn: "button",
            buttonText: "Select date"
        });
    });
</script>

Show datepicker on image / icon click
To show datepicker on image or icon along with the above two properties we need to set the property buttonImage value to "Image URL" and set buttonImageOnly value to true.

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate1").datepicker({
            showOn: "button",
            buttonImage: "/images/favicon.ico",
            buttonImageOnly: true,
            buttonText: "Select date"
        });
    });
</script>

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                showOn: "button",
                buttonText: "Select date"
            });
            $("#txtdate1").datepicker({
                showOn: "button",
                buttonImage: "/images/favicon.ico",
                buttonImageOnly: true,
                buttonText: "Select date"
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtdate" type="text">
    <br />
    <br />
    Date :
    <input id="txtdate1" type="text">
</body>
</html>

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

This example shows you how to display the month and year dropdown in jQuery datepicker. To show month dropdown we need to set the changeMonth property value as "true" and to show year dropdown we need to set the changeYear property value as "true".

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
</script>

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtdate" type="text">
</body>
</html>

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

This example shows you how to display the week of the year in jQuery datepicker. To show week of the year we need to set the showWeek property value as "true".

Note: The first week of the year contains the first Thursday of the year.

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            showWeek: true,
            firstDay: 1
        });
    });
</script>


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                showWeek: true,
                firstDay: 1
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtdate" type="text">
</body>
</html>

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

This example shows you how to display multiple months in jQuery datepicker/calendar control. To show multiple months we need to set the numberOfMonths property value.

Example: multiple months
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            numberOfMonths: 2
        });
    });
</script>

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                numberOfMonths: 2
            });
        });
    </script>
</head>
<body>
    Show Other Date :
    <input id="txtdate" type="text">
</body>
</html>

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

In this example we will see how to show the previous and next month dates in JQuery UI date picker. By default jQuery date picker will show only current(navigated) month dates only. To show previous or next month dates in the current month we need to set the showOtherMonths property value to "true". and to allow to select the dates in other months set the selectOtherMonths property value to "true".

Example: Show other dates (not selectable)
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            showOtherMonths: true
        });
    });
</script>

Example: Show other dates and make them selectable
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate1").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true
        });
    });
</script>

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <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 () {
            $("#txtdate").datepicker({
                showOtherMonths: true
            });
            $("#txtdate1").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true
            });
        });
    </script>
</head>
<body>
    Show Other Date :
    <input id="txtdate" type="text">
    <br/><br/>
    Enable Other Date :
    <input id="txtdate1" type="text">
</body>
</html>

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




Search dotnetlearners.com