Prevent "jump to Top" on jScrollPane - javascript

I am using the jScrollPane jQuery-Plugin on a -Box which is dynamically filled with content.
My problem is that on adding new content to the front of the old content, the maintainPosition option does not work. So I wrote my own code that moves the Scrollhandle back to it's original position.
The code works fine, but calling reinitialise() after adding the new content moves the handle to the top of the container just before my code reverts it's position. This results in a short flicker of the displayed content which is very disturbing.
Does anyone know a method to prevent the scroll handler to move to the top after calling "reinitialise()"?

Because noone has answered this question yet I've created a jsFiddle with my problem:
http://jsfiddle.net/hB4hE/1/
the calculation done on the second prepend link seems to solve the problem.
But if you run it StepByStep you see that the scrollbar is moved to top first.
Because I prepend many elements in my real environment this jumpy behavior is often visible.
So do you have an idea how to prevent it from jumping?

I didn't find any integrated solution to this, so I created a workaround:
1. calculate height of prepending elements
2. prepeding new elements
3. instantly scrolling down a distance equal to the height of the new prepended elements

Try using this setting: maintainPosition then you don't have to reposition yourself.
More information: http://jscrollpane.kelvinluck.com/settings.html#maintainPosition

Related

Button on webpage going 'behind' elements regardless of Z-index, position is defined as fixed

