What is the best solution for scrollWidth problem?

Question

In Chrome console:

$('.table-responsive').width(); //working
$('.table-responsive')[0].scrollWidth; //working

In code while rendering HTML:

$('.table-responsive').width(); //working
$('.table-responsive')[0].scrollWidth; //not-working

Cannot read property 'scrollWidth' of undefined

Thanks, @MehdiDehghani, please post your answer so I can approve it as the solution. — zarpio, Sep 15 '18 at 18:35

score 1 · Accepted Answer · answered Sep 16 '18 at 03:49

1

If code works on browser's console (aka dev tools) and doesn't work withing your JS code, that means (in most cases) your JS code runs before DOM/HTML is actually loaded.

You have 2 options:

Put your script tag on bottom of the page (just before </body>)
Use jQuery's .ready(), example:

$(document).ready(function(){ ... });

Which is equivalent to the recommended way of calling:

$(function() { ... });

Related helpful question, here on SO: What does $(function() {} ); do?

answered Sep 16 '18 at 03:49

Mehdi Dehghani

10,970
6
59
64

Thanks, @MehdiDehghani. Can you please up-vote my question and remove this negativity, I don't know why someone marked it with minus points. – zarpio Sep 17 '18 at 05:11
@zarpio done! down voters always should say why, but sometimes the don't. – Mehdi Dehghani Sep 17 '18 at 05:23

What is the best solution for scrollWidth problem?

1 Answers1