Menu ▼


<< < 1 2 > >>

This example shows you how to create responsive table using jquery & css.

Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        @media (max-width:767px)
        {
            .offerstable th
            {
                display: none;
            }
            .offerstable td
            {
                display: inline-block;
                margin-top: -1px;
                width: 100%;
            }
            .offerstable td div
            {
                float: left;
                min-width: 120px;
            }
            .divofferheading.divofferheading
            {
                display: block !important;
            }
            .offerstable tr
            {
                border-bottom: solid 2px #333 !important;
            }
        }
        .offerstable
        {
            border-collapse: collapse;
            border: solid 1px #333;
            min-width: 350px;
        }
        .offerstable th
        {
            padding: 10px;
            color: #FFE100;
            background: #333;
        }
        .offerstable tr
        {
            border: solid 1px #333;
        }
        .offerstable td div
        {
            padding: 10px;
        }
        .divofferheading.divofferheading
        {
            display: none;
            color: #FFE100;
            background: #333;
            border-color: #333;
        }
        .offerstable td a
        {
            padding: 5px 15px;
            color: #333;
            background: #FFE100;
            border-color: #FFE100;
            text-decoration: none;
            font-size: 16px;
            border-radius: 4px;
            white-space: nowrap;
        }
        .offerstable td a:hover
        {
            color: #FFE100;
            background: #333;
            border-color: #333;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".offerstable tbody tr").each(function (ind) {
                $(this).find("td").each(function (tdind) {
                    $(this).html("<div class='divofferheading'>" + $(".offerstable tr").first().find("th:nth-child(" + (tdind + 1) + ")").html() + "</div><div>" + $(this).html() + "</div>");
                });
            });
        });
    </script>
</head>
<body>
    <table class="offerstable">
        <thead>
            <tr>
                <th>
                    Market Place
                </th>
                <th>
                    Price
                </th>
                <th>
                    Offer
                </th>
                <th>
                    Delivery timelines
                </th>
                <th>
                    Buy Now
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Flipkart
                </td>
                <td>
                    12000.00
                </td>
                <td>
                    10% Off on SBI Card
                </td>
                <td>
                    2 to 3 business days.
                </td>
                <td>
                    <a href="http://www.flipkart.com">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td>
                    Paytm
                </td>
                <td>
                    12000.00
                </td>
                <td>
                    10% Off on SBI Card
                </td>
                <td>
                    2 to 3 business days.
                </td>
                <td>
                    <a href="http://www.paytm.com">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td>
                    Snapdeal
                </td>
                <td>
                    12000.00
                </td>
                <td>
                    10% Off on SBI Card
                </td>
                <td>
                    2 to 3 business days.
                </td>
                <td>
                    <a href="http://www.Snapdeal.com">Buy Now</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output:
responsive example
responsive example
Read More...
Submited By : mrkraju On 20 May 2015

This example will shows you how to reset/clear the value of asp.net fileupload control or html input type file using jquery.

Syntax:
control.replaceWith( control = control.clone( true ) );

Example:


Code:
function resetFileControl() {
    var control = $("#fupexample");
    control.replaceWith(control = control.clone(true));
}

Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script language="javascript">
        function resetFileControl() {
            var control = $("#fupexample");
            control.replaceWith(control = control.clone(true));
        }
    </script>
</head>
<body>
    <input type="file" id="fupexample" sytle="width:200px;" />
    <input type="button" onclick="resetFileControl();" value="Reset" />
</body>
</html>
Read More...
Submited By : mrkraju On 26 Apr 2015

To get the value selected from jquery datepicker we need to use the jquery datepicker onselect event, onselect event will be having default parameter which returns the selected date. Below example will give you better idea how to do that.

Syntax:
onSelect: function (selectedDate) {
    alert(selectedDate);
}

Example:

Source Code:
<!DOCTYPE html>
<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 src="http://code.jquery.com/jquery-1.10.2.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({
                onSelect: function (selectedDate) {
                    alert(selectedDate);
                }
            });
        });
    </script>
</head>
<body>
    <input id="txtDate" type="text" />
</body>
</html>
Read More...
Submited By : mrkraju On 08 Apr 2015

This example shows you how create your own RGB Colorpicker using jQuery slider.

Example :

Source code :
<html>
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <style type="text/css">
        #output
        {
            width: 100px;
            height: 100px;
            border: solid 1px #ccc;
        }
        #redslide, #greenslide, #blueslide
        {
            height: 15px;
            margin: 10px 0px;
            width: 350px;
        }
        
        #redslide .ui-slider-range
        {
            background: red;
        }
        #redslide .ui-slider-handle
        {
            border-color: red;
        }
        #greenslide .ui-slider-range
        {
            background: green;
        }
        #greenslide .ui-slider-handle
        {
            border-color: green;
        }
        #blueslide .ui-slider-range
        {
            background: blue;
        }
        #blueslide .ui-slider-handle
        {
            border-color: blue;
        }
    </style>
    <script language="javascript">
        $(document).ready(function () {
            $("#redslide, #greenslide, #blueslide").slider({
                orientation: "horizontal",
                range: "min",
                max: 255,
                value: 127,
                slide: showOutput,
                change: showOutput
            });
            $("#redslide").slider("value", 150);
            $("#greenslide").slider("value", 50);
            $("#blueslide").slider("value", 100);

        });
        function showOutput() {
            var hexa = getHexaFromRGB($("#redslide").slider("value"),
             $("#greenslide").slider("value"),
             $("#blueslide").slider("value"));
            $("#output").css("background-color", "#" + hexa);
        }

        function getHexaFromRGB(r, g, b) {
            var hexa = [r.toString(16), g.toString(16), b.toString(16)];
            $.each(hexa, function (nr, val) {
                if (val.length === 1) {
                    hexa[nr] = "0" + val;
                }
            });
            return hexa.join("").toUpperCase();
        }
    </script>
