Develop Reference

Dynamic bottom value based on element position in browser

I am attempting to adapt this JS solution to keep a floating element above the footer of my site.
The adaption I am attempting is instead of changing the element position to absolute, I would have a dynamic bottom px value based on the position of the top of the footer, relevant to the client window.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(onlineFloat) + document.body.scrollTop) + onlineFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 20)
var newBottom = ((getRectTop(footer) + document.body.scrollTop) - 40).toString().concat('px');
onlineFloat.style.bottom = newBottom;
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
onlineFloat.style.bottom = '20px';// restore when you scroll up
}
document.addEventListener("scroll", function(){
checkOffset();
});
The output of newBottom is currently a px value which changes on scroll, however, I am having issues setting this position to the element.
Where am I going wrong? Thanks.

With your approach (changing the bottom property), you can just calculate where the "float" should be if the footer's top position is in view (as in window.innerHeight) on scroll.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
var newBottom = 10 + (getRectTop(footer) < window.innerHeight ? window.innerHeight - getRectTop(footer) : 0) + 'px';
onlineFloat.style.bottom = newBottom;
}
document.addEventListener("scroll", function () {
checkOffset();
});

If bottom of div is visible jquery

Please help me out here, if bottom of div or full div is visible then i want to scroll to down of next div. Here the code i have tried out,
Mathematically,
var top = $("#myDiv").offset().top;
//top = 1863
var divHeight = $("#myDiv").height();
//divHeight = 571
var total = top + divHeight;
//total = 2434
if($('#myDiv').css('height',total).visible(true))
{
alert('hi');
// I need to alert only if the full div is visible not some part of div
}
else
{
//if height of myDiv is larger window height (my screen height 640 pixels)
}
If all this part of html(from top to divHeight) or bottom of page(here total value) is visible then i need to scroll to next div.
Please note :- the code inside if conditional statement is not correct, i think you got some idea from that.

Given element the jQuery object you want to check, element is fully visible if it is shown and all of the 4 sides of its layout box fall within the window viewport.
Caution: the following solution assumes that there are no element with scrollable overflow between element and the document root, otherwise the calculation becomes way more complicated.
function isFullyVisible(element) {
var offset = element.offset();
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
return element.is(":visible") && // shown
offset.top >= scrollTop && // top
offset.left >= scrollLeft && // left
offset.top + element.outerHeight() <= scrollTop + $(window).height() && // bottom
offset.left + element.outerWidth() <= scrollLeft + $(window).width(); // right
}
If you don't care of sides, you can keep only the corresponding sub-expression.

Go to a specific anchor after page resizes (height change only)

I have a one-page website with several anchors (signifying div positions). After the page is resized (change in height only), I want to refresh the page. Then I want to scroll to the anchor the page was previously at, making the window.top position equal to the anchor position. I have javascript for the resize and refresh portion of this (below), but I'm at a loss regarding the scroll portion. Any ideas? How would I check which div the page was on before resizing? "#markerAbout" is one of the anchors.
var height = $(window).height();
var resizeTimer;
$(window).resize(function(){
if($(this).height() != height){
height = $(this).height();
window.location.reload();
//$(window).scrollTop()=$('#markerAbout').offset().top;
}
});

You can find out which of your elements are currently visible on the view port by following the advice in this question:
How to tell if a DOM element is visible in the current viewport?
You will have to do this on each element in the order you expect them to appear until you find one that is visible. That should be the current element at the top of the viewport.
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
Once you know which of your divs are showing and which are not, you can choose which one you want to scroll too.
Once you know which div to scroll to for example Div1, you can call scrollIntoView() on that element.
Div1.scrollIntoView();

