Firefox not setting css style from JavaScript?

Question

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...

#dialog-date-picker is the id of a UI dialog, which contains a <td> as a descendant. — EML
– EML, Commented Dec 21, 2011 at 12:27

Rory McCrossan · Accepted Answer · 2011-12-21 12:06:30Z

2

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

edited Dec 21, 2011 at 12:06

answered Dec 21, 2011 at 11:39

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

7 Comments

Peter-Paul van Gemerden Over a year ago

My answer was rubbish, this actually solves the problem. My might want to consider using CSS classes, though. Just use $(this).addClass('hover') and $(this).removeClass('hover') (or whatever class name you prefer) and declare the actual styles in CSS. That way, you don't have to edit your JavaScript if you ever want to change the styles.

ptriek Over a year ago

why not just 'border': '2px inset #6060b0'? it's a bit strange first setting border-style to inset, and after that changing it to solid...

Peter-Paul van Gemerden Over a year ago

Here's an updated example, using a class instead of hardcoded styles, as well as @ptriek's useful tip: jsfiddle.net/XnQhH

ptriek Over a year ago

maybe you'd better update your answer, since the actual answer is only in the comments now...

EML Over a year ago

Combining into one hasn't made any difference to me - still works in Opera/Chrome, but not F/F. Your fiddle works in F/F, though, even after I've deleted the css section. I don't understand that.

|

Ben · Accepted Answer · 2011-12-21 11:42:15Z

0

   $('#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.

answered Dec 21, 2011 at 11:42

Ben

2701 silver badge11 bronze badges

Comments

dku.rajkumar · Accepted Answer · 2011-12-21 11:50:32Z

0

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');

    }
);

answered Dec 21, 2011 at 11:50

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

3 Comments

EML Over a year ago

You're right, it is created dynamically - it's a jQuery UI dialog. does this matter? Your answer doesn't actually make any difference, though - it works in Opera/Chrome, but not F/F. Note that I had to edit your code - I put an extra {} pair inside the .on.

EML Over a year ago

Actually, this isn't quite right. #dialog-date-picker is the id of a static div in the html. The contents of the div are picked up by an SSI (#include), from the server. The contents are a table, hence '#dialog-date-picker td'. I think this means that the entire div is "static". However, the dialog is actually a jQueryUI dialog, and is popped up when a button is clicked. So does this make it dynamic? I think it's just made visible by the dialog UI.

dku.rajkumar Over a year ago

I am not exactly getting you but if there is only one table then you neen give the id part, "$('td')" will do the work.

Richard · Accepted Answer · 2011-12-21 12:11:54Z

0

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');
});

answered Dec 21, 2011 at 12:11

Richard

4,4267 gold badges38 silver badges58 bronze badges

Comments

Boris Zbarsky · Accepted Answer · 2011-12-21 18:06:27Z

0

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.

answered Dec 21, 2011 at 18:06

Boris Zbarsky

35.1k5 gold badges54 silver badges57 bronze badges

Collectives™ on Stack Overflow

Firefox not setting css style from JavaScript?

EDIT

EDIT2

EDIT3

5 Answers 5

7 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

EDIT2

EDIT3

5 Answers 5

7 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related