I am creating a web page in which when user hovers on an image it displays a paragraph which is enclosed in a division under it. When the user moves the cursur out of the image the division disappears.
My problem is that when the user clicks the image which is in the bottom of the screen.. i want the page to be scrolled using javascript until the division at the bottom is visible...
I want to know how to do this one. Which function to use??
Thanks in Advance..
Basically you will need to calculate height of your browser window.... then also know the height of your image and it's offset (i.e. where it is placed)...
doing some maths you will get the additional page scroll you want to have...
simply do it...
Here are some functions for you:
in Internet Explorer (backward-compatibility mode):
document.body.offsetWidth, document.body.offsetHeight
in Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
document.documentElement.offsetWidth, document.documentElement.offsetHeight
in most other browsers – as well as IE9 (standards mode):
window.innerWidth, window.innerHeight (the page's visible width/height)
window.outerWidth, window.outerHeight (the browser outer width/height)
take directly from here: http://www.javascripter.net/faq/browserw.htm
you can check more specific examples here on how to calculate required parameters.
Related
I am developing browser games that have only one full-size canvas element in body.
When run these games in iOS9.2(iPad) Chrome(Ver 47.0.2526.107), the bottom area of game screen is not shown. (It didn't happen several months ago. Even now this neither happen in Safari, nor Android 5.0.2 Chrome 47.0.2526.83)
These game programs first calculate size of window (the area showing html document when address bar is shown), and places a canvas element having the size.
Since some version of Chrome, the "size of window" is interpreted as the size of window when address bar is NOT shown.
I tried to get the height of window by:
screen.availHeight
window.innerHeight
$(window).height()
document.documentElement.clientHeight
document.height
$(document).height()
but they all returns the same value, the height when address bar is NOT shown.
Test code is shown in http://jsrun.it/hoge1e4/4Ygq I want to know the value of the scale at bottom of the screen when address bar is shown.
(see picture)
The problem seems to be solved by version-up.
I checked it on ver.49.0.2623.73
I'm sure this is the working as intended, but I find it kind of a pain.
In Chrome (and probably other browsers)
Generally, window.innerHeight gives me 801 (for example).
If I have a console open along the bottom half of my screen (going horizontally), this changes my window.innerHeight. If I've downloaded something, this pops up a bar at the bottom of the window and also changes window.innerHeight.
I don't having the dev tools open to make my site feel broken.
Is there a different measurement to use in javascript to ignore UI?
I don't want outerWidth, because this includes window tab heights and they won't be consistent cross browser.
I essentially want the height to be consistent whether or not there are any chrome ui elements present.
I don't think you can get exactly that number! The closest you can get is calculating the available height, minus os taskbar and such by using:
window.screen.availHeight
Which MDN says:
Returns the amount of vertical space available to the window on the
screen.
I made a jsfiddle to try it in here
MDN availHeight article
Page scrolling using the keyboard (PgUp/PgDown, Space) sometimes gets difficult if there are elements with fixed positions at the top of the page, e.g. navigation bars: content that was not visible at the bottom of the viewport might be hidden by the fixed elements after scrolling.
How to address this problem? Do browsers calculate, how far they should scroll? I observed different behaviors for different browsers and also for the same browsers on different pages (for example, Firefox leaves about 80px of old content on http://www.sueddeutsche.de/, but far less on http://www.taz.de. Chromium leaves much more content.).
Is this a problem at all, i.e. does anybody beside me use the keyboard to scroll a web page? Do you know any statistics?
To illustrate the problem, I created a Fiddle:
https://jsfiddle.net/x7hj8c4m/
Try to scroll the content using Space on Firefox. The fixed element will cover text that was not yet visible before scrolling. If you add left: 0, it works.
Very interesting observation.
Firstly, pressing space is equivalent to pressing PgDn. And when PgDn is pressed, the page should scroll vertically by roughly "one page's worth of px". As shown by the OP's fiddle, Firefox in particular calculates this value differently, depending on whether it detects a fixed header.
From my own tests on IE, Chrome, Firefox, I deduced that:
Without a position: fixed element, Chrome and IE scroll down by ~87.5% of the document height; Firefox scrolls down by document height - scrollbar height - ~20px.
With a position: fixed; width: 100% element at the top-left of the screen, Firefox intelligently understands that the element perceptually reduces the document height, and so applies: document height - scrollbar height - fixed element height - ~20px. The condition appears to be quite specific: the element must be fixed exactly at the top-left of the document's box model with full width in order for it to work. The other browsers (Chrome, IE) don't perform such compensation, and performs the standard 87.5% scroll.
I don't know if this is relevant, but it might have something to do with support for position: sticky.
Scrolling by keyboard is a pretty basic behaviour that probably doesn't interact too much (if at all) with the DOM, so expecting it to account for fixed elements is probably too much. There seem to be browser-specific predefined increments (I have no idea if or how they can be customized), but note that the increments are usually smaller (presumably small enough) when you use the up/down arrow keys.
I want to measure the height of the visible content area (that means - the top side of it is located where I start to see the site's content and that it ends where I have the windows or mac task panel) in Javascript somehow. It varies from browser to browser and whether I have other panels in the browser then it changes its size.
How can I get this data?
Here are a few useful Javascript (not jQuery) tools you can use to find this:
document.body.offsetWidth
document.body.offsetHeight
These find the Width and Height of the body element (so unless you've done something strange to the body element, then this should work).
You also have:
window.innerWidth
window.innerHeight
These would give you the width of the browser viewport, like antimatterfish said.
Do you mean $(window).height(); and $(window).width(); ? "window" measures the browser viewport...
I'm working on a Chromium extension that runs a context script on a constrained window, and want to increase the window height by one pixel (I need the page to reposition, since I'm injecting HTML into it).
I'm attempting to use the following code:
window.resizeTo(window.innerWidth, window.innerHeight + 1);
but this shrinks the window (I suspect because Chromium resizeTo sets window size, but innerWidth and innerHeight gets the size of the TabContents window pane (not including the top bar and border).
How can I either get the proper size or properly resize the window? Thanks for any advice.
You actually want window.outerHeight/window.outerWidth, which includes all of the browser UI.