Since you refresh the page, setting a variable is out of the table. My suggestion is to reload the page with a reference of the anchor as hash at the end plus add a function which is fired first thing after page load that check if there's a hash in the url and if so scrolls the page to the anchor wrote in the hash. I added also a function that starts the reloading process after the end of the resizing process only and also another one that iterates through all the anchors (you have to add a class="anchors" to each anchor) and defines which is the one visible.
That's the code, hope it helps:
$(document).ready(function(){
if(window.location.hash){
//Scroll to $(window.location.hash)
}
var height = $(window).height();
var resizeTimer;
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
if($(this).height() != height){
height = $(this).height();
anchor = false;
$('.anchors').each(function(){
if($(this).isOnScreen()){
anchor = $(this).attr('id')
return
}
});
window.location.href = window.location.href + anchor;
window.location.reload(true);
}
});});

Get height of non-overflowed portion of div

Say I have a wrapper div with a overflow:hidden on it and a div inside that that spans far below the visible portion. How can I get the visible height of the internal div?
<div id="wrapper" style="overflow: hidden; height:400px;">
<div id="inner">
<!--Lots of content in here-->
</div>
<div>
Every method I try attempting to get the height of the inner div returns the complete height including the hidden parts, i.e. 2000px. I want to be able to get the height of only the visible portion, so 400px in this example case.
I know I could just get the height of the parentNode, but in production, the inner div might not be a first child. So there might be other divs separating them, and so the height of #inner would be 400 - whatever the offsets of the elements between it and #wrapper.

As basic algorithm this could work:
var offset = 0;
var node = document.getElementById("inner");
while (node.offsetParent && node.offsetParent.id != "wrapper")
{
offset += node.offsetTop;
node = node.offsetParent;
}
var visible = node.offsetHeight - offset;
But if you're doing these kinds of things, maybe you already use jQuery, which might be of service with its .height() and .offset() functions:
$("#wrapper").height()-
$("#inner").offset()['top']+
$("#wrapper").offset()['top'];

Quick algorithm that goes up the DOM tree looking at window.getComputedStyle for overflow: hidden
function visibleArea(node){
var o = {height: node.offsetHeight, width: node.offsetWidth}, // size
d = {y: (node.offsetTop || 0), x: (node.offsetLeft || 0), node: node.offsetParent}, // position
css, y, x;
while( null !== (node = node.parentNode) ){ // loop up through DOM
css = window.getComputedStyle(node);
if( css && css.overflow === 'hidden' ){ // if has style && overflow
y = node.offsetHeight - d.y; // calculate visible y
x = node.offsetWidth - d.x; // and x
if( node !== d.node ){
y = y + (node.offsetTop || 0); // using || 0 in case it doesn't have an offsetParent
x = x + (node.offsetLeft || 0);
}
if( y < o.height ) {
if( y < 0 ) o.height = 0;
else o.height = y;
}
if( x < o.width ) {
if( x < 0 ) o.width = 0;
else o.width = x;
}
return o; // return (modify if you want to loop up again)
}
if( node === d.node ){ // update offsets
d.y = d.y + (node.offsetTop || 0);
d.x = d.x + (node.offsetLeft || 0);
d.node = node.offsetParent;
}
}
return o; // return if no hidden
}
example fiddle (look at your console).

The only way I've found to do this in every circumstance, including when there's overflow, transform: translate()s are used, and there are other nested containers in between an element and the element that's hiding its overflow is to combine .getBoundingClientRect() with a reference to the ancestor that's hiding the element's overflow:
function getVisibleDimensions(node, referenceNode) {
referenceNode = referenceNode || node.parentNode;
var pos = node.getBoundingClientRect();
var referencePos = referenceNode.getBoundingClientRect();
return {
"width": Math.min(
node.clientWidth,
referencePos.left + referenceNode.clientWidth - pos.left,
node.clientWidth - (referencePos.left - pos.left)
),
"height": Math.min(
node.clientHeight,
referencePos.top + referenceNode.clientHeight - pos.top,
node.clientHeight - (referencePos.top - pos.top)
)
}
}
Demo.
If a reference node is not given, the parent node is assumed: Demo.
Note that this doesn't take into account whether or not an element is viewable in the viewport, just visible (not hidden due to overflow). If you need both, you can combine functionality with this answer. It also has no check of visibility: hidden, so if you need that you need to check the style.visibility property of the node and all its ancestors.

