How to modify CSS via JQuery

Question

I want to get the screen and modify the css styles of my box. Thats my code

if ($('.content').height() > $(window).height() - 100) {
    $('.content').css("max-height", $(window).height() - 100);
}

Now I want to set the max height of the .content box lower than the height of my screen size. If my content box is higher than my screen size, the css should set de max height and change the overflow to auto.

[This](http://stackoverflow.com/questions/838137/jquery-change-height-based-on-browser-size-resize) might help you mate... — Marikkani Chelladurai, Oct 17 '13 at 14:24
no error. e.g. my screen sice is 924px and my .content looks higher and is out of the screen, but its only 608px high — Chrisser Madethis, Oct 17 '13 at 14:28
@ChrisserMadethis please read @Vandesh's answer, the fewer `$` you have in your code the better. Your script so far has 4, and it could have 2. — Fresheyeball, Oct 17 '13 at 14:53

score 2 · Accepted Answer · answered Oct 17 '13 at 14:35

Looks like you could do this -

var content = $(".content");
// Cache the height in variables, no need to access DOM again and again
var screenHeight = $(window).height();
var contentHeight = content.height();
if(contentHeight>windowHeight-100){
  content.css("overflow","auto"); // Note - this will change it for the current instance of the page and NOT in your CSS file
  content.css("max-height",(windowHeight-100) + "px");      
}

You can also combine the above two css properties in one single statement (written separately for explanation) -

content.css({"max-height":(windowHeight-100)+"px","overflow":"auto"});

Ashis Kumar · Answer 2 · 2013-10-17T14:44:16.257

1

I would suggest you to use the max height value along with px.

if ( $('.content').height() > ($(window).height() - 100) ) {
    $('.content').css("max-height", ( $(window).height() - 100 ) + "px" )
                 .css("overflow","auto");
}

This would resolve you issue.

edited Oct 17 '13 at 14:44

answered Oct 17 '13 at 14:36

Ashis Kumar

6,494
2
21
36

score 0 · Answer 3 · answered Oct 17 '13 at 14:29

0

Do this -

var maxHeight = $(window).height() - 100;
if ($('.content').height() > maxHeight) {
    $('.content').css({"max-height": maxHeight, overflow: "auto"});
}

answered Oct 17 '13 at 14:29

Bikas

2,709
14
32

hm i've seen that jquery writes nothing into the html – Chrisser Madethis Oct 17 '13 at 14:35

score 0 · Answer 4 · edited Oct 17 '13 at 14:37

0

Use unit "px"

 $('.content').css("max-height", ($(window).height() - 100)+"px");

edited Oct 17 '13 at 14:37

Praveen

55,303
33
133
164

answered Oct 17 '13 at 14:33

user2886352

16

How to modify CSS via JQuery

4 Answers4