</head>
<body>
    <div id="output">
    </div>
    <div id="redslide">
    </div>
    <div id="greenslide">
    </div>
    <div id="blueslide">
    </div>
</body>
</html>
Read More...
Submited By : mrkraju On 23 Jan 2015

This example will shows you how to use jQuery Dialog/Popup control.

  • Example 1 : Basic popup dialog.



    function ShowSampleDialog() {
        $("#divdialog").dialog();
    }



  • Example 2 : Popup modal dialog. It will disable the background controls.



    function ShowSampleModalDialog() {
        $("#divmodaldialog").dialog({
            modal: true
        });
    }



  • Example 3 : Popup modal dialog by restricting closing the popup when "Esc" key press. In above two examples popup will be closed when "Esc" key pressed.



    function ShowSampleModalDialogEsc() {
        $("#divDialogNoEsc").dialog({
            modal: true,
            closeOnEscape: false
        });
    }
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        function ShowSampleDialog() {
            $("#divdialog").dialog();
        }
        function ShowSampleModalDialog() {
            $("#divmodaldialog").dialog({
                modal: true
            });
        }
        function ShowSampleModalDialogEsc() {
            $("#divDialogNoEsc").dialog({
                modal: true,
                closeOnEscape: false
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Sample Dialog" onclick="ShowSampleDialog();" />
        <div id="divdialog" title="JQuery Popup Dialog Sample" style="display: none;">
            Sample JQuery UI Dialog.
        </div>
        <br />
        <br />
        <input type="button" value="Sample Modal Dialog" onclick="ShowSampleModalDialog();" />
        <div id="divmodaldialog" title="Modal Dialog Sample" style="display: none;">
            Backgound will be disabled in this example.
        </div>
        <br />
        <br />
        <input type="button" value="Sample Dialog" onclick="ShowSampleModalDialogEsc();" />
        <div id="divDialogNoEsc" title="Modal Dialog Sample" style="display: none;">
            Backgound will be disabled in this example. and this popup will not be closed when
            "Esc" key pressed.
        </div>
    </div>
    </form>
</body>
</html>
Read More...
Submited By : mrkraju On 11 Oct 2014

In this post we will discuss how to use XML response for JQuery UI autocomplete extender. To make jquery ui autocomplete extender work with xml, after getting the xml resultset we have to convert it to Array.

Example

Code:
Add reference to the jquery ui css, jquery and jquery ui.

<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>

Bind autocomplete functionality to textbox in document.ready event.

<script language="javascript">
    $(document).ready(function () {
        $("#<% =txtCountry.ClientID%>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "default.aspx/LoadCountry",
                    data: "{input:'" + request.term + "'}",
                    dataType: "json",
                    success: function (output) {
                        var myArr = new Array();
                        $(output.d).find("Country").each(function () {
                            myArr.push($(this).text());
                        });
                        response(myArr);
                    },
                    error: function (errormsg) {
                        alert(errormsg.responseText);
                    }
                });
            }
        });
    });
</script>

In the above code url we have mentioned as "default.aspx/LoadCountry" where default.aspx is page name and LoadCountry is the web method name which returns the XML result set (we are writing for each loop on the xml and adding the countries in the xml to array variable myArr).

Data we have given as -> data: "{input:'" + request.term + "'}". Where input is the parameter name in the C# web method. and request.term will pass the value we entered in the textbox.

And if the ajax method successfully executed then it will call the success method if any error is there then error method will be raised in the above code.

Now write the C# web method

Add name space -> using System.Web.Services;

[WebMethod]
public static List<string> LoadCountry(string input)
{
    //Get the countries list from database, for this example I am creating sample output
    //return GetCountriesfromDB(input);

    return GetCountries(input);

}

public static string GetCountries(string input)
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    dt.Columns.Add("Country");
    dt.Rows.Add("India");
    dt.Rows.Add("United States");
    dt.Rows.Add("United Kingdom");
    dt.Rows.Add("Canada");
    dt.Rows.Add("South Korea");
    dt.Rows.Add("France");
    dt.Rows.Add("Mexico");
    dt.Rows.Add("Russia");
    dt.Rows.Add("Australia");
    dt.Rows.Add("Turkey");
    dt.Rows.Add("Kenya");
    dt.Rows.Add("New Zealand");
    dt.DefaultView.RowFilter = "Country like '%" + input + "%'";
    ds.Tables.Add(dt.DefaultView.ToTable());
    return ds.GetXml();
}

