how to show a div if some content on a page extend and not longer fits the screen totaly but there is a scroll bar needed

Question

I have a script that will hide a div when the site fills the screen but there is no need to scroll the page down so the site fits the screen at this point the divs are hidden true the script.

I have some content that will extend when you click on a button and sometimes this content will not longer fit the screen and there is a scroll bar needed to scroll down, Now i would like to show the div's again is there a way to make this possible or will it be a very complex situation?

the script that hides the div tag:

<script type="text/javascript">
if($(document).height() > $(window).height()){
$("#scrollTop").show();
}
else {
$("#scrollTop").hide();
}
</script>

Are you asking if it is possible to show your hidden div elements when a single div's content is made taller than the screen height after clicking to expand it? — C.S., Jun 01 '12 at 18:48

score 0 · Answer 1 · answered Jun 01 '12 at 21:29

I ran into a similar problem a while back. What I did was add a handler to $(window).resize(...) that recalculated whatever depended on whether there was a scrollbar (in your case, whether to show the div), then added a call to $(window).resize() after every action that might change the height of the page content (fortunately I only had one of those).

Example:

$(window).resize(function() {
    if($(window).height() < document.body.scrollHeight) {
        $("#scrollTop").show();
    } else {
        $("#scrollTop").hide();
    }
});
$("#extendButton").click(function() {
    $(window).resize();
});

jsFiddle: http://jsfiddle.net/TKDGz/

how to show a div if some content on a page extend and not longer fits the screen totaly but there is a scroll bar needed

1 Answers1