Adjust width of DropDown list dynamically using JavaScript

 Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained that how to adjust width of SELECT (DropDown) dynamically using JavaScript.

Join our Channel  on Whtsapp and Telagram for All Updates                                          

Code for  HTML Page

On the HTML I place a control named  SELECT (DropDown) with the id named dd_list_city with some options. On the onmouseover event of  the SELECT (DropDown)  I assigned JavaScript function named set_width().

<select id="dd_list_city" onmouseover="set_width(this)" style="width: 75px;">

    <option value="1">Amritsar</option>

    <option value="2">Batala</option>

    <option value="3">Chandigarh</option>

</select>

Adjusting width of SELECT (DropDown) using JavaScript

When you will hover the mouse on SELECT (DropDown), the set_width() JavaScript function will be called automatically. Inside this JavaScript set_width()  function, a loop will be executed over the options of SELECT (DropDown) element and the maximum Text length is determined. Finally, the width is set to the SELECT (DropDown) element.

<script type="text/javascript">

    function set_width(dd_list_city) {

        var maxWidth = 0;

        for (var i = 0; i < dd_list_city.length; i++) {

            if (dd_list_city.options[i].text.length > maxWidth) {

                maxWidth = dd_list_city.options[i].text.length;

            }

        }

       dd_list_city.style.width = maxWidth * 7 + "px";

    }

</script>

Conclusion: In above code, I explained about the implementation, how to adjust width of SELECT (DropDown) dynamically using JavaScript. Bye bye and take care of you all Developers. We will come back shortly with the new article. 

Regards

Programming Hub

by at No comments:

3D Pie Donut Chart using jQuery

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained about the implementation of 3D Pie Donut Chart using jQuery. In this article I am using the concept of High Charts. For more information you can visit website of High Chart 

Join our Channel  on Whtsapp and Telagram for All Updates                                          

Implementation: In this article, I am giving example of Cricket Asia Cup 2025 Final Match India Inning or Score of the every player of India. In the chart every player that played match of bating mentioned in the chart with name of the player and their score. In this article I am giving static data but you can create it dynamically by using the values of Database. For creating it dynamically you need to create the for loop at the time of passing parameters as values to the program. You can check in my list of articles. In last article I already created chart concept with dynamically data from database. Here I used for loop. And in the below mentioned article I am passing the values dynamically from the database. You can create 3D Pie Donut Chart dynamically too by following this link. You need to create the for loop to pass the parameters to the chart same created as in below mentioned link

https://usingaspdotnet.blogspot.com/2011/07/visualization-pie-chart-in-aspnet.html

Now here i am writing the complete code of the HTML page. You can copy the whole code and paste the whole code at your HTML page. And enjoy the execution of the whole concept. You can also print the chart; you can also download the JPG or PNG of the chart. There are more options available in this chart. You really enjoy this code. It’s really too fantastic

<!DOCTYPE HTML>
<html>
        <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <title>Highcharts Example</title>
 
                <style type="text/css">
* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}
 
#container {
    height: 400px;
}
 
.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}
 
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
 
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}
 
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
 
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}
 
.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}
 
.highcharts-description {
    margin: 0.3rem 10px;
}
 
@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ddd;
    }
    a {
        color: #2caffe;
    }
}
               </style>
        </head>
        <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
 
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A variation of a 3D pie chart with an inner radius added.
        These charts are often referred to as donut charts.
    </p>
</figure>
 
 
               <script type="text/javascript">
// Data retrieved from https://olympics.com/en/olympic-games/beijing-2022/medals
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: 'Cricket Asia Cup 2025 Final Match India Inning'
    },
    subtitle: {
        text: '<a href="http://usingaspdotnet.blogspot.com" ' +
            'target="_blank">Programming Hub</a>'
    },
    plotOptions: {
        pie: {
            innerSize: 100,
            depth: 45
        }
    },
    series: [{
        name: 'Score',
        data: [
            ['Abhishek Sharma', 05],
            ['Shubman Gill', 12],
            ['S Yadav', 01],
            ['T Varma', 69],
            ['S Samson', 24],
            ['S Dube', 33],
            ['R Singh', 04]
            
 
        ]
    }]
});
 
               </script>
        </body>
</html>

 

Check the Output of the complete Program

Conclusion: In above code, I explained about the implementation of 3D Pie Donut Chart using jQuery. This code is very helpful for every developer. Bye bye and take care of you all Developers. We will come back shortly with the new article.

 

Regards

Programming Hub

 

 

by at No comments:

Automatically Hide Label after some seconds in ASP.Net

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained the implementation about how to automatically hide an ASP.Net Label control after some seconds (say 5 seconds) using JavaScript.

Code of HTML Page

On the HTML page I placed controls a TextBox with the id named txt_name, a Button with the id named btn_submit  and a Label with the id named lbl_message and set visible property of Label  control is set to False. The Label will be made visible from server side after the click of the button.

Enter Name:

<asp:TextBox ID="txt_name" runat="server" />

<br />

