kate jackson kate jackson - 2 months ago 8
CSS Question

why jquery code doesn't work in my project

i have a problem with my code, want to measure the total width of my ul and check if it is less than the window width it doesn't show the overflow:scroll, and if it is greater than window width just hide the scroll under of li(s).

each li has 120px width and its margin is: 0 2px; that is why i am use 120 and 4 to sum up the total width of .ulcontainmatrix

my problem is: the code works correctly when i use it in browser console and push the Run code, but doesn't work in my code when the window load!!

MY CSS

.flighmatrixmain{
overflow-x:scroll;
margin-bottom:20px;
}


MY HTML

<div class="flighmatrixmain">
<ul class="ulcontainmatrix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
</ul>
</div>


My JS

var ULwidth = $(".flighmatrixmain ul li").length * 120 + $(".flighmatrixmain ul li)").length * 4;
$(".flighmatrixmain .ulcontainmatrix").width(ULwidth);

if ($(".flighmatrixmain ul li:not(ul.lines li)").length * 120 < $('.flighmatrixmain').width()) {
$('.flighmatrixmain').css('overflow', 'hidden');
}

Answer

Greate problem, and I have to say that you're correct 90%, but some changes needed.

I changed your css to this:

.flighmatrixmain{
    overflow-x:auto;
    overflow-y:hidden;
    margin-bottom:20px;
}

and some changes on your jquery code:

$(function(){
var ULwidth = $(".flighmatrixmain ul li").length * 120 + $(".flighmatrixmain ul li)").length * 4;
$(".flighmatrixmain .ulcontainmatrix").width(ULwidth);

// just remove these lines
//if ($(".flighmatrixmain ul li:not(ul.lines li)").length * 120 < $('.flighmatrixmain').width()) {
    //$('.flighmatrixmain').css('overflow', 'hidden');
//}

}

and everything works fine.