A site for solving at least some of your technical problems...
My JavaScript code does not get the correct widget size, why?
Submitted by Alexis Wilke 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.