why jquery code doesn't work in my project

Question

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');
}

you may need to wrap code in $(document).ready(function() { ... your code ... }); .... or $(function() { ... your code ... }); ... this is jquery 101 — Jaromanda X
– Jaromanda X, Commented Sep 17, 2016 at 8:04
Try to use window.onload instead specially if you have images — Fareed Alnamrouti
– Fareed Alnamrouti, Commented Sep 17, 2016 at 8:49

codelock · Accepted Answer · 2016-09-17 08:29:47Z

You might want to wrap your jQuery code in a "ready" event.

Doing this will make sure that the javascript code inside of it will be executed only after your document is loaded (hence all elements that might be involved in your javascript code exist in the document)

$(document).ready(function(){

    // your code

});

Please see: https://jsfiddle.net/u9k2c72h

Another approach is to move your javascript to the bottom of the body tag, but this is not recommended (as a side note: it is good practice to load your javascript files at the bottom of the document, if possible).

A short explanation on why it happens

In some cases, your javascript code might be executed before some elements in your HTML were added and made available to use (the document rendering process), so if you have some jQuery code that intend to make use or manipulate an element that is not yet available - your code will not work (usually without emitting any errors and keeping you wondering "why it is not working?")

So the easiest thing is to insert the javascript after the position in the document where the elements are inserted (usually at the end of the document, just before the </body> tag, so in theory the element is being added before the browser gets to read the javascript and execute it.

The better approach is to use the $(document).ready(function(){ }); and wrap any dependable javascript code (and any other document-loaded dependent code) in it, which is more reliable and also gives you the advantage of being able to position your javascript in various positions in your HTML and maintain the same effect.

If you do not fancy jQuery you can do it with vanilla javascript using something like:

document.addEventListener( "DOMContentLoaded", function(){

    // code code

}, false );

(Remember that DOMContentLoaded is a little more strict then jQuery's ready event, since DOMContentLoaded actually wait for everything in the page to be loaded - including styles,scripts etc..)

Hope it helps a bit

please try changing the overflow-x property in your .flighmatrixmain class to auto overflow-x:auto;

Armin Ghasemi · Accepted Answer · 2016-09-17 08:43:39Z

1

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.

answered Sep 17, 2016 at 8:43

Armin Ghasemi

3812 silver badges12 bronze badges

1 Comment

kate jackson Over a year ago

doesn't need to change HTML code? just comment part of my JS and overwrite css?!?

Vishal · Accepted Answer · 2016-09-17 08:06:45Z

0

Put your code in $(document).ready event handler as follows:

$(document).ready(function(){
  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');
  }
});

answered Sep 17, 2016 at 8:06

Vishal

2,18114 silver badges25 bronze badges

Collectives™ on Stack Overflow

why jquery code doesn't work in my project

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related