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?
Please remove height attribute from class and then try to implement your if and else condition.
Enjoy code....keep smiling...
You can create a dynamic stylesheet with rules that override the properties you want and apply it on the page.
Now, when you add our newly created classes, they will take precedence since they are the last defined.
demo at http://jsfiddle.net/gaby/qvRSs/
update
For pre-IE9 support use
demo at http://jsfiddle.net/gaby/qvRSs/3/
Unless I've misread your question, what you're doing does work in jsfiddle.
EDIT: My fiddle only works in some browsers (so far, Chrome: pass, IE8: fail).
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
Ok thats your CSS sorted
now your div
Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use
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
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.
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
You could try using
$(this).attr('style', 'height:1167px !important');
I haven't tested it, but it should work.There is a trick to do this.
cssText is doing the trick here. It is appending css styles as string, not as variable.