How to generate width CSS from JavaScript / C#

Question

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.

From what I can make of this, the completed percentage level is hardcoded exactly once into the script tag when the page is generated, so it will not change unless you are using AJAX in some way. — user1726343
– user1726343, Commented Mar 19, 2013 at 22:13
@Asad - So what you are saying is that with this technique, the value can only change once for every page load? That is enough for my case to be honest since the value is generated within c# for every page load.. You are right, this might be misleading since in the title I said 'Dynamically'. — Ryan S
– Ryan S, Commented Mar 19, 2013 at 22:21
@Asad - Having said that, it is not yet working either, not even upon page load, so solving that might be enough for my case — Ryan S
– Ryan S, Commented Mar 19, 2013 at 22:22

inser · Accepted Answer · 2013-03-19 22:24:36Z

1

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>

answered Mar 19, 2013 at 22:24

inser

1,2109 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan S Over a year ago

@insert - that's exactly what I needed and in the easiest way possible. Didn't cross my mind that I could do that, so silly of me. Thanks very much

inser Over a year ago

@RyanSammut OK, but I'm not insert

Collectives™ on Stack Overflow

How to generate width CSS from JavaScript / C#

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related