In Jquery, need to get number value from CSS instead of fixed number

Question

In the below code, there's the "initialHeight" property which has a fixed value of 222. The problem is, the website is designed responsively, so I need to have different values for "initialHeight" depending on the screen resolution. So if possible I need to have the script read the height from whatever I specify in the CSS.

Here's the current code:

<script type="text/javascript">
$().ready(function() { 
$("div.more-block").divgrow({
initialHeight: 222
}); 
});
</script>

So I'd like to have something like....

<style type="text/css">

.height {height:250px}

@media screen and (max-width: 1440px) {
.height {height:210px}
}

@media screen and (max-width: 1200px) {
.height {height:150px}
}

</style>

<script type="text/javascript">
    $().ready(function() { 
    $("div.more-block").divgrow({
    initialHeight: (css height style from .height)
    }); 
 });
 </script>

Is that possible somehow?

Why not just use initialHeight: $("div.more-block").height() ? — Patrick Gunderson
– Patrick Gunderson, Commented Aug 1, 2014 at 20:03
I guess he wouldn't want to divgrow() the div if it already had the right height. @user1610904 what does divgrow() does exactly? — Ramy Nasr
– Ramy Nasr, Commented Aug 1, 2014 at 20:07
Basically it takes the "more-block" div and shows more content after a specified height. So for example it's supposed to show only 222px of height on page load, but then when you click a button it expands the content. Here's the divgrow script page if that helps: mywebdeveloperblog.com/my-jquery-plugins/jquery-divgrow — user1610904
– user1610904, Commented Aug 1, 2014 at 20:12

Ramy Nasr · Accepted Answer · 2014-08-01 20:19:54Z

1

I believe what you are looking for is setting the minimum height of your container first:

@media screen and (max-width: 1440px) {
   .more-block {
      min-height: 210px;
   }
}

Then you can get that value in JS, like that:

var $more = $("div.more-block");
var initialHeight = parseInt($more.css('min-height'));

$more.divgrow({
    initialHeight: initialHeight
});

edited Aug 1, 2014 at 20:19

answered Aug 1, 2014 at 20:13

Ramy Nasr

2,55723 silver badges25 bronze badges

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

2 Comments

nanobar Over a year ago

var initialHeight = +$more.css('min-height'); bit shorter ;)

Ramy Nasr Over a year ago

Shorter is not always nicer. Clear code that tells what is being done is way better than shorter code. Why use an addition operator to change the type of variable when you have proper method to do so?

Collectives™ on Stack Overflow

In Jquery, need to get number value from CSS instead of fixed number

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related