Currently, I am conducting a jQuery experiment where a div with the ID "mask" needs to be positioned in the center of the page. I have attempted two methods:
Using jQuery:
$("#mask").height()
And using native JavaScript:
var mask = document.getElementById("mask");
var ht_mask = getComputedStyle(mask).getPropertyValue("height");
var ht_mask_num = Number(ht_mask.slice(0,ht_mask.length - 2));
Interestingly, both methods return different values when logged in the console on Firefox and Chrome browsers. You can view my experiment on JSFiddle: http://jsfiddle.net/avi_sagi/3RAEE/embedded/result/ or on my website (which sometimes works well): .
It seems that while the positioning works for some users, others experience issues when reloading multiple times. Upon inspecting the Chrome network tab, I noticed that jQuery does not load consistently even though I use Google CDN, which is generally reliable. While this may not be the sole reason for the misplacement issue, it could contribute to the problem.
For your information, I utilize "meyer reset css" and "jquery 1.11.0." This is one particular problem I have identified, but there may be other factors at play contributing to the positioning problem.