jQuery Variable In Between Strings

Question

I want to pass the following variable like so:

var $headerHeight = jQuery("#header").outerHeight() - jQuery("#header .main-menu").outerHeight();
jQuery(this).find('nav').attr('style', 'margin-top:' + $headerHeight + '!important');

It's obviously used in the wrong syntax; I just can't figure out how to use it correctly. The jQuery ".css" function isn't an option because it has to have the "!important" declaration. How can I pass $headerHeight in the above example?

• Diodeus - James MacFarlane: !important is a sign of failure. See: coding.smashingmagazine.com/2010/04/07/…
• user400654: Because of the way css specificity works, you shouldn't need to use !important on an inline-style, inline styles override stylesheets unless the declaration is using !important. If that's the case, the correct fix would be to fix the css.
• adeneo: You need to add some pixels if you intend to use that as a string -> +'px!important', however I do tend to agree, having to use important this way is a sign that you're doing something wrong.
• Tom: The reason I'm having to use "!important" is because I'm using the jQuery "slideToggle" function which adds a margin-top which I don't want as it moves the menu down as the height grows, I need the menu in a fixed place and for it to just slide down with height, my "!important" solution doesn't work the way I wanted anyway now I've added the "px" unit I forgot (thanks for that by the way, not sure how I forgot it), anyone got any ideas on a jQuery "slideToggle" alternative function which only slides down in height and not position? Cheers, Tom.
• user400654: @Tom then i suggest instead using $.animate, it will result in much cleaner code than using slideDown with inline !important. slideDown's css changes will override your !important anyway.

Answer 1

 var headerHeight = $("#header").outerHeight() - $("#header .main-menu").outerHeight();
 jQuery(this).find('nav').attr('style', 'margin-top:' +headerHeight+'px ' + '!important');

Answer 2

You need to add a unit to the property value. (probably px)

• Tom: Thanks for this, if you're interested in helping a dude out see the comment above, if not cheers anyways! Tom.

Answer 3

You're fixing the wrong problem. Instead of un-doing a change that slideToggle does, simply don't use slideToggle.

$(myelement).animate({
 height: "200px" // or whatever your target height is, calculated or static.
},500/*duration*/);