5

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)

Community
  • 1
  • 1
user3612645
  • 227
  • 4
  • 11

2 Answers2

7

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.

Erti-Chris Eelmaa
  • 22,879
  • 5
  • 54
  • 76
  • Unproperly formatted HTML was also problem for me. Chrome does wierd things when it gets non-nice html file. – Matej Kormuth Jul 12 '15 at 00:10
  • So I didn't have the BOM issue, but I wasn't using a strict DOCTYPE and hadn't noticed. I certainly would never have tied this behavior to the doctype so thanks a million! – Planky Jul 21 '15 at 01:26
3

Ok, I got it. I'm using pure javascript

replace $(window).height() with window.innerHeight

$(window).load(function(){
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    console.log(y);
});

Chrome :

jsfiddle : 667

my site : 667

Mozilla

jsfiddle : 602

my site :602

https://stackoverflow.com/a/11744120/1297435

kris
  • 9,422
  • 6
  • 66
  • 90
user3612645
  • 227
  • 4
  • 11