Dynamic height() with window resize() with variable margin

Question

So if have this function in order to dynamically set a div's height based on the browser height:

$(window).resize(function() {
    $('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

This works like a charm. As you can see, there's a 110px margin (that belongs to my header height).

This code is not optimal since, a header height might vary based on the current viewport.

Is there a way to set this up dynamically as well? Or at least set some conditions like:

If browser width is more than 768px then set a 110px margin. If less than 767, then the margin should be 80px.

This is my edited code so far, but I'm not sure if I'm on the right path:

$(window).resize(function() {

    var set_width = $(window).width();
    if(set_width <= 767) 

    $('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

Thanks a lot!

EDIT:

Now that I think of it better, this 110px are not a margin, it's a subtraction I'm doing in order for my header and the slideshow to fill the entire window. If I don't do this subtraction then I end up with my header height + slideshow height (which takes take browser height) making it scroll.

So I don't think I can do this with CSS. That's why I was thinking on a Javascript solution.

While it's all nice and good to implement this in JavaScript have you considered implementing the responsiveness in CSS using media queries? — Halcyon
– Halcyon, Commented May 21, 2015 at 16:06
@Halcyon How can I implement this in CSS if the height is dynamic? — Johann
– Johann, Commented May 21, 2015 at 16:13
@Johann, media queries won't help you set dynamic height, do calculations etc. — lshettyl
– lshettyl, Commented May 21, 2015 at 16:25
@LShetty That's what I thought. Could you take me in right direction please? — Johann
– Johann, Commented May 21, 2015 at 16:26

lshettyl · Accepted Answer · 2015-05-21 18:54:47Z

2

So, you'd need something like the following. I hope the code is straightforward.

$(window).on("resize", function() {

    var winHeight = $(window).height();
    var headerHeight = $("header").height();
    $('#slideshow').height(winHeight - headerHeight);
});

$(window).trigger('resize');

The sample HTML I'd used as a model is:

<body>
    <header>my header</header>
    <div id="slideshow"></div>
</body>

answered May 21, 2015 at 18:54

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

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

Comments

ravish.hacker · Accepted Answer · 2015-05-21 19:52:43Z

1

You can do something like this:

$(window).resize(function() {
    var buffer = ($(window).width()<768)?80:110;
    $('#slideshow').height($(window).height() - buffer );
});

$(window).trigger('resize');

As Halcyon suggested in comments, use css. That is the neatest way to do it.

edited May 21, 2015 at 19:52

answered May 21, 2015 at 16:07

ravish.hacker

1,19314 silver badges21 bronze badges

1 Comment

Johann Over a year ago

I think your solution is more on the right path, please check updated question. Is the: var buffer = ($(window).height()<768)?80:110; part correct? I thought it would be: var buffer = ($(window).width()<768)?80:110; instead

Collectives™ on Stack Overflow

Dynamic height() with window resize() with variable margin

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related