Search code examples
javascripthtmlcssoverflowvertical-scrolling

Why doesn't overflow work in my document?

My Problem...
For some reason my scrolling wheel which I had made using css overflow: auto stopped working, why is that? The scrolling wheel is necessary as this is a long side bar which should have a scrolling wheel of its own

Note:I've removed a lot of li's and ul's so that I can post the question

As well as that as you see in my code there are a lot of repetitive ul's and li's. Is there an easier way to write all of this?

My Code... 

<body>
    <div id="mainBar" class="mainBarOthers">
        <ul>
            <a href="EverythingPrg.html">
                <li class="theTitle">
                    Home Page
                </li>
            </a>
        </ul>
        <ul class="ulHighlight">
            <a href="Added Arrays.html" >
                <li>
                    Added Arrays 
                </li>
            </a>
        </ul>
        <ul>
            <a href="AddOrMinus.html">
                <li>
                    AddOrMinus
                </li>
            </a>
        </ul>
        <ul>
            <a href="ArayOnlyNumbers.html">
                <li>
                    ArayOnlyNumbers
                </li>
            </a>
        </ul>
        <ul>
            <a href="Array Drawing.html">
                <li>
                    Array Drawing
                </li>
            </a>
        </ul>
        <ul>
            <a href="Array Squared.html">
                <li>
                    Array Squared
                </li>
            </a>
        </ul>

My CSS... 

.mainBarOthers {width: 18%; border-right: 2px solid black; background-color: #feffdd; float: left; overflow: auto; box-shadow: 0px 1px 10px black; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */-moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */}

And my JavaScript... 

window.onload = function () {
    setInterval (function () {
        height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);

        if (height != heightCheck) {
            height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
            height = height - 52;
            heightCheck = height;
            document.getElementById ('mainBar').style.cssText = 'height:' + height;}
    }, 10); // This makes the main bar be the size of the page (can this slow the page down? Better way of doing it...)
}
Solution

  • Answer... 

    var height;
var heightOthers;
var heightCheck;
var heightCheckOthers;

window.onload = function () {
    setInterval (function () {
        height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
        heightOthers = Math.max (document.body.scrollHeight, document.documentElement.clientHeight);

            $(function () {
                if ($('#mainBarOthers').length) {
                    if (heightOthers != heightCheckOthers) {
                    heightOthers = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
                    heightCheckOthers = heightOthers;
                    document.getElementById ('mainBarOthers').style.cssText = 'height:' + heightOthers;
                    }
                }
                else if ($('#mainBar').length) {
                    if (height != heightCheck) {
                    height = Math.max (document.body.scrollHeight, document.documentElement.clientHeight);
                    height = height - 52;
                    heightCheck = height;
                    document.getElementById ('mainBar').style.cssText = 'height:' + height;
                }
            }
        }); 
    }, 10); // This makes the main bar be the size of the page (can this slow the page down? Better way of doing it...)
}

    The problem was that I had two different pages, and the id was the same so they over wrote each other. The fix was to simply make the same function for the height for the other page two.