So What I am trying to do is I have 3 div each div should scroll over the another div and when it reaches the top it's position should be fixed.
So everything is working fine until we resize the window(It needs refresh of page).
How to fix this ? I mean can't we do this without refreshing the page ?
I used resize but it's not working for me. And I'm not sure whether this is the right way of using resize
The JSFiddle copy of my work
var $cache = $('#two');
var $cache2=$('#three');
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
$cache.addClass('stuck');
$('#one').addClass('stuck');
$('#two h2').addClass('stuck');
} else if(y>=vTop2)
{
$('#two h2').removeClass('stuck');
}
else {
$cache.removeClass('stuck');
$('#one').removeClass('stuck');
$('#two h2').removeClass('stuck');
}
});
Use window.onresize to handle elements:
window.onresize = function(event) {
//handling code in between
}
Related
I am creating a continuous looping page of images. Looping in both directions from div #loop-end to #loop-start with jquery scroll and offset top.
https://codepen.io/akmalmo/pen/eYgoQKd
var element_position = $('#loop-start').offset().top;
$(document).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test + 2) {
var loopend = $('#loop-end').offset().top;
var loopstart = $('#loop-start').offset().top;
$(document).scroll(function() {
if ( $(document).scrollTop() >= loopend + 1 ) {
$(document).scrollTop($('#loop-start').offset().top)
}
else if ( $(document).scrollTop() <= loopstart - 1 ) {
$(document).scrollTop($('#loop-end').offset().top)
}
});
}
});
The problem is that this function breaks on window resize and I am wondering if there is a simple way to recalculate the offset value? Or preferably having it calculate the offset in a more responsive fashion?
You can use the jQuery resize event to recalculate the looping variables each time the window is resized.
$(window).resize(function() {
// your function
});
I have this code:
function scroll() {
shouldScroll = chat.clientHeight === chat.scrollHeight;
if (!shouldScroll) {
scrollToBottom();
}
}
function scrollToBottom() {
chat.scrollTop = chat.scrollHeight;
}
scrollToBottom();
setInterval(scroll, 100);
In this code I have an automatically scroll but, When I want to see the whole conversation, he does not let me go up so I can read the conversations. It just keeps me down.
How can i fix this?
Thanks
Check if user has scrolled to another position using scrollTop or is near to the bottom by comparing to an offset:
var offset = 50; // if user is 50px far from bottom
var shouldScroll = false;
if (chat.scrollHeight - chat.scrollTop) < offset){
shouldScroll = true;
}
I have a function which basically runs when an arrow with the class 'downArrow' is click. The function will find the parent of that arrow then find the next sibling with a class of 'scrollPoint' and then scroll to that area. Everything I just described works fine for me the issue I am having is if the bottom of the document hits the bottom of my viewport before the top of the element I am scrolling to hits the top of the viewport it just glitches out and scrolls back to the very top of the document. So I think What I need to do is detect if this scenario is going to happen and then set a max scroll value so the scroll functions doesnt try to scroll passed the bottom of the document.
How would I detect if the bottom of the document will be visible on the viewport and prevent from scrolling that far?
I will provide my code below in hopes that it will help, if you have any questions or need more clarification of what I am asking for just let me know. Thanks
This is my component although for what i am asking only the scrollTo function is really relevant
exports.init = init;
function init (options){
var downArrows = document.querySelectorAll(options.selector);
downArrows.forEach(triggerScrollHandler);
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
function scrollHandler (e) {
e.preventDefault();
var el = this,
scrollPoint = findSibling(el),
offsetVal = scrollPoint.getBoundingClientRect(),
windowOffset = window.pageYOffset;
offsetVal = offsetVal.top + windowOffset - 1;
scrollTo(document.body, offsetVal, 600);
}
function findParent(el) {
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName) {
return el;
}
}
return null;
}
function findSibling (el) {
var parent = findParent(el),
siblings = document.querySelectorAll('.scrollPoint'),
scrollTo;
siblings.forEach(function (currentSib, i) {
if(scrollTo == 'found'){
scrollTo = currentSib;
}
if(currentSib == parent){
scrollTo = 'found'
}
});
return scrollTo;
}
function triggerScrollHandler (el) {
el.addEventListener('click', scrollHandler);
}
And this is where I call in my app.js
var scrollHandler = require('./components/scrollHandler.js');
(function(){
scrollHandler.init({
selector: '.downArrow'
});
}())
Put this in your scroll listener:
if (document.body.scrollHeight <= document.body.scrollTop + document.body.clientHeight ){
console.log('scrolled to bottom');
}
Simple, pure JS solution :)
I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle
It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;
All I m using the below code snippet to make a pop draggable. the issue im facing is scroll bar is not being detected, the pop up moves instead of scroll. I did see some similar questions, but the implementation seems to be different in their case, Can you help?
$('#Div1').mousedown(function(ev) {
divToMove = document.getElementById('Div1');
var divName = '#Div1';
dragHandler(ev,divName);
});
function dragHandler(e,divName){
var offSet = $(divName).position();
dragOK = true;
dragXoffset = e.clientX - offSet.left;
dragYoffset = e.clientY - offSet.top;
$(divName).mousemove(function(ev){ moveHandler(ev) });
$(divName).mouseup(function(ev){ cleanup(ev, divName) });
return false;
}
function cleanup(e, divName) {
$(divName).mousemove = null;
$(divName).mouseup = null;
dragOK = false;
}
function moveHandler(e) {
if (e == null) { e = window.event }
if (e.button <= 1 && dragOK) {
divToMove.style.left = e.clientX - dragXoffset + 'px';
divToMove.style.top = e.clientY - dragYoffset + 'px';
return false;
}
}
Please see this example in js fiddle. The issue doesnt happen in chrome, happens only in IE and ff.
http://jsfiddle.net/6g6Xr/74/
I was wanting to comment but do not have enough points. I see you have included jQuery UI in the jsfiddle, is it possible to use its draggable component if you are using UI already? If so you could use the handle property shown here in the second part of this answer:
https://stackoverflow.com/a/8793280/2603735
jQuery UI handle reference