Calculating pixels from bottom of element - javascript

I'm trying to create a scroller which loads content when the user nears the bottom of an element however I'm struggling with calculating the current distance from the bottom of the element #grid when the user scrolls.
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scroll);
$('.scroll').html(bottom);
});
The .scroll element displays the value although it doesn't seem to be giving correct numbers. Any ideas, I've come to a stand still. I seem to be getting the distance from the top of the window to the bottom of the container, not from the current scroll position?
Top of page
Scrolled down

You need to add the height of the window too.
$(window).scroll(function (event) {
var scrollBottom = $(window).scrollTop() + $(window).height();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scrollBottom);
$('.scroll').html(bottom);
});
If bottom is negative by less than the window height, then the bottom of the #grid div is visible on the screen.

Related

Scroll div horizontally instead of page, then scroll page

it isn't a duplicate as I've read the others question but everyone assume that the scroll is vertical, while i need this for horizontal scroll.
What i'm trying to do is to scroll a div, placed somewhere in a page, when it reach the center of the screen or it is almost visible, then when it end its scroll i need to continue the page scrolll.
Actually i have a "slider" like this: JSFIDDLE
Actually, I can get an advise when the element is visible on the page after scrolling, but I don't know how to disable vertical scroll, scroll my div, and then scroll page again. The important thing is that the div scroll how much i continue the scrolling (intended with mouse, keyboard and maybe touch, it will be awesome)
function testInView($el){
var wTop = $(window).scrollTop();
var wBot = wTop + $(window).height();
var eTop = $el.offset().top;
var eBot = eTop + $el.height()+50;
return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
$(".slider-wrapper").each(function(){
var $zis = $(this);
$zis.removeClass("inview");
if(testInView($zis)){
alert("eccolo");
}
});
}
$(document).scroll(function(){
setInView();
});
$(document).resize(function(){
setInView();
});
$(document).ready(function(){
setInView();
});
If you want to disable vertical scrolling then just set overflow-y: hidden on body element
body {
overflow-y: hidden;
}

How to get height from the top of the div (not window) for each item and apply to another div

I want to apply margin top based on tab click. When TAB 4 is clicked the content need to be in same position from top.
You should get the to position of the clicked tab. When you have that, you can apply a style to the content. You can obtain the position of the tab with Element.getBoundingClientRect(). That will return the left, top, right, bottom, x, y, width and height properties of the element.
One ceavat:
Properties other than width and height are relative to the top-left of
the viewport.
So you should take the scroll position into account. You can obtain that by Window.scrollY.
The position of the element from the top would be:
element.getBoundingClientRect().top + window.scrollY
With that information you can apply a style like:
var tabTopOffset = myTabElement.getBoundingClientRect().top + window.scrollY;
// var myContent = document.getElementById('#my-tab');
var myContent = document.querySelector('.my-tab');
myContontent.style = tabTopOffset + 'px';
This works perfectly
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$('.tabs').each(function(){
$('.tab', this).click(function(){
var fromTop = $(this).offset().top;
var href = $(this).children('a').attr('href');
var newhref = href.substring(1);
$('#'+ newhref).css('margin-top', fromTop);
});
});
});

Jump to next div and have it centred on screen when user scrolls

I'm building a one page site, and wanting to have multiple divs, that are approximatly 400px (but vary) on top of each other. Instead of a smooth scroll, I would like jump to the next div and have it centred on the screen, at the same time adjust the opacity of the content above and below to draw attention to the centre div.
I have tried playing with a few scrolling plugins but have not had anything do what I'm after, most of them are geared towards a full page div, not one only a 1/3 or so the height of the page.
Can someone point me towards something I can adapt to perform this.
Add an event listener to the document which looks for elements with the class .next
Get the distance from the top of the viewport to the top of the element in question
subtract half the value of the viewport height minus the height of the element.
If the element is bigger than the viewport, scoll to to top of the element
Or scroll the element into the middle.
Set the opacity of the unfocused elements.
(Demo)
(function(){
"use strict";
document.addEventListener('click', function(e) {
if(e.target.className.indexOf('next') >= 0) {
var current = e.target.parentElement
var next = current.nextElementSibling || false;
if(next) {
var nextNext = next.nextElementSibling;
var height = next.offsetHeight;
var top = next.offsetTop;
var viewHeight = window.innerHeight;
if(viewHeight - height > 0) {
var scrollTo = top - ((viewHeight - height) / 2);
} else {
var scrollTo = top;
}
window.scroll(0, scrollTo);
current.style.opacity = '0.5';
next.style.opacity = '1';
if(nextNext) nextNext.style.opacity = '0.5';
}
}
}, false);
})();

Updating (style.top) position of a floating menu with Javascript

I'm doing a floating menu with JavaScript, is suppose to stay in the same position no mater if the user scrolls down or resize the window.
So far it is working just fine with X position. However, I can't find a way to make it stick to a position relative to the visible top of the window. The problem is when I scroll down the menu disappear because it keeps its distance related to the window size.
my code is:
menuPosition : function (){
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var xPosFloatingMenu = (windowWidth) - (fMenuWidthGlobal + fMenuXPosGlobal);
var yPosFloatingMenu = (windowHeight) - (windowHeight - fMenuYPosGlobal);
document.getElementById("floating_menu").style.left = (xPosFloatingMenu) + "px";
document.getElementById("floating_menu").style.top = (yPosFloatingMenu) + "px";
},
updateMenuPosition : function () {
var menuPositionInterval = setInterval(gala.create.menuPosition,1);
}
Is there a way to keep the menu position update relative to the visible top of the window?
You have to update the style properties of your floating_menu element on the window scroll Event .
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

How to display element on screen but not at the top of the screen in html/css?

I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!
var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.
I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);

Categories