Question

I have a TD element that won’t change its background to an image. I’m using ToggleClass from JQUERY.

Here is the two different CSS styles that I’m using :

.style22
  {
      height: 16px;
      width: 237px;
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }
  .style23
  {
      height: 16px;
      width: 237px;
      background-image:none
  }

Here is the function I’m using to toggle the class but it won’t toggLe.:

<script type="text/javascript">
function validateText() {

  var emailEXP = /^([A-Za-z0-9_\+\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

      if (!emailEXP.test(($("#tbEmail").val()))) {
          $('#EmailErrorMSG').toggleClass('style22');
          $('#EmailErrorMSG').show();
     }     

  }

  </script>     

Here is the HTML markup:

 <tr>
    <td id="EmailErrorMSG" nowrap="nowrap" class="style23"></td>
 </tr>


<asp:Button ID="btnSignUp" runat="server" OnClientClick="validateText()"/>

Thanks for any help.

Answer 1

in style 23: just make it important…
background-image:none!important

you dont need the height and the width.

when you toggle both classes are on that element.

but if you want to do it even better you can create the classes diffrent:
create one class that has only the height and the width

and one class the has the image settings.
then just toggle the second class.

.style22
  {
      height: 16px;
      width: 237px;

  }
  .style23
  {
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }