Home/ Questions/Q 8906267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:36:36+00:00

I have the following JQuery that is called whenever the window is resized or

  • 0

I have the following JQuery that is called whenever the window is resized or on first load. I have some issues with it that it does not seem to work as expected on first load. Could someone please tell me what is malfunctioning?

JQuery (1.8.3)

function setContentHeight() {
    var height = $(document).height();
    $('#content, #content > div:first-child').height(height - 242);
    $('#content-text-description').height(height - 280);
}

$(window).resize(function(e) {
    setContentHeight();
});

$(document).ready(function(e) {
    setContentHeight();
});

HTML

<body>
    <div id="container">
        <div id="banner"></div> <!-- Header -->
        <div id="navi"></div> <!-- Navigation Pane -->
        <div id="content"> <!-- Content loaded with include -->
            <div id="home"> <!-- Start of content -->
                <div id="content-text-description"></div> <!-- container for custom scroller -->
            </div>
        <div id="footer"></div> <!-- Footer -->
    </div>
</body>

CSS

body {
   margin:0;
   font-family:"Century Gothic";
   line-height:30px;
}

#container {
    width:1024px;
    margin: 0 auto;
}

#banner {
    width:1024px;
}

#content {
    width:1024px;           
    height:470px;
    z-index:98;
    float:left; 
    top:-7px;   
    overflow:hidden;
}

#footer {
    text-align:center;
    background:#59585D;
    position:absolute;
    bottom:0px;
    width:1024px;
    height:30px;
    font-size:12px;
    color:#ffffff;
}

#content-text-description {
    padding-top:20px;
    display:block;
    width:800px;
    z-index:3;
    overflow:auto;
}

As far as I know, the JQuery bit should function as expected by resizing the requested divs when the document is loaded or window resized, but it is not.

Is it something I’m doing wrong or is what I’m trying to achieve not possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I fixed it by playing with the code some more…

    Simple really.

    var height = $(document).height();

    should change to:

    var height = $(window).height();
    • 0