Home/ Questions/Q 7884671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T04:51:46+00:00

I’m trying to change the CSS of an html element from code-behind, but it

  • 0

I’m trying to change the CSS of an html element from code-behind, but it doesn’t seem to be affected. Client-side it works.

I can call other client-side functions from code-behind, but the JQuery CSS only seems to work on client side.

Here’s the code I’m calling:

Page.ClientScript.RegisterStartupScript(Page.GetType(),
    "script",
    "$('.anibar .ui-progressbar-value').css('background-image', 'url(images/pbar-ani.png)');",
    true);

Not sure if this should make a difference – I’m using JuiceUI progressbar – with a regular div it seems to work.

Here’s the source for that:

<div id="divDialog" style="display: none" class="basic-dialog" title="Uploading..." runat="server">
    <juice:ProgressBar ID="ProgressBar1" runat="server" Value="100" CssClass="anibar" />
    <p>
        <asp:Label ID="lblMessage" runat="server" Text="Please wait." />
    </p>
</div>

with the CSS:

.anibar
{
    height: 1.6em;
}
.anibar .ui-progressbar-value
{
    background-image: url(Images/pbar-ani.gif);
}

TIA

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First off, the script you’re adding with RegisterStartupScript isn’t needed, so you can remove that.

    There’s a functional example of creating an animated progressbar with JuiceUI here: http://juiceui.com/controls/progressbar. It’s the second example on the page (oddly enough, labeled Example 1)

    It looks like you’ve just copied the code there, which is a good start. The next step for you would be to verify that those css classes are defined correctly on the page in a <style> tag in the <head> or that they’re in a css file that is being loaded correctly. Finally, verify that the path to the pbar-ani.gif file is correct, relative to where the css classes are declared.

    EDIT

    Based on your comment below, this would be a more viable solution:

    Define two separate css rules.

    .anibar .ui-progressbar-value { background-image: url(Images/pbar-ani.gif); }
.anibar.loaded .ui-progressbar-value { background-image: url(Images/pbar-ani-other.gif); }

    Then use jQuery wherever needed to add the ‘loaded’ (you can change this to whatever) class to the progress bars on the page. 

    $('.anibar').addClass('loaded');

    Another option would be to remove the ‘anibar’ class, which would return the control’s look back to the original state.

    $('.anibar').removeClass('anibar');
    • 0