CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kate jackson
kate jackson

Reputation: 33

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

Upvotes: 3

Views: 107

Answers (3)

Armin Ghasemi
Armin Ghasemi

Reputation: 381

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.

Upvotes: 1

codelock
codelock

Reputation: 770

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

Upvotes: 2

Vishal
Vishal

Reputation: 2181

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

Upvotes: 0

Related Questions