To declare web method LoadCountry, we have to specify the access specifier as public and static. and add [WebMethod] attribute.

In the above code GetCountries() method used to prepare the sample data, you can replace this with the original data.

Now execute the solution to get the output as shown in the above image....

you can download the source code form here... Download

Read More...
Submited By : mrkraju On 19 Sep 2014

To disable future dates in JQuery date picker, we need to set the maxDate property.

  1. maxDate : 0 then all the future dates will be disabled


    HTML
    <input id="txtfuturedate" type="text" />
    JQuery
    $("#txtfuturedate").datepicker({
        maxDate: 0
    });

    Note: If we increase the value then it disable the dates after the given days.
    ex: if we give maxDate:5 then all the future dates after 5 days will be disabled.

  2. maxDate : '+1w' then all the future dates after a week will be disabled


    HTML
    <input id="txtfuturedateweek" type="text" />
    JQuery
    $("#txtfuturedateweek").datepicker({
        maxDate: "+1w"
    });

    If we give maxDate: '+2w' then all the future dates after 2 weeks will be disabled.

  3. maxDate : '+1m' then all the future dates after a month will be disabled


    HTML
    <input id="txtfuturedatemonth" type="text" />
    JQuery
    $("#txtfuturedatemonth").datepicker({
        maxDate: "+1m"
    });

  4. maxDate : '+1y' then all the future dates after a year will be disabled


    HTML
    <input id="txtfuturedateyear" type="text" />
    JQuery
    $("#txtfuturedateyear").datepicker({
        maxDate: "+1y"
    });
Read More...
Submited By : mrkraju On 19 Sep 2014

This example shows you how to implement autocomplete functionality for textbox by using jquery, jqueryui, jquery ajax and json response from the server.

Example


Code

Add reference to the jquery ui css, jquery and jquery ui.

<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>

Bind autocomplete functionality to textbox in document.ready event.

<script language="javascript">
    $(document).ready(function () {
        $("#<% =txtCountry.ClientID%>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "default.aspx/LoadCountry",
                    data: "{input:'" + request.term + "'}",
                    dataType: "json",
                    success: function (output) {
                        response(output.d);
                    },
                    error: function (errormsg) {
                        alert(errormsg.responseText);
                    }
                });
            }
        });
    });
</script>

in the above code url we have mentioned as "default.aspx/LoadCountry" where default.aspx is page name and LoadCountry is the web method name which returns the JSON result set.

Data we have given as -> data: "{input:'" + request.term + "'}". Where input is the parameter name in the C# web method. and request.term will pass the value we entered in the textbox.

And if the ajax method successfully executed then it will call the success method if any error is there then error method will be raised in the above code.

Now write the C# web method

Add name space -> using System.Web.Services;

[WebMethod]
public static List<string> LoadCountry(string input)
{
    //Get the countries list from database, for this example I am creating sample output
    //return GetCountriesfromDB(input);

    return GetCountries().FindAll(item => item.ToLower().Contains(input.ToLower()));

}

public static List<string> GetCountries()
{
        List<string> CountryInformation = new List<string>();
        CountryInformation.Add("India");
        CountryInformation.Add("United States");
        CountryInformation.Add("United Kingdom");
        CountryInformation.Add("Canada");
        CountryInformation.Add("South Korea");
        CountryInformation.Add("France");
        CountryInformation.Add("Mexico");
        CountryInformation.Add("Russia");
        CountryInformation.Add("Australia");
        CountryInformation.Add("Turkey");
        CountryInformation.Add("Kenya");
        CountryInformation.Add("New Zealand");
        return CountryInformation;
}

To declare web method LoadCountry, we have to specify the access specifier as public and static. and add [WebMethod] attribute.In the above code GetCountries() method used to prepare the sample data, you can replace this with the original data.

Now execute the solution to get the output as shown in the above image....

you can download the source code form here... Download

Read More...
Submited By : mrkraju On 18 Sep 2014

To disable the weekends in jquery date picker we need to set the "beforeShowDay" property value to "$.datepicker.noWeekends", then all the Weekends will be disabled in the date picker control.

Example
Date :

JQuery
<script language="javascript">
    $(document).ready(function () {
        $("#txtworkingdays").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 () {
            $("#txtworkingdays").datepicker({
                beforeShowDay: $.datepicker.noWeekends
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtworkingdays" type="text">
</body>
</html>
Read More...
Submited By : mrkraju On 17 Sep 2014

In this example we will see how to disable the previous date selection in JQuery UI date picker. To disable the previous dates we need to set the minDate property of date picker. if we set minDate:0 then it will disable all the previous dates.

Example
Date :

JQuery
<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0
        });
    });
</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({
                minDate: 0
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtdate" type="text">
</body>
</html>

Read More...
Submited By : mrkraju On 17 Sep 2014
<< < 1 2 > >>




Search dotnetlearners.com