Ajax used to replace content div which has overflow:auto ends up adding extra scrollbars

Question

im using a jquery ajax method to load different content divs, my content div (the div that get replaced each time i click on a link) has overflow:auto CSS on it, but when i load a page, it adds another scrollbar to my content div like so...

css overflow:auto with ajax

When it should really look like this for each page...

enter image description here

Here is my js...

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#links li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.html #cont';
            $('#cont').load(toLoad)
        }
    });

    $('#links li a').click(function(){

        var toLoad = $(this).attr('href')+' #cont';
        $('#cont').hide('fast',loadContent);
        $('#load').remove();
        $('#wrap').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#cont').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#cont').show('fast',hideLoader('fast'));
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });
});

And this is the CSS for my content div...

#cont {
    overflow:auto ;
    margin:0 auto ;
    width:736px ;
    height:341px ;
    padding: 0 0 0 6px ;
}

Can anyone think of a reason for the extra scrollbars, or can anyone think of a workaround?

I'm using PHP include files to load my content...

<!DOCTYPE html>
<html>
    <head>
        <title>I.C.T - St. Patrick's Academy, Lisburn</title>
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <script type="text/javascript" src="assets/js/jq.js"></script>
        <script type="text/javascript" src="assets/js/js.js"></script>
    </head>

    <body>
        <div id="wrap">
                <?php include("includes/head.php"); ?>
            <div id="screen">
                <div id="pad">
                </div>

                <?php include("includes/home.php"); ?>

            </div>
        </div>
    </body>
</html>

posted the main html, im using php includes – Finbar Maginn Feb 05 '13 at 14:03 — Finbar Maginn, Feb 05 '13 at 14:03

score 1 · Answer 1 · answered Feb 06 '13 at 17:29

1

got it working, decided to use the content wrapper and have the overflow:auto on it, didnt need to change anything on the javascript :)

answered Feb 06 '13 at 17:29

Finbar Maginn

257
2
11

score 0 · Answer 2 · answered Feb 05 '13 at 21:57

Without seeing your full HTML, including the content that is being added via the PHP includes, it is a little difficult to answer this with certainty.

Based on your code, it appears that you may be replicating the #cont container inside of itself. Because it has overflow: auto it would continually add more nested scroll bars.

When you use .load() with a selector, it takes the element selected along with its content. See jQuery Loading Page Fragments.

To fix this problem, I suggest using a different container on your main HTML that simply serves as a receptacle for the loaded content and does not have any styling. Then modify your JS code to load into that one.

function loadContent() {
    $('#content-wrapper').load(toLoad, '', showNewContent());
}

jsfiddle - bad behavior (for example of bad behavior only)

jsfiddle - fixed beheavior

Ajax used to replace content div which has overflow:auto ends up adding extra scrollbars

2 Answers2