How to generate width CSS from JavaScript / C#


Tags: c#,javascript,asp.net,html,css

Problem :

I have been trying to get my C# variables values communicate with my HTML code through JavaScript the last couple of days, and now I have this HTML code which I would like to change through the value from C# upon page load. Upon page load I would like to set the css width value of the SPAN through JavaScript from my c# variable value.

The progressBarPercentage SPAN is the one I would like the set the CSS Width, since that's how my jQuery Progress Bar would like the values. The width would be as a percentage, therefore on it's own this would work:

<span id="progressBarPercentage" style="width: 40%"></span>

But this is what I am trying to do:

HTML

    <div id="progressBarArea" class="progress-bar orange stripes">
        <asp:Label ID="progressBarText" runat="server" Visible="true" Text="49%" CssClass="progressBarText"></asp:Label>
        <span id="progressBarPercentage" onload="setProgressBarPercentage()"></span>
        <p class="align-center">Points Until Next Level: <asp:Label id="pointsUntilNextLevelLabel" runat="server" Text="0" CssClass="pointsUntilNextLevelLabel"></asp:Label></p>
    </div>

C#

    protected double percentageLevelComplete { get; set; }

JavaScript

<script type="text/javascript">
    function setProgressBarPercentage(){
        var element = document.getElementById("progressBarPercentage");
        element.style.width = <%=percentageLevelComplete%> + "%";
    }
</script>

Is what I am doing the right way to go? If so, what am I doing wrong since this is not working at the moment.



Solution :

You can use this code (without javasript):

<div id="progressBarArea" class="progress-bar orange stripes">
        <asp:Label ID="progressBarText" runat="server" Visible="true" Text="49%" CssClass="progressBarText"></asp:Label>
        <span id="progressBarPercentage" style="width:<%=percentageLevelComplete %>%"></span>
        <p class="align-center">Points Until Next Level: <asp:Label id="pointsUntilNextLevelLabel" runat="server" Text="0" CssClass="pointsUntilNextLevelLabel"></asp:Label></p>
    </div>

    CSS Howto..

    How do I add a class to a default bootstrap class

    How can I eliminate phantom margins in my dropdown menu?

    how to move fixed slider to top when scrolling using CSS only

    How to make all cross browser compatible skewed div edges?

    How to change table cell colour to default on triple click html5/javascript/css

    How to think to get all content inline (HTML & CSS)

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    How to stop some css from getting applied to all
  • tag
  • How to make elements appear one by one using css animation

    How to make an image display above the background of an :after element

    How to find everything that is not matching a regular expression

    xHTML/CSS: How to make inner div get 100% width - margins

    How to highlight anchor link when target div comes in view - jQuery

    How to detect DOM element position to use different CSS style via CSS selection

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?

    How do you create multiple box-shadow values in LESS CSS

    How to force floating blocks staying in the same row in css?

    PHP How to not cache generated HTML but cache static data like images/js/css

    How to trigger self hover on child element

    How do you transition a height without the element going outside the parents border?

    how to scroll text area horizontally?

    how to select a sibling element when hovering in CSS?

    How to use pure css selector to select hidden element

    How do I change properties of text that's being imported via php

    jQuery .css, how to translate it into Javascript

    Show-hide based on two sets of selectors--how to make them work together?

    How to move this structure to the right without using float?

    How to stop web content from being displayed before css/jquery is prepared?

    Showing :before but hiding element with CSS only

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS