This code makes this scroll indicator.
Can you please help me figure out how do the variable scrolled is calculated here?
Please explain why clientHeight is subtracted from scrollHeight and winScroll variable is divided by height then multiplied by 100?
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction()
};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
<div class="header">
<h2>Scroll Indicator</h2>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class="content">
<h3>Scroll Down to See The Effect</h3>
<p>100 text line</p>
</div>
The clientHeight returns the height of the enclosing div. clientHeight reference
The scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow. scrollHeight reference
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. scrollTop reference
Subtracting the clientHeight form scrollHeight provides the maximum scrollTop value that can be obtained. When the scroll reaches the bottom of the page, the scrollTop value becomes equal to that of the height.
The division with height and multiplication with 100 is to obtain the percent of scroll.
Related
I am having parent with fixed height (400px) and child div height more than parent div height (400px - child div's top value) should be based on below conditions.
Parent div height - child div's top position value (Eg: 40px in this scenario)
So, Finally Child div height should be 360px (400px - child div's top value of -40px)
HTML:
<div class="parent">
<div class="child">
Parent Height: <span id="parentHeight"></span><br>
Distance from top: <span id="distanceFromTop"></span><br>
Child Height: <span id="childHeight"></span><br>
</div>
</div>
Script:
var __parentHeight = $('.parent').height();
var __distanceFromTop = $('.parent').offset().top - $('.child').offset().top;
var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop);
$('#parentHeight').html(__parentHeight + 'px');
$('#distanceFromTop').html(__distanceFromTop + 'px');
$('#childHeight').html(__finalHeight + 'px');
$('.child').css('height', __finalHeight + 'px');
jsFiddle
Expected:
What I am getting is:
Update your final height calculation like that => var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop);
I want to know how many pixels from the top a user has scrolled down my page. So , the number of pixels ABOVE that can't be seen PLUS the number of pixels viewable in the current viewport.
With Jquery I'm using $(window).scrollTop() which is showing 612 pixels once scrolled to bottom of page, but $(document).height() reports a total height of 1276 pixels.
When I reach the bottom of the page the number I'm wanting to know will be 1276.
Hope that makes sense.
It sounds like what you're trying to get is the bottom of the window's current Y offset.
This can be calculated by summing the window's scrollTop() and innerHeight:
$(window).scrollTop() + window.innerHeight
$(window).scroll(function() {
$("#scrollTop").text($(window).scrollTop() + window.innerHeight);
$("#docHeight").text($(document).height());
}).scroll();
body {height: 2500px;}
div {position: fixed; top: 0; left: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>scrollTop:</span> <span id="scrollTop"></span>
<br>
<span>document Height:</span> <span id="docHeight"></span>
</div>
To calculate how much the user has scrolled the page vertically in terms of pixels from the very top, in JavaScript, we would probe either window.pageYOffset, or in older versions of IE, one of several variants of document.body.scrollTop, whichever property is supported:
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
Using jQuery instead, the equivalent would be:
var scrollTop = $(window).scrollTop()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div style="height:1000px"></div>
<p id="output" style="position:fixed; left:0; top:0; padding:10px; font-weight:bold">
You have scrolled the page by:
</p>
<script>
var output = document.getElementById('output')
window.addEventListener("scroll", function(){
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
output.innerHTML = 'You have scrolled the page by: ' + scrollTop +'px'
}, false)
</script>
<script>
/* ### jQuery version below. Uncomment to see: ### */
/*
var $output = $('#output')
$(window).on('scroll', function(){
var scrollTop = $(window).scrollTop()
$output.html( 'You have scrolled the page by: ' + scrollTop +'px' )
})
*/
</script>
</body>
I have the following structure:
<div id="start">
<div id="largediv">
<div id="ball"></div>
</div>
</div>
The div start has for example fixed height and width like 500px x 500px
and the div largediv has 1000px x 1000px. I can move the ball in the 500x500px area but I don't know how to scroll so I can change the position in the largediv. Another thing is that the start div has overflow hidden.
Here is the jsfiddle
http://jsfiddle.net/zander_pope/xd4fb1nz/
You can use jQuery mousewheel function.
$("#start").on("mousewheel", function(e){
var scrollTop = $(this).scrollTop(),
scrollLeft = $(this).scrollLeft();
$(this).scrollTop(scrollTop+(e.originalEvent.deltaY));
$(this).scrollLeft(scrollLeft+(e.originalEvent.deltaX));
return false;
})
Jsfiddle
I want to implement a technique called scrollable div in GWT. What I am trying to do is the following.
If a user is on my page he can only see the viewport (green box in the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image).
If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.
The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.
How do I have to implement this with GWT?
If the user loads the page it looks like the following image:
The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left.
When the viewport moves new content should be loaded with ajax.
The viewport can also be zoomed in. In this case also new content should be loaded.
The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.
UPD:
jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD:
jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
Answer based on this example: Indira.js Inifinite Scroll
<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')">
<table>
...
<tbody id="scrollable_tbody">
<tr>
...
</tr>
</tbody>
<button id="load_button" onclick="load_more(page_number)">Show more</button>
</div>
<script>
var scroll_el_id = 'scrollableDiv';
var element = $('#scrollableDiv');
$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
if(scrollBottom >= elementBottom){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
});
</script>
Next you just append to #scrollable_tbody AJAX-response, like:
function load_more(page){
$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,})
.done(function( html ) {
$('#scrollable_tbody').append(html);
});
}
UPD:
I think you should set big size for html,body like:
html, body{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
And set viewport in size you want.
But maybe it will more easier if you will set some wrap div right after body tag with
div.wrap{
overflow: scroll;
-webkit-overflow-scrolling: touch;
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/
max-height: your_viewport_height;
min-height:your_viewport_height;
height:your_viewport_height;
max-width: your_viewport_width;
min-height:your_viewport_width;
height:your_viewport_width;
}
and inside of this element Bigger div which will be scrollable.
div.huge{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
HTML:
<html>
<head>
...
</head>
<body>
<div class="wrap">
<div class="huge">
...
</div>
</div>
</body>
</html>
Also do not forget to set scrolling control for all sides of elements, in example I have only Bottom line control, something like:
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
var scrollTop = $(window).scrollTop();
var elementTop = element.offset().top;
var scrollRight = $(window).scrollLeft() + $(window).width();
var elementRight = element[0].scrollWidth - element.offset().left;
var scrollLeft = $(window).scrollLeft();
var elementLeft = element.offset().left;
if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
I didn't test this, and anyways you will have to play around with this. Hope I'm point you into right direction.
My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.
How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.
You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).
$('#rightDiv').height($(window).height());
if you want to height of your entire document use:
$('#rightDiv').height($(document).height());
$(window).height() will retrun available browser window height.
$(document).height() will retrun document height.
or you can make a comparison:
var doc = $(document);
var win = $(window);
var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);
You have min-height, for animate height you can try:
$('#rightDiv').animate( { height : maxHeight}, <duration>);
<duration> is optional, you can provide here 'slow', 'fast', miliseconds
Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.
<div id="outer">
<div id="left">This is some text.</div>
<div id="right">This is some text.</div>
</div>
The corresponding CSS would look like this:
div#outer {
display:table-row; }
div#outer > div {
display:table-cell; }
div#left {
border-right:1px solid red; }
I am not sure about the compatibility with old browsers...