I think keeping a sibling next to it, calculating its scrollTop and the overflow element scrollTop and then subtracting it from the siblings scroolTop might work

The code below computes the visible portion of an element. By visible portion I mean the part that is visible in the window, but I think you can easily alter it to base the computation on an arbitrary container element.
function computeVisibleHeight ($t) {
var top = $t.position().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var height = $t.height();
if (top < scrollTop && height - scrollTop >= windowHeight) {
// first case: the top and the bottom of the element is outside of the window
return windowHeight;
} else if (top < scrollTop) {
// second: the top is outside of the viewport but the bottom is visible
return height - (scrollTop - top);
} else if (top > scrollTop && top + height < windowHeight) {
// the whole element is visible
return height;
} else {
// the top is visible but the bottom is outside of the viewport
return windowHeight - (top - scrollTop);
}
}
The code is using jquery.

Deferred loading of page content using JavaScript or jQuery

I have seen a few websites where their home page is too big and when user scroll down to read the content at the end of the page then a few areas of that page load dynamically. How do they design their page?
As an example the site is http://blog.rainbird.me/ where you can see the effect. How can it be achieved it via jQuery and Ajax?

You do it like this:
1: figure out the maximum browser height for your users (it's probably safe to assume 1920px as very few users have larger than 2560x1920 displays)
2: render your list so it is slightly longer than the 1920px, you can even double it to have a safe margin
3: hook into the scroll event on the document $(document.body).scroll(myScrollHandler)
4: when document.body.scrollTop gets close enough to document.body.scrollHeight you append more data on your page
$.get(urlToGetMoreDataFrom,function(data){ $(document.body).append(data)});

Lazy load of content: http://www.appelsiini.net/projects/lazyload
Load content while scrolling: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

function CheckIfElementIsInsideViewport(element)
{
var jElement = jQuery(element);
var jElementTop = jElement.position().top;
var jElementBottom = jElement.height() + jElementTop;
var jElementLeft = jElement.position().left;
var jElementRight = jElement.width() + jElementLeft;
var windowTop = jQuery(window).scrollTop();
var windowBottom = jQuery(window).height() + windowTop;
var windowLeft = jQuery(window).scrollLeft();
var windowRight = jQuery(window).width() + windowLeft;
var topVisible = jElementTop > windowTop && jElementTop < windowBottom;
var bottomVisible = jElementBottom > windowTop && jElementBottom < windowBottom;
var leftVisible = jElementLeft > windowLeft && jElementLeft < windowRight;
var rightVisible = jElementRight > windowLeft && jElementRight < windowRight;
return (topVisible && (leftVisible || rightVisible)) || (bottomVisible && (leftVisible || rightVisible));
}
/* Magazine sneakpeak loader (Only loads content when visible in viewport!) */
var magazineSneakPeakHtml = "<p>Loaded!</p>";
jQuery(function()
{
var sneakPeak = jQuery(".box-newestmagazinepeek");
jQuery(window).bind("scroll", function() { SneakPeakMaybe(sneakPeak); });
SneakPeakMaybe(sneakPeak);
});
function SneakPeakMaybe(jElement)
{
if (CheckIfElementIsInsideViewport(jElement))
{
jQuery(".box-newestmagazinepeek .box-content").html(magazineSneakPeakHtml);
jQuery(window).unbind("scroll");
}
}
/**/
How to do it without jQuery:
How to tell if a DOM element is visible in the current viewport?
This will check if the element is entirely visible in the current viewport:
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top >= window.pageYOffset &&
left >= window.pageXOffset &&
(top + height) <= (window.pageYOffset + window.innerHeight) &&
(left + width) <= (window.pageXOffset + window.innerWidth)
);
}
You could modify this simply to determine if any part of the element is visible in the viewport:
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
You can place elements on your page that note the end of content, when this element then enters the viewport you can load and append new content below it using jQuery ajax (get): http://api.jquery.com/jQuery.get/
Please note that this method is very cpu intensive, since it check if the element is inside the viewport everytime the client scroll!