javascript - Adjusting elements based on scrollHeight using JQuery - Stack Overflow

admin管理员组

文章数量:1327938

Here's what i have so far:

    function loadOff(){
     $(document).ready(function(){
        $("#eLoader").ajaxStop(function(){
             $(this).hide();
             $("#eventsContent").show();
             var h = document.body.scrollHeight;
             $("#bodyBackground").css("height",h+100+"px");
             $("#sidePanel1").css("height",h-105+100+"px");
             $("#bottom").css("top",h+100+"px");
         });
      });
   }

This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.

The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.

All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.

if there is a better, more efficient way to achieve this oute, please, do tell.

Thanks.

Here's what i have so far:

    function loadOff(){
     $(document).ready(function(){
        $("#eLoader").ajaxStop(function(){
             $(this).hide();
             $("#eventsContent").show();
             var h = document.body.scrollHeight;
             $("#bodyBackground").css("height",h+100+"px");
             $("#sidePanel1").css("height",h-105+100+"px");
             $("#bottom").css("top",h+100+"px");
         });
      });
   }

This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.

The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.

All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.

if there is a better, more efficient way to achieve this oute, please, do tell.

Thanks.

• javascript
• jquery

Share Improve this question Follow edited Jun 5, 2009 at 1:58 Jose Basilio 51.5k1313 gold badges123123 silver badges117117 bronze badges asked Jun 5, 2009 at 1:24 JeremyJeremy 3511 gold badge22 silver badges44 bronze badges 2

• Can you give us a clearer hint of what you want it to look like? – John Fisher Commented Jun 5, 2009 at 1:30
• I would like sidePanel1 and bodyBackground to stretch just below the loaded content (100px) and bottom to be 100px below the content. – Jeremy Commented Jun 5, 2009 at 1:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)

Sticking with the JQuery patterns, you would use

var h = $(window).height();

Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.

$("#eventsContent").outerHeight();

本文标签： javascriptAdjusting elements based on scrollHeight using JQueryStack Overflow