I have not been able to find an answer that works for me on SO.

Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.

What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).

I can get the height initially but it never changes after the first value when the screen is being resized.

quick demo up here: link

look in console to see height being returned. notice that it doesn't change when browser is resized.

JS

$(function(){

    var explore = $('#explore').height();
    console.log(explore);

    $( window ).on("resize", function() {
    console.log(explore);
    });

});

I've also tried .css("height") but that didn't fix the issue.

*note the div does not have fixed positioning on this example since it would make the layout more confusing

I have not been able to find an answer that works for me on SO.

Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.

What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).

I can get the height initially but it never changes after the first value when the screen is being resized.

quick demo up here: link

look in console to see height being returned. notice that it doesn't change when browser is resized.

JS

$(function(){

    var explore = $('#explore').height();
    console.log(explore);

    $( window ).on("resize", function() {
    console.log(explore);
    });

});

I've also tried .css("height") but that didn't fix the issue.

*note the div does not have fixed positioning on this example since it would make the layout more confusing

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 12, 2014 at 18:24 John_911John_911 1,18044 gold badges2222 silver badges3838 bronze badges 2

• 5 explore will only have the value at the time you define it, you need to check it's size inside the resize handler – charlietfl Commented Jun 12, 2014 at 18:26
• Bingo! I knew it was something simple. If you post as an answer I'll accept! Thanks – John_911 Commented Jun 12, 2014 at 18:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You are not modifying explore:

Change it as follows:

$(function(){

    var explore = $('#explore').css("height");
    console.log(explore);

    $( window ).on("resize", function() {
       explore = $('#explore').css("height");
       console.log(explore);
    });

});

You need to add a resize listener to the window like so:

function repositionDivOnResize() {
 // this is where you'll dynamically reposition your element
}

$(window).on("resize", repositionDivOnResize)