ASP.NET - How can I change the position of a background image when a button is clicked?

Question

I have a standard asp button and on click it triggers:

protected void btnDealItem_Click(object sender, EventArgs e)
{
    divMyDiv.Style.Add("background-position", "70px 0");
}

Problem is, when the button is clicked the background doesn't shift 70 pixels to the right.

Is this the correct way of going about this or is it a question of syntax?

Answer 1

You could do it on the clientside with JQuery: http://jquery.com/

I am assuming from your code that you don't want to do anything else with the click event of the button. The line return false; stops the button from posting the page back.

 $(document).ready(function () {
     $("#" + <%= btnDealItem.ClientID %>).click(function() {
          $(this).attr("style", "background-position:70px 0;" );
          return false;
     });
 });

or

<style>
     .backgroundshift {
        background-position: 70px 0;
     }
</style>


 $(document).ready(function () {
     $("#" + <%= btnDealItem.ClientID %>).click(function() {
          $(this).addClass("backgroundshift");
          return false;
     });
 });

Answer 2

The problem is that style is defined on server side AFTER the button is clicked. The simplified scenario is like that:

1. Server renders the page for the first time.
2. User clicks the button.
3. Server invokes the button_click event.
4. Server renders the page.
5. User can see the button with changed background image position.

If you want to achieve the change immediately after clicking the button use client-side scripting via java script.