Is there a way to measure the offset of the window in jQuery, in order than I might compare the positions of a 'fixed' element and a relatively positioned one?
I need to be able to tell how far the window is scrolled so I can use the figure to calculate the difference between the height of the fixed element (which is relative to the viewport top) and the relative object (which is relative to the top of the document)
$(window).scrollTop() and $(window).scrollLeft() can be used to find scroll positions.
Using plain Javascript without jQuery should be window.pageXOffset and window.pageYOffset, which return the number of pixels offset by scrolling.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
document.body.offsetWidth;
and
document.body.offsetHeight;
By using these javascript functions you can get actual width and height of the browser window
Related
To check if a rectangular element is fully inside the window viewport, I can do this:
// NOTE: Only vertical checks shown. Remember that y increases while going down the page.
if (top > window.scrollY && bottom < document.documentElement.clientHeight + window.scrollY)
However, there are websites where all elements have absolute positions (!!) (example). In those cases, document.documentElement.clientHeight is 0 and the check will fail (UPDATE: apparently the value being 0 happens on Firefox but not Chrome or Edge).
I'm trying to solve this by using window.innerHeight instead for these cases, but it includes the horizontal scroll bar height.
I don't want to assume a fixed pixel height for the scroll bar, nor to create temporary HTML elements for calculations, and I'm not using jQuery. I've seen code calculating the scroll bar height with offsetHeight - clientHeight but that won't work here since both are 0.
What are my options? This feels like an extremely duplicate question but fact is that I couldn't find an answer. Thanks.
Instead of document.documentElement.clientHeight, use document.body.clientHeight, it should work on both Firefox and Chrome.
More explanation on the difference between the two are here: difference between document.documentElement.clientHeight and document.body.clientHeight
I'd like to have an element follow the user down the page, like a fixed position div, however this is not possible with the foundation Off Canvas Menu.
Is there a way to capture the distance that the page has scrolled in pixels and output it as the margin-top: style on a specific div?
Use window.scrollY to get the scrolled distance, then you could use jQuery:
$("#myElement").css("margin-top", window.scrollY);
or use plain JavaScript
document.getElementById("myElement").style.marginTop = window.scrollY;
How can I possibly change Javascript's origin? For example, if I were to call offsetTop on a div, it's really tell me how far it is from the origin. Javascript's origin is at the top left of the page, but how can I move that?
I want to make it at the bottom left.
Your information about offsetTop is incorrect. From MDC:
offsetTop returns the distance of the current element relative to the top of the offsetParent node.
You cannot "move" the origin in the way you are thinking, though you could use a bit of math to compute the distance from the element's top edge to the bottom of the screen/page. Using jQuery (for clarity, so the code isn't mucked up with cross-browser feature detection):
var $doc = $(document),
docHeight = $doc.height(),
$elt = $('#some-element-id'),
top = $elt.offset().top,
// this is the value you're interested in
originShiftedTop = docHeight - top;
Demo. Try re-running the fiddle with different Result pane heights.
Note that jQuery's .offset() returns the position of the element relative to the document, unlike element.offsetTop the DOM-standard property. jQuery's .position() function behaves like element.offsetTop.
I tried to get the window viewport width. when i use document.documentElement.clientHeight(or)window.innerWidth i can get exactly what i need. If i logged In at minimize mode,then if i maximize the window the viewport width will not be resized.I got the viewport width when it is minimized. how can i slove it?
I also tried to use document.body.clientHeight.But here also i got problem.The viewport size is larger than my viewport,because of statusbar.Then i subtract the statusbar size,then i got the viewport size.If i have anotherbar in my window again i got the same problem.
Exactly what i need is how can get the end user viewport size?Please help me?
Thanks in advance
from the jQuery docs:
http://api.jquery.com/height/
http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(window).height(); // returns height of browser viewport
Try:
$myviewport.getHeight();
$myviewport.getWidth();
Where myviewport is the viewport OBJECT. You can also use:
Ext.getCmp('myviewport').getHeight();
Ext.getCmp('myviewport').getWidth();
Where 'myviewport' is the ID of the viewport object.
Use
.getHeight(true);
.getWidth(true);
To get the height/width minus padding, margins, borders etc.
As a consequence of the proliferation of different browsers' ideas about this, it's a surprisingly tricky thing to get right. David Mark (author of My Library) is particularly strong in this area and has written an article on the subject: http://www.cinsoft.net/viewport.asp
I'm unable to get the height of a page in javascript when the page is larger than the screen.
I thought this would get me the right height:
$(document).height();
but that only gets the height of the screen, same as:
$('body').height();
same as:
document.offsetHeight;
For some reason all these examples only return the height of the screen. Can somebody help?
Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.
To clarify the usage of the height() method:
$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
I suspect, that if $(document).height() is not working for you, something is wrong. You may be:
Calling it too early. Like, before the DOM is ready
Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
If you're cool with using jQuery, what about getting the body or html height? like:
var winHeight = $('body').height();
I was looking for this and landed up here. Without Jquery, you can get this with plain JS also. Below works:
console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)
Do note the below link to clarify which to use:
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
I think you need to add window.pageYOffset (the amount the page has been scrolled, in pixels).
http://www.quirksmode.org/dom/w3c_cssom.html
Not sure about JQuery. But this link, might help you to understand various properties and how they behave in different modes in different browsers.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html