Using !important in jQuery's css() function

Question

I have a dialog with an overlay declared like so:

     .ui-widget-overlay  {          position: absolute;          left: 8px;          top: 9px;          height: 985px !important;          width: 518px !important;        } 

The page I have will have two different page heights. To account for this with the overlay I have done this in my JS file:

If small one visible:

$('.ui-widget-overlay').css("height", "985px !important"); 

else

$('.ui-widget-overlay').css("height", "1167px !important"); 

Apparently this does not work. Is there another way to over ride !important that would?

The page can switch back and forth so I need to always have one or the other. Also if I do not add !important to the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)

Any suggestions?

Answer 1

There is a trick to do this.

$('.ui-widget-overlay').css('cssText', 'height:985px !important;');  $('.ui-widget-overlay').css('cssText', 'height:1167px !important;'); 

cssText is doing the trick here. It is appending css styles as string, not as variable.

Answer 2

Dont apply styles to a class. Apply a class to your div as a style!

Let jQuery do all the work for you

You style sheet should have these classes in them

.ui-widget-overlay  {          position: absolute;          left: 8px;          top: 9px;          width: 518px !important;           }  .ui-widget-small { height: 985px;  }  .ui-widget-full { height: 1167px; } 

Ok thats your CSS sorted

now your div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div> 

Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full') 

And you dont need to use !important - that is really used when you start having issues with large CSS files or several loaded styles.

This is instant but you can also add an effect

$('#myWidget').hide('slow', function(){ $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow') }  ) 

You can add styles dynamically to your page like this- and to replace all existing classes with another class, we can use .attr('class', 'newClass') instead.

$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>') $('#myWidget').attr('class', 'ui-widget-overlay') $('#myWidget').addClass('myDynamicWidget') 

But you do not want to be over writing your existing styles using this method. This should be used in a 'lost' case scenario. Just demonstrates the power of jQuery