jQuery Forum

The flickering problem is easy to solve. I hear all the time that you cant... but the fix is pretty easy.


first you want to set the initial height of your document into a variable:
var = dheight = $('html').height(),

then you want to set set the initialal height of whatever content you're going to be manipulating to a variable. You want to be able to store how high just the content is so that if the window goes smaller than that scroll will still function.

cbody = $('#contentbody').height(),

Then take the initial height of window and set it into a variable

wheight = $(window).height(),

then you want to  set the a variable for the difference between the initial window height, and the initial document height, PLUS the initial height of the content.

cheight = wheight - dheight + cbody;

Then, on load:

if (wheight > dheight){
            $('#contentbody').height(cheight);
        }

Then create a resize function which first measures the height of the window, then runs a function to add or remove scrolling based on the height, then run a function that will change the height of the contentbody:
 
  $(window).resize(function(){
            wheight = $(window).height();
            noscroll();
            changepush();
        });

Then create a class in css called .noscroll with the properties overflow:hidden and overflow-y:hidden.

Then create a no scroll function that if the updated window height (the height updates everytime the window is resized) is higher than the initial document height, add the noscoll class to the html tag, and remove the tag if the window is less than the initial height of the document

        function noscroll(){
           if (wheight > dheight) {
                $('html').addClass('noscroll');
           }

            else if (wheight <= dheight) {
                $('html').removeClass('noscroll');
            }
           
            else {}

        }

finally create a function that, if the updated window height is greater than the initial document height, set the height of content body to the updated window height minus the initial document height, plus the initial content height.

    function changepush(){
           if (wheight > dheight) {
                   $('#contentbody').height(wheight-dheight+cbody);
           }
           
        }

Sorry I don't know how to explain this better, but it works perfectly, and allows me to resize any element on the page without flicker.


Full code:

    $(document).ready(function(){
       
        var    dheight = $('html').height(),
            cbody = $('#contentbody').height(),
            wheight = $(window).height(),
            cheight = wheight - dheight + cbody;
           
        if (wheight > dheight){
            $('#contentbody').height(cheight);
        }
       
        $(window).resize(function(){
            wheight = $(window).height();
            noscroll();
            changepush();
        });

        function noscroll(){
           if (wheight > dheight) {
                $('html').addClass('noscroll');
           }

            else if (wheight <= dheight) {
                $('html').removeClass('noscroll');
            }
           
            else {}

        }

        function changepush(){
           if (wheight > dheight) {
                   $('#contentbody').height(wheight-dheight+cbody);
           }
           
        }

});

Hi,
Thanks msevrens!

I think your solution should also consider:
- calling changepush() function outside of resizing, too > otherwise content may be non-100% on first page load
- setting minHeight instead of height > avoid scrollbars inside content
- adding orientationchange to resize function
- adjusting for first header and last footer on page (there may be multiple header/footers)

The following looks ok for me on ipad, FF, IE8, Op, Saf, Chrome (I haven't checked other devices). Script needs some fine-tuning, though.

Not a jQuery fix but:

@Frequent Another minor issue:

Has there been any progress with this in general?