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?

!important is a sign of failure. See: coding.smashingmagazine.com/2010/04/07/… — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Dec 3, 2012 at 19:37
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. — user400654
– user400654, Commented Dec 3, 2012 at 19:39
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. — adeneo
– adeneo, Commented Dec 3, 2012 at 19:39
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. — Tom
– Tom, Commented Dec 3, 2012 at 19:45
@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. — user400654
– user400654, Commented Dec 3, 2012 at 19:58

Scorpio · Accepted Answer · 2012-12-03 19:50:02Z

1

    var headerHeight = $("#header").outerHeight() - $("#header .main-menu").outerHeight();

    jQuery(this).find('nav').attr('style', 'margin-top:' +headerHeight+'px ' + '!important');

answered Dec 3, 2012 at 19:50

Scorpio

1,1711 gold badge21 silver badges38 bronze badges

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

Comments

SLaks · Accepted Answer · 2012-12-03 19:39:36Z

0

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

answered Dec 3, 2012 at 19:39

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

1 Comment

Tom Over a year ago

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

user400654 · Accepted Answer · 2012-12-03 20:01:04Z

0

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*/);

answered Dec 3, 2012 at 20:01

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery Variable In Between Strings

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related