I'm trying to detect the position of the browser's scrollbar with JavaScript to decide where in the page the current view is.
My guess is that I have to detect where the thumb on the track is, and then the height of the thumb as a percentage of the total height of the track. Am I over-complicating it, or does JavaScript offer an easier solution than that? What would some code look like?
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.
I did this for a <div> on Chrome.
element.scrollTop - is the pixels hidden in top due to the scroll. With no scroll its value is 0.
element.scrollHeight - is the pixels of the whole div.
element.clientHeight - is the pixels that you see in your browser.
var a = element.scrollTop;
will be the position.
var b = element.scrollHeight - element.clientHeight;
will be the maximum value for scrollTop.
var c = a / b;
will be the percent of scroll [from 0 to 1].
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
returns an array with two integers- [scrollLeft, scrollTop]
It's like this :)
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
Answer for 2018:
The best way to do things like that is to use the Intersection Observer API.
The Intersection Observer API provides a way to asynchronously observe
changes in the intersection of a target element with an ancestor
element or with a top-level document's viewport.
Historically, detecting visibility of an element, or the relative
visibility of two elements in relation to each other, has been a
difficult task for which solutions have been unreliable and prone to
causing the browser and the sites the user is accessing to become
sluggish. Unfortunately, as the web has matured, the need for this
kind of information has grown. Intersection information is needed for
many reasons, such as:
Lazy-loading of images or other content as a page is scrolled.
Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't
have to flip through pages.
Reporting of visibility of advertisements in order to calculate ad revenues.
Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.
Implementing intersection detection in the past involved event
handlers and loops calling methods like
Element.getBoundingClientRect() to build up the needed information for
every element affected. Since all this code runs on the main thread,
even one of these can cause performance problems. When a site is
loaded with these tests, things can get downright ugly.
See the following code example:
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#listItem');
observer.observe(target);
Most modern browsers support the IntersectionObserver, but you should use the polyfill for backward-compatibility.
If you care for the whole page, you can use this:
document.body.getBoundingClientRect().top
Snippets
The read-only scrollY property of the Window interface returns the
number of pixels that the document is currently scrolled vertically.
window.addEventListener('scroll', function(){console.log(this.scrollY)})
html{height:5000px}
Shorter version using anonymous arrow function (ES6) and avoiding the use of this
window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}
Here is the other way to get the scroll position:
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
If you are using jQuery there is a perfect function for you: .scrollTop()
doc here -> http://api.jquery.com/scrollTop/
note: you can use this function to retrieve OR set the position.
see also: http://api.jquery.com/?s=scroll
I think the following function can help to have scroll coordinate values:
const getScrollCoordinate = (el = window) => ({
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop,
});
I got this idea from this answer with a little change.
I would like to hide an html Element (in my case a headline) only when the dynamic content of the site expands so far vertically that a scrollbar would appear. I am aware how to hide an element but I don't know how to trigger the event. I am searching for something like the #media rule in css, only that it shouldn't be triggered on the viewport resolution, but the size of the content (vertically).
Does anyone know a solution to this?
Thanks in advance!
Thanks to Nicks comment I figured out a solution.
If anyone is looking for the same thing, here is a working Javascript solution (no JQuery needed):
var callback = function(){
// Handler when the DOM is fully loaded
// Check if the body height is bigger than the clients viewport
if (document.body.scrollHeight > document.body.clientHeight) {
// Assign a class with display:none (in my case 'hide')
document.getElementById("headline").className = 'hide';
}
};
// This part ensures that the script will be loaded once the site is loaded
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
With help by https://www.sitepoint.com/jquery-document-ready-plain-javascript/
I have an iFrame in my jsp page where in page load it should have height and width as 600 and 400 respectively. This iFrame contains some page having some forms in it, once the form is filled and submitted, it will redirected to a thank you page. At that time I need the height of the iFrame as 200(because the page contents are less and I need to reduce the white space in it). how to achieve this? I get n number of links in stack exchange itself but nothing is useful in this case.
Is there any way to check if the iFrame src url is changed? If so I can make a condition and do the below code to reduce the height.
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "200";
iFrameID.width = "400";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
iFrameID.width = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
The above function is working fine if i give it in iFrame page load but I need to set this only when I get the thank you page inside iFrame.
Request to kindly help on this.
you can use something like cookie.js (https://github.com/js-cookie/js-cookie) for creating a helper cookie for each step in your iframe.
(function($) {
$( '#submit-button').on( "click", function() {
Cookies.set('isSubmitted', true);
});
})(jQuery);
Now you can check if the cookie is set and resize the iframe
(function($) {
if(Cookies.get('isSubmitted') === true) {
$('#iFrameID').height(200);
}
})(jQuery);
After this you can delete this cookie
Cookies.remove('isSubmitted');
You can do iFrame url change check in the parent page like this:
function check(){
$('#idIframe').load(function() {
console.log("the iframe has changed");
});
};
$("#idIframe").on("mouseenter",function(){
window.setInterval(check, 100); // 100 ms
});
I know this get's asked a lot, but how do I set the dynamic height of a cross domain iframe, when I don't have access to the actual page the IFRAME is showing?
You can't. There is no way to know what the height of the document in the frame is from outside the frame because all information about the document is protected from third party sites.
If you have access to add javascript on both parent and iframe page you can add this to both:
document.domain = 'mydomain.com';
This way you avoid the cross-domain restrictions, and can sniff the hight to change iframe height in parent page
have to proxy the page though your own server (at least one time)
<?php
$homepage = file_get_contents('http://www.megaupload.com');
echo $homepage;
?>
<script>etc</script>
I was having this issue too but I finally got a solution:
Put this code inside the <head>:
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 0; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
};
</script>
Then, use this code for the iframe:
<iframe src='http://www.example.com/my-iframe/' frameborder="0" id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://www.example.com');">
I have a jqGrid at my web page. I have a resizing problem. When I restore down my web page, all the elements at my page resizes automatically however my jqGrid table doesn't. Actually I have edited my table's width as follows:
...
width:1000,
...
I want it has a minimum width but have a automatic resizing when I restore down (get more smaller) my web page.
How can I do that?
EDIT:
I tried thatbut I am not sure is this the right way:
confTable is my jqGrid id and content is the parent element's id of it.
$("#confTable").jqGrid('gridResize', { minWidth: 800, minHeight: 100 });
$(window).bind('resize', function() {
var gridWidth = $("#confTable").width();
var contentWidth = $("#content").width();
if (gridWidth > 0 &&
Math.abs(gridWidth - contentWidth) > 5) {
$("#confTable").jqGrid('setGridWidth', contentWidth);
}
}).trigger('resize');
I wanted to implement the solution here described. However setgridWidht and the lines of .attr() didn't work. Is my code browser compatible and what is the wrong can be while I was trying the implement the solution of that question?
PS:
It says: $("#confTable").setGridWidth is not a function. Actually I need to resize my jqGrid according to its parent's parent.
Here is a simple example you could try:
$(window).resize(function(){
$("#confTable").setGridWidth($(this).width() * .95);
});