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

Answer 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:

1. Put your script tag on bottom of the page ( just before </body> )
2. 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?