CODEWITHSUNDEEP
javascriptjquerycssfirefox
EML
EML

Reputation: 10261

Firefox not setting css style from JavaScript?

I need to respond to a hover over a table cell. This css code works fine:

#dialog-date-picker td { 
  border-style: outset !important;
  border : 2px solid #606060;
  cursor: pointer;
  ...etc
}

#dialog-date-picker td:hover {
  border-style: inset !important;
  border : 2px solid #6060b0;
}

However, I need a more complex hover response that I can't get in css, and I've started as follows:

$('#dialog-date-picker td').hover(function () {
      $(this).css('border-style', 'inset !important');
      $(this).css('border', '2px solid #6060b0');
   }, function() { 
      $(this).css('border-style', 'outset !important');
      $(this).css('border', '2px solid #606060');
   }
);

The jQuery equivalent works in Chrome and Opera, but not FF. Firebug shows that the code is executed, but nothing happens. Any ideas why this should be? Thanks.

EDIT

Folks - I understand that this isn't elegant, and I should be using css and JS, and adding a class, but that's not the issue. I just took a working css solution and, as a first step, just put it in the JS above. At that point I found out that the JS equivalent worked in Opera and Chrome, but not FF. Combining the two css calls, and converting 'border-style' to 'borderStyle', didn't make a difference; it still doesn't work in FF. Is it relevant that the dialog (jQuery UI) is dynamic? I've got a table within the dialog. Thanks for all the input.

EDIT2

Simplified the code to:

$('#dialog-date-picker td').hover(
   function() { $(this).css('border', '2px inset  #6060b0 !important'); },
   function() { $(this).css('border', '2px outset #606060 !important'); }
);

with no change (works in IE8, Opera, Chrome, Safari, but not FF 3.6 or 8.0).

EDIT3

Ok, given up on this. All the alternative (and better) stylesheet versions work in FF, so it seems a bit pointless worrying about why this particular code doesn't work in FF...

Upvotes: 2

Views: 2653

Answers (5)

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

jquery css() uses inline style sets to set the property. The API it's using doesn't allow !important in the string.

See also https://bugs.webkit.org/show_bug.cgi?id=73941 for the WebKit bug on this; the existence of that bug (which they only recently fixed) is what allowed your script to work in Chrome and Safari.

Upvotes: 0

Richard
Richard

Reputation: 4415

You should preferably change both your CSS and JS and add a class to the TD on hover, and define this in your CSS. This reduces JS and keeps things where they belong:

http://jsfiddle.net/bDBWE/3/

$('#dialog-date-picker td').hover(function () {
    $(this).addClass('hover');
}, function() { 
    $(this).removeClass('hover');
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337550

The problem is because the second css() call is overwriting the first. Try this:

$('#dialog-date-picker td').hover(
    function () {
        $(this).css({
            'border-style': 'inset !important',
            'border': '2px solid #6060b0'
        });
    }, 
    function() { 
        $(this).css({
            'border-style': 'outset !important',
            'border': '2px solid #606060'
        });
    }
);

Example fiddle

EDIT

Here's an extra fiddle thanks to PPvG and ptriek with a much more elegant solution which uses classes and solves the issue of setting an outset border, then immediately making it solid.

Updated Fiddle

Upvotes: 2

dku.rajkumar
dku.rajkumar

Reputation: 18568

i guess the id dialog-date-picker is created dynamically so better to use on with events mouseover and mouseout.

$('#dialog-date-picker td').on('mouseover' :
    function () {
        $(this).css('border-style', 'inset !important');
        $(this).css('border', '2px solid #6060b0');
    }, 
    'mouseout' :function() { 
        $(this).css('border-style', 'outset !important');
        $(this).css('border', '2px solid #606060');

    }
);

Upvotes: 0

Ben
Ben

Reputation: 270

   $('#dialog-date-picker td').hover(function () {
      $(this).css({
         'border-style' : 'inset !important',
         'border'       : '2px solid #6060b0'
      });
   }, function() { 
      $(this).css({
         'border-style' : 'outset !important',
         'border'       : '2px solid #6060b0'
      });
   });

Thats also a little clean up in code for you too! Try not too use so many CSS functions, as your just essentially 're-dipping' when there's no reason too!

Also is your #dialog-date-picker being created by jQuery, if so you need to nest this function inside the function that creates that td.

Upvotes: 0

Related Questions