Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

resize content not working

I have 4 divs on my page which use 100% of the page width:-

divLogo
menuBarHolder
bodyContents
divFooter

I want to resize bodyContents to use available height remaining on the window, so have written the following code:-
    $(document).ready(function () {
        $(window).resize(resizeContent());
    });
    $(window).load(function () {
        resizeContent();
    });

    function resizeContent() {
        $("#bodyContents").css("height",$(window).height() - ($("#menuBarHolder").height() + $("#divFooter").height() + $("#divLogo").height()) + "px");
    }

Open in new window


Which I thought would sum up "divLogo", "menuBarHolder", and "divFooter" and subtract it from the window height and that would be the height of "bodyContents", however I still have a vertical scroll bar.

On debugging "divLogo" has a height of 0, however it has a logo image inside the div:-
<div id="divLogo"><img src="img/Logo.png" /></div>

Open in new window


Also when the window is resized it doesnt seem to run the resizeContent() function .

Im a little confused, because as far I can see this should work, and it is moving the divFooter down so I know its initially running, just wrong and not running when resized.

Any ideas?
0
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
replace : $(window).resize(resizeContent());
by : $(window).resize(resizeContent);

and set the dimension of your logo :
<div id="divLogo"><img src="img/Logo.png" style="width:320px;height:200px;" /></div>
0
 
leakim971PluritechnicianCommented:
    $(document).ready(function () {
    });
    $(window).load(function () {
        resizeContent();
    }).resize(resizeContent);

    function resizeContent() {
        $("#bodyContents").css("height",$(window).height() - ($("#menuBarHolder").height() + $("#divFooter").height() + $("#divLogo").height()) + "px");
    }

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now