The Linux Page
Home

My JavaScript code does not get the correct widget size, why?

Submitted by on Mon, 03/17/2014 - 14:07

As I am developing a set of pages for a customer, I ran in an intersting problem: my JavaScript function could not properly define the sizes of a box.

That box is heavily tweaked with the CSS assigned to it, as well as all of its neighbors. So I thought that may have something to do with it.

What I hadn't realized so far is that the ready() function of jQuery() is called once the script that includes it is ready (as in loaded) and not once the document as a whole is ready (done loading, i.e. onload event.)

With that knowledge it was easy to understand that I was actually finding myself with the CSS file in the wrong location, namely, after the JavaScript that was attempting to position a division at the right place and instead was moving it in a completely wrong location because at the point of execution all the page dimensions were still wrong.

So... to do things properly, you want to create a <head> tag with:

1. All your meta data (description, images, etc.)

2. All your CSS links and <style> tags

3. All your JavaScripts

That way you are much less likely to run into problems.