How to modify CSS via JQuery


Tags: javascript,jquery,html,css

Problem :

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.



Solution :

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"});

    CSS Howto..

    How to remove hover state

    How many digits after the decimal point are interpreted in stylesheet rules?

    Hide and show when click a button

    How to make css style on Google custom search engine

    How to apply ckeditor css to output

    How to modify wordpress plugin css [closed]

    How to style a single QToolButton using qss/css

    How to use images in CSS that is used from Jade files rendered via Node.js

    How to create a Sass mixin for this CSS radial gradient?

    How to make an svg masked image compatible with Internet Explorer

    How to Change Css coding with a link [closed]

    how to select one element in jQuery

    How to remove the blue border around ImageMap control in the Internet Explorer?

    How to style radio button or checkbox inside a bootstrap table?

    CSS Specificity - how to overlap twitter-bootstrap

    How to extend the border-top on my nav_bar class

    How to align element based on the other element that is above

    css: How to make elements not to overlap + automatically place them in a relevant position

    How can I use jQuery (or CSS) to sort HTML tables by column?

    how do I properly position & scale these elements in CSS?

    How to keep height of parent div with absolute positioned img inside?

    How to select the second th into the thead of a table having a specific ID using CSS?

    How to code vertical banner

    How can I change the inline style text color of an element without the ability to add a class or id?

    Show-hide based on two sets of selectors--how to make them work together?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    How to vertically align both image and text side by side in a div

    How to style dropdown menu using CSS in HTML

    CSS: How can I stop the horizontal navigation links from shiningthrough the floating cart when it's accordioned down?

    div under div - dont know how to do this