I am currently working on a website with ajax support. Navigating through website and the browser's history works great, but there is one problem I cannot solve.
When the user presses the back button, the last page appears again. But although I set the vertical scroll position to the previous one via popstate event, it jumps back to top again...
function loadContent(nextContent, nextUrl, newPage = true) {
var currUrl = window.location.pathname;
currUrl = currUrl.slice(7,currUrl.length);
var scrollY = window.scrollY;
var prevContent = document.getElementById("page").innerHTML;
document.getElementById("page").innerHTML = nextContent;
if (newPage) {
// overwrite current history entry
history.replaceState({ content: prevContent, url: currUrl, scrollY: scrollY }, null, currUrl);
initPage();
window.scrollTo(0,0);
// write new entry
history.pushState({ content: nextContent, url: nextUrl, scrollY: 0 }, null, nextUrl);
} else {
initPage();
// scroll to previous scroll position
window.scrollTo(0,history.state.scrollY);
}
}
window.onpopstate = function(e) {
loadContent(e.state.content, e.state.url, false);
// page scrollY will be set in load, after page content was added
}
I know that the code works so far because earlier I've put an alert after window.scrollTo() and during the freeze I saw, that the page is on the correct position. But after continuing it jumped to the top. Is there maybe another (default) event, that scrolls to the top in the background?
Thanks for help
I fixed the problem now by changing the onpopstate function to the following:
window.onpopstate = function(e) {
loadContent(e.state.content, e.state.url, false);
// as previous window.scrollTo() have no effect, do it within a few millisecs again
setTimeout(function() {
window.scrollTo(0,history.state.scrollY);
}, 5);
}
Not really beautiful, but it works. If someone knows a clean fix or the reason why this effect happens, please share your knowledge!
Related
Issue right now: https://www.loom.com/share/c2567ccbd8e44ab49d1138e65ae77973
I have a section or div in the middle of the page. On every scroll, I need to detect if I entered that div after scrolling from outside that div (either up scroll or down scroll) or I am just scrolling inside that div?
I will explain what I am trying to achieve
This is the site https://dev.plusplus.co/events/
For this section https://prnt.sc/25nbxzq
What I am trying to achieve is when I start scrolling from the top of the page, and after I enter that above section, the section locks and there is a slick slider inside that div and after the section locks, I need to change slides on up and down scroll.
But What is happening right now is especially in firefox browser, If I scroll from the top and enter that div, the slider automatically changes to second. I need to lock the scroll first which works and when I enter that section and scroll and then only change slide to second on next scroll
Code I am using right now.
// debounce from underscore.js
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// use x and y mousewheel event data to navigate flickity
function slick_handle_wheel_event(e, slick_instance, slick_is_animating) {
// do not trigger a slide change if another is being animated
if (!slick_is_animating) {
// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction =
Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
console.log("wheel scroll ", e.deltaX, e.deltaY, direction);
if (direction > 0) {
// next slide
slick_instance.slick("slickNext");
} else {
// prev slide
slick_instance.slick("slickPrev");
}
}
}
// debounce the wheel event handling since trackpads can have a lot of inertia
var slick_handle_wheel_event_debounced = debounce(
slick_handle_wheel_event
, 80, true
);
// slider #2
const slick_3 = $("#firstscrollsection .content-left");
slick_3.not('.slick-initialized').slick({
dots: false,
vertical: true,
speed: 400,
fade: true,
waitForAnimate: false,
verticalSwiping: true,
slidesToShow: 1,
arrows: false,
infinite: false,
});
var slick_3_is_animating = false;
slick_3.on("afterChange", function(index) {
console.log("Slide after change " + index);
slick_3_is_animating = false;
});
slick_3.on("beforeChange", function(index) {
console.log("Slide before change " + index);
slick_3_is_animating = true;
});
$("#firstscrollsection .section-wrapper-animated").on("wheel", function(e) {
slick_handle_wheel_event_debounced(e.originalEvent, slick_3, slick_3_is_animating);
});
Assuming you're trying to create a parallax effect, I believe you're going about it the wrong way.
I'm also curious about these lines of code:
// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
console.log("wheel scroll ", e.deltaX, e.deltaY, direction);
Is there a reason for comparing deltaY with deltaX? As I understand that you're calculating scroll direction on the vertical axis.
MDN Web Docs outlines the following — maybe this could be the source of the issue with Firefox:
Note: Don't confuse the wheel event with the scroll event. The default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. Even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. Therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. Instead, detect value changes of scrollLeft and scrollTop of the target in the scroll event.
If the pointer isn't directly hovering over the section, its wheel event won't fire. Also, the wheel event won't consider touch or scrollbar events. It's a better idea, in my opinion, to instead listen for the scroll event on the documentElement.
Here is my suggestion for changing the slide on the next scroll. You can detect if the scrollTop of the document meets your target element's(section in this case) offsetTop, then you will start calculating scroll direction before navigating the slider.
I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.
I have an image embedded in a container with a background image to give the effect of scrolling within the page. Initially, I had the scrolling effect take place on page load, with this simple bit of script which worked perfectly.
$(window).on("load", function () {
$(".embedded_scroller_image").animate({ scrollTop: $('.embedded_scroller_image')[0].scrollHeight}, 2500, "easeInOutCubic");
}); // end on load
However, the element is too far down the page now and I want that animation to fire when the element enters 80% of the viewport. That part is also working fine with this code here (I'm using a scroll limiter to improve browser performance)
// limit scroll call for performance
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 500 //(milliseconds) adjust to the highest acceptable value
};
$(window).on('scroll', function() {
var flag = true;
if(scrollHandling.allow) { // call scroll limit
var inViewport = $(window).height()*0.8; // get 80% of viewport
$('.embedded_scroller_image').each(function() { // check each embedded scroller
var distance = $(this).offset().top - inViewport; // check when it reaches offset
if ($(window).scrollTop() >= distance && flag === true ) {
$(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
flag = false;
}
});
} // end scroll limit
}); // end window scroll function
The problem is this: I want the autoscroll to happen once and then stop. Right now, it works on entering viewport, but if I then try to manually scroll the image, it keeps pushing back down or stutters. You can't get the element to scroll normally. I attempted to use the flag in the code to stop the animation, but couldn't get that to successfully work.
How can I have this animation fire when the element is 80% in the viewport, but then completely stop after one time?
Here is a codepen I mocked up as well http://codepen.io/jphogan/pen/PPQwZL?editors=001 If you scroll down, you will see the image element autoscroll when it enters the viewport, but if you try to then scroll that image up in its container, it won't work.
Thanks!
I have tweaked your script a bit:
// limit scroll call for performance
var scrollHandling = {
allow: true,
reallow: function() { scrollHandling.allow = true; },
delay: 500 //(milliseconds) adjust to the highest acceptable value
};
$(window).on('scroll', function() {
if(scrollHandling.allow) { // call scroll limit
var inViewport = $(window).height()*0.8; // get 80% of viewport
$('.embedded_scroller_image').each(function() { // check each embedded scroller
var distance = $(this).offset().top - inViewport; // check when it reaches offset
if ($(window).scrollTop() >= distance ) {
$(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
scrollHandling.allow = false;
}
});
} // end scroll limit
}); // end window scroll function
I have kicked out your flag and simply made use of scrollHandling.allow declared already.
Try if it works for you :)
Cheers!
This is the js that I have in my js file
function refreshChat()
{
//speed up by selecting the div only once
var shoutbox = $("#shoutbox");
//get the height of the scroll (if any)
var oldScrollH = shoutbox.attr("scrollHeight") - 20;
//the ajax request
$.ajax({
url: 'shoutbox/update.php',
//disable cache
cache: false,
success: function(html) {
//update the shoutbox
shoutbox.html(html);
//get the heigth of the scroll after the update
var newScrollH = shoutbox.attr("scrollHeight") - 20;
if(newScrollH > oldScrollH)
{
//*move* the scroll down using an animation :)
shoutbox.animate({scrollTop: newScrollH}, 1);
}
}
});
}
//set the refreshChat function to run every *refreshSeconds*
setInterval(refreshChat, refreshSeconds);
});
it works fine in Firefox and IE, but with Google Chrome it constantly flicks. It will scroll to the bottom on page load, but when it calls to the function refreshChat it moves back up about halfway up the div.
I also have this in my <head>
$(document).ready(function(){
//speed up by selecting the div only once
var shoutbox = $("#shoutbox");
//get the height of the scroll (if any)
var oldScrollH = shoutbox.attr("scrollHeight");
//the ajax request
$.ajax({
url: 'shoutbox/update.php',
//disable cache
cache: false,
success: function(html) {
//update the shoutbox
shoutbox.html(html);
//get the heigth of the scroll after the update
var newScrollH = shoutbox.attr("scrollHeight");
if(newScrollH > oldScrollH)
{
//*move* the scroll down using an animation :)
shoutbox.animate({scrollTop: newScrollH}, 1);
}
}
})
});
so that it will auto load the shoutbox on page load, could this be conflicting with it? It seems logical, but I don't want users to have to wait 3 seconds for the shoutbox to initially load.
You need to convert string to int.
scrollHeight is custom attribute and i guess its dynamically added so it must string thats why you need to cast it to int.
parseInt(shoutbox.attr("scrollHeight"));
try this, hope this will solve it.
I'm just working on my personal website, giving it a bit of a revamp.
I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.
In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.
Anyone any ideas how to fix this?
Offending code:
function Accordion(e)
{
var o =
{
init: function()
{
o.button = e;
o.addClickHandler();
},
addClickHandler: function()
{
o.button.click(function(){
o.button.removeClass('unselected');
o.button.addClass('selected');
o.fader();
});
},
fader: function()
{
$j('.unselected').animate({opacity:0}, 1000);
var wait = setInterval(function() {
if(!$j('.unselected').is(":animated") ) {
clearInterval(wait);
o.shifter();
}
}, 100);
},
shifter: function()
{
o.button.css({'position':'absolute'});
o.button.animate({top:91}, 500, o.createInfoBox);
},
createInfoBox: function()
{
var buttonParent = o.button.parent();
buttonParent.append("<div class='infoBox'></div>");
$j('.infoBox').animate({height:390});
}
}
o.init();
return o;
}
}
The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.
Much appreciated,
Dave
HAve you tried using the current position of the element when you switch it to absolute... for example:
function() {
var currentp = $(this).offset();
o.button.css({'position':'absolute', top: currentp.top});
o.button.animate({top:91}, 500, o.createInfoBox);
}
Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.
Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)