Menu
I'm creating dynamic posisition of tooltip, I have tested code on jsfiddle first before put my code to my site (build with wordpress on localhost), on jsfiddle my script is works but when I put code to my site, It's not works (not dynamically on chrome) because different result of $(window).height(). You can check this fiddle and try to mouse enter to a link (first link) and then see log at console, the result of window height is wh :667 but on my site window height is wh :12024 and wh : 11970 (changeable)
jQuery(document).ready(function ($) {
$('a[rel="bookmark"]').mouseenter(function () {
console.log($(window).height());
})
});
also using this
jQuery(function($){
$(window).ready(function(){
console.log($(window).height());
});
$(window).on('resize', function(){
console.log($(window).height());
});
});
Google Chrome
jsfiddle : 667
my site (wordpress) : 12024 - changeable
Mozilla
jsfiddle : 602
my site : 585
I'm sure, I have added strict doctype.
I found this explanation
$(window).height()is the height of the viewport that shows the website. (excluding your toolbars and status bar and stuff like this)
$(document).height()is the height of your document shown in the viewport. If it is higher than$(window).height()you get the scrollbars to scroll the document
I think on my site result $(window).height() is scrollbars to scroll the document on chrome (fyi my site have a long page). If it is like that, how can I get height of the viewport on my site, is there another way to get same result (actual) height of the viewport every browser (chrome, mozilla, opera etc) ?
note : I don't think for use screen.height because it can result display of screen (include toolbar of browser)
739
Basically, $(window). height() give you the maximum height inside of the browser window (viewport), and $(document). height() gives you the height of the document inside of the browser.
height() method is recommended when an element's height needs to be used in a mathematical calculation. This method is also able to find the height of the window and document. $( document ). height();
innerHeight. The read-only innerHeight property of the Window interface returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present. The value of innerHeight is taken from the height of the window's layout viewport.
It took me hours/days to debug this baby, but I finally got it. Believe or not, but I haven't had such bug for YEARS!! What a nasty bug.
I am not saying you had the exact problem, however, this thread is exactly what I was facing. I was 100% sure that my html is set to strict.
However, as soon as I did "Inspect element" in Chrome, the actual definition of strict DOCTYPE was gone. So I checked other websites, and I immediately realized that there is something extremly fishy going on, this shouldn't be happening. Who ate my strict doctype?
Not only that, but I noticed that the contents of HEAD moved to <body> and other weird things were happening.
I did what any reasonable human would do, I speculated that all my time was wasted on this stupid UTF-8 BOM, as I've had many problems with that in the past. Oh boy was I correct.
Everything started to work flawlessly, after I've switched to UTF-8 without bom. Notice that the interesting thing is: my website seemed to work 100%, even with messed up HTML(I never noticed that browser interpreted it way incorrectly).
Why was my file encoded as UTF-8 with bom at first place & why should it even affect browser? I have no idea.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