<asp:Button ID="btn_submit"  Text="Submit" runat="server" OnClick="Submit" /><br />

<br />

<asp:Label ID="lbl_message" ForeColor="Green" Font-Bold="true" Text="Form has been submitted successfully." runat="server" Visible="false" />

 

Below is the code to make the Label visible on button click.

C#

protected void Submit(object sender, EventArgs e)

{

    Lbl_message.Visible = true;

    ClientScript.RegisterStartupScript(this.GetType(), "alert", "hide_label();", true);

}

 

Automatically Hiding Label control after 02seconds using JavaScript

I created a JavaScript function that will be hiding the Label after 5 seconds when you click on the Buttom. This function using the ClientScript RegisterStartupScript method after clicking the Button.

A variable seconds holds the value which determines after how many seconds the Label will hide. You can set whatever value you need in seconds as per your requirement.

Finally within JavaScript setTimeout function, the Label is hidden by setting its CSS display property to none and the timeout is specified by multiplying the ‘seconds’ variable to 1000 as setTimeout function accepts value in Milliseconds.

<script type="text/javascript">

    function hide_label() {

        var seconds = 2;

        setTimeout(function () {

            document.getElementById("<%=lbl_message.ClientID %>").style.display = "none";

        }, seconds * 1000);

    };

</script>

Conclusion: In above code, I have been explained that how to automatically hide an ASP.Net Label control after some seconds (say 2 seconds) using JavaScript. Bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming Hub

 

 

by at No comments:

Enable Disable Link using JavaScript and jQuery

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained the implementation about how to enable or disable Link (HyperLink) using JavaScript and jQuery. The HTML disabled attribute does not work for HTML Anchor Tags (HyperLink) and they are still clickable.

Join our Channel  on Whtsapp and Telagram for All Updates                                          

Enable Disable Anchor Tags (Links) usingJavaScript

ON the HTML page i placed a HTML Anchor Links (HyperLink) or Anchor tag with the website link and a Button. On the Button is click, the enable_disable_links JavaScript function will be called.

In the function, the values of Button will be checked after click if the value the button will be Disable, then the Anchor Tag or Link will be disabled i.e. non-clickable if the value the button will be Enable, then the Anchor Tag or Link will be disabled i.e. clickable 

Disabling HTML Anchor Links (HyperLink)

In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function.

This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.

Enabling HTML Anchor Links (HyperLink)

In order to enable a HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and the REL attribute is removed.

This makes the HTML Anchor Link (HyperLink) once again enabled i.e. clickable. You can copy and paste this code inside the body tag of the HTML page.

<a href=" https://usingaspdotnet.blogspot.com ">Visit Programming Hub</a><br />

<input type="button" id="btn_Enb_dis " value="Disable" onclick = "enable_disable_links (this)" />

<script type="text/javascript">

    function enable_disable_links(btn) {

        var links = document.getElementsByTagName("a");

        if (btn.value == "Disable") {

            btn.value = "Enable";

            for (var i = 0; i < links.length; i++) {

                var href = links[i].href;

                links[i].setAttribute("rel", href);

                links[i].href = "javascript:;"

            }

        } else {

            btn.value = "Disable";

            for (var i = 0; i < links.length; i++) {

                var href = links[i].getAttribute("rel");

                links[i].removeAttribute("rel");

                links[i].href = href

            }

        }

    }

</script>

Enable Disable Anchor Tags (Links) using jQuery

ON the HTML page i placed a HTML Anchor Links (HyperLink) or Anchor tag with the website link and a Button. On the Button is click, the jQuery Click event handler will be executed.

In Click event handler, the values of Button will be checked after click if the value the button will be Disable, then the Anchor Tag or Link will be disabled i.e. non-clickable if the value the button will be Enable, then the Anchor Tag or Link will be disabled i.e. clickable. 

Disabling HTML Anchor Links (HyperLink)

In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function.

This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.

Enabling HTML Anchor Links (HyperLink)

In order to enable a HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and the REL attribute is removed.

This makes the HTML Anchor Link (HyperLink) once again enabled i.e. clickable. You can copy and paste this code inside the body tag of the HTML page.

<a href=" https://usingaspdotnet.blogspot.com ">Visit Programming Hub</a><br />

<hr />

<input type="button" id="btn_Enb_dis" value="Disable" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

    $("#btn_Enb_dis").click(function () {

        if ($(this).val() == "Disable") {

            $(this).val("Enable");

            $("a").each(function () {

                $(this).attr("rel", $(this).attr("href"));

                $(this).attr("href", "javascript:;");

            });

        } else {

            $(this).val("Disable");

            $("a").each(function () {

                $(this).attr("href", $(this).attr("rel"));

                $(this).removeAttr("rel");

            });

        }

    });

});

</script>

Conclusion: In above code, I have been explained that how to enable or disable Link (HyperLink) using JavaScript and jQuery. Bye and take care of yourself Developers. We will come back shortly with the new article.

Regards

Programming Hub

by at No comments:
Subscribe to: Posts (Atom)