How can I send a Jquery var to be used in a CSS property

Question

Need to know how I can use a Jquery var in a CSS property, I've searched around the net but haven't found any answers that refer to what I want, and also I'm not the greatest coder to figure this out. Have not used Jquery alot!

Code JQUERY:

 <script>
//find window height
          var winHeight = $(window).height(); 
          alert(winHeight);//=692
$('menuHolder').css(height(), winHeight);

 </script>

What does the function height return in .css(height(), winHeight); ? Have you actually read the .css documentation (I bet this would help you the most)? Also, as @Xander points out, in HTML there is no menuHolder element. Maybe you meant to use a class, or maybe you have to read some more jQuery tutorials first. Btw there is nothing like a "jQuery variable". jQuery is a library and JavaScript is the language. If any, it's a JavaScript variable, but since we know that it's about JavaScript, it's just a variable ;) — Felix Kling
– Felix Kling, Commented Apr 21, 2012 at 20:18

d_inevitable · Accepted Answer · 2012-04-21 20:41:09Z

2

There are many issues with your code:

menuHolder is not a valid html tag.
height() is a function call which I cannot imagine should ever return the string "height".
It seems like you are not running this after the document is fully loaded?

Suppose your html looks like this:

<div id="menuHolder">This is the menu holder</div>

Note that the tag in question must have id attribute set to "menuHolder". If you have more than one menuHolder, then you should use the class attribute instead.

Then your js should be:

$(function(){
   $('#menuHolder').css("height", $(window).height());
});

http://jsfiddle.net/93hFW/

or

$(function(){
   $('#menuHolder').height($(window).height());
});

http://jsfiddle.net/93hFW/1/

If you have are using the class attribute instead as suggested above, then you should use a . (dot) instead of the # to prefix the jQuery selector.

edited Apr 21, 2012 at 20:41

answered Apr 21, 2012 at 20:26

d_inevitable

4,4612 gold badges31 silver badges49 bronze badges

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

5 Comments

Scott Robertson Over a year ago

Thanks for your reply, would i need to call that function or will it run automatically

d_inevitable Over a year ago

@ScottRobertson The function is passed to jquery to be called once the DOM has fully loaded. Without this measure, jQuery may not be able to find the element, because it hasn't been loaded yet.

Scott Robertson Over a year ago

Hey thanks alot for your reply, I was using a class: this worked perfectly! $('.menuHolder').css("height", $(window).height());

d_inevitable Over a year ago

@ScottRobertson, your welcome. jQuery selectors work like CSS selectors. If your question is answered, you should accept it, by clicking the check mark. Doing so will mark this question as answered, award you 2 reputation points and 15 reputation points to the person who has answered your question.

Scott Robertson Over a year ago

That would be you @-d_inevitable. Thanks.

epascarello · Accepted Answer · 2012-04-21 20:18:38Z

2

You want to set the height of the element?

$('menuHolder').css("height", winHeight);

would be better to do

$('menuHolder').height(winHeight);

answered Apr 21, 2012 at 20:18

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

Florian Margaine Over a year ago

Code is full of <menuHolder /> elements for sure!

Collectives™ on Stack Overflow

How can I send a Jquery var to be used in a CSS property

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related