I have no idea what to do with this button anymore (the "donate" one here).
I have used a plug-in in parallel for the mobile version which works just fine with a defined position of fixed.
This is also fixed position but the "donate" button keeps going behind pretty much all the elements which looks very bad since I want it on top :( any help is appreciated.
U should remove that button from there! Copy this element with id donate_widget, and paste it before container with class at-content.
I think this should work!
I had some similar issues with z-index as well. Here you can find some information about it https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
As for your solution, considering the button is fixed position for the whole web page (not just one section) you could maybe move it up in the HTML tree. In other words, make it a direct descendant of the body element - or row, or something which is above your other elements.
I found it. So I went to the parent element and the div with the id fws_577e3c5a64f62 that contains the button should have the high z-index. This seems to fix the problem for me.

FadeIn offscreen elements which were loaded later

I wan't to fade in elements while scrolling down. Also it exists the possibility to add more elements by clicking on a button.
The problem is, that once the elements which are appended are offscreen, they wont be animated nor even displayed.
It occurs with wow.js as scrollReveal.js and any other so it seems to be a general problem, but I couldn't exactly figure out why it happens.
Here a sample so you see the exact problem.
Just press a few times the add button.
Edit
So, the problem was, that I had multiple div containers nested into each other and using a scrollbar plugin. It doesn't matter which - each will produce this problem. I've fixed the problem by changing one line in the scrollReveal.js - Line 78:
viewport: window.document.documentElement, // <HTML> element by default.
to
viewport: window.document.getElementById('right'), // it's my custom container-div
Now it works how supposed.
If you encounter a similar problem with any scrollbarplugin or wow.js it should also fix your problem. Just change the corresponding viewport.
The problem here is, if window.sr = new ScrollReveal() is called every time a new element is added, all the references to elements which has data-sr is removed and only the last element's reference will be saved.
Instead you can call window.sr.init(true);. For more details visit this github project https://github.com/julianlloyd/scrollReveal.js/blob/master/scrollReveal.js
Here is the working pen with above change : CodePen
So, the problem was, that I had multiple div containers nested into each other and using a scrollbar plugin. It doesn't matter which - each will produce this problem. I've fixed the problem by changing one line in the scrollReveal.js - Line 78:
viewport: window.document.documentElement, // <HTML> element by default.
to
viewport: window.document.getElementById('right'), // it's my custom container-div
Now it works how supposed.
If you encounter a similar problem with any scrollbarplugin or wow.js it should also fix your problem. Just change the corresponding viewport.

jQuery: Run when scroll over a div of a certain class

so I have multiple divs of the same class below each other. I now want to trigger a "loading comments"-function every time a visitor scrolls to a new div. However, I have no idea how to track jQuery scroll over a div. The comments for each div should only be loaded once, my idea would be to save the current position in a variable and only load comments when the new scroll position is greater than the old one.
Can you please help me out?
EDIT: I created a image that shows what I need to do.
Image: http://i.imgur.com/78EYK.jpg
EDIT 2: SOLVED!
Solved with Viewport (thanks to Royi Namir)
http://www.appelsiini.net/projects/viewport
My code:
load = $(".my-div:in-viewport").attr('id');
load_comments(load);
This is executed every second.
you should read about viewport
Viewport ads couple of extra selectors to jQuery. With these selectors you can check whether element is inside or outside of viewport. To see how it works check the demo.
http://www.appelsiini.net/projects/viewport/3x2.html

Insert content at top of page without scrolling

Is there a way that I can insert content at the beginning of a webpage without causing the page to give the impression of scrolling up.
I'm trying to implement something kind of like infinite scrolling but I need to be able to scroll up infinitely as well as down (I'm also unloading content on the other end so that the scroll bar doesn't become infinitesimal and the app doesn't take up too much memory).
I'm happy to use javascript, I'd rather not use a library (I'm trying to stay lighter weight than that).
Any ideas?
Before executing the code to create your element, simply do something like this:
var scrollY = window.scrollY;
window.onscroll = function(){
window.scrollTo(0, scrollY);
window.onscroll = null;
};
Keep in mind that, if you already have an onscroll function, you will need to reassign the function after this...
In my case layout was something like this:
<div class='container'>
<div class='list'>
product cards...
</div>
<button>Load more</button>
</div>
By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
Problem was that when dynamically cards added to the DOM, screen automaticaly scroll and I see only last added cards, but not first added.
I think its default behavior for all browsers (I may be wrong) - if content added in DOM above the focused element browser scroll page in order to focused element was on screen. If content added below the focused element scroll not happened and the focused element also on the screen.
To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.
You can use window.scrollBy(x, y) to scroll down when you add content (you have to calculate the height of what you add).
One possible idea is to bypass the scroll mechanism completely and do your own.
Basically, position every element with display: fixed. You can then load elements above the screen using negative positions.
You'll have to sync the height of the document (just by adding white space) so the document scrollbars are correct. Then, you trap the scroll event and adjust the fixed positioning of all the elements within your page.
I'm not sure how smooth it will be, but I'm fairly certain you could get the effect you're looking for.
I solved it by saving the first element of the container in a variable and then after inserting I called "scrollIntoView" on it. Looks smooth to me.

Horizontal scroller with Mootools

I'm working on a site for myself, and I'm using a custom horizontal scroller done with Mootools that I got from another site (and got their permission to use). While I've managed to get the scroller to function the way I want to, there are two issues I'm looking to fixed and don't have the know-how myself to figure out.
I've set up a simple demo page here.
You can scroll with your mousewheel/trackpad up and down or left and right, you can grab the scroller and drag it, and you can click anywhere along the line to jump directly. So all the functionality is okay. My issues are:
If you scroll to the middle (or anywhere except the start position), then resize your browser window, the scroller handle will jump back to the start/left even though the contents stays put. If you then start scrolling again the contents will jump back to align with the scroller handle's position. Ideally the handle would stay put when the window is resized, but I can't figure out how to do this on my own.
At the end/right of the page I'd like to have a back button that smoothly scrolls you back to the start/"top". The best I've managed is what you see there now, where the contents scrolls back smoothly, while the scroller simply jumps back to it's first position. While I could work around that by simply have it jump straight back to the start, it would certainly look much nicer if the scroller would smoothly scroll its way back like the contents does.
Any help with this would be greatly appreciated!
Your first issue is occurring because positionIt() is being called every time the window resizes. Looking into that function, you can see that the bottomSlider is being initialized every time. I would break positionIt() into a initializing function and positioning function, and ensure that only the positioning function is called when the window resizes.
The second issue could probably be fixed by creating a separate step() function for the bottomSlider and calling that within onChange, rather than using an inline anonymous function. You could then create a timer or tween that calls step() to move the scrollbar back to its original position (and subsequently move the viewport in accordance with it.)
Hopefully that makes some sense!

Categories