jScrollPane how to store scroll position? - javascript

I'm using the JQuery plugin jScrollPane.
A client has asked me if when a user scrolls the list of items, and clicks on one, then clicks back in their browser or goes back to that page from a menu, can the scroll box be at the same position. :S
This would mean storing the "top" css attribute computed by the plugin into a cookie on mouseUp (when they let go of the slider, store the value of "top") then when they return, I can check for that cookie and set it to that position.
That's the idea anyway, I've no idea even where to be begin with this.
Thanks for any responses. :)

Here's my solution.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:true});
if(element != undefined) {
var api = element.data("jsp");
$(function() {
if(parseInt(localStorage.getItem("ScrollPosition")) > 0) {
api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")))
}
$(".scroll-pane").bind("jsp-scroll-y", function(event, scrollPositionY, isAtTop, isAtBottom) {
localStorage.setItem("ScrollPosition", scrollPositionY)
}).jScrollPane()
})
}
;

Related

Stored scrollbar position starts at the top on page load

I have a scrolling div with some links and I want to store the scrollbar position on click and keep the position after page load. This code does the work but when the new page loads the scrollbar starts at the top and immediately goes to it's stored position.
It works well in Microsoft EDGE, but it doesn't in Chrome.
Is there a way to avoid that? I don't want any scrollbar/content movement on page load.
Here's an example.
$('.sidebar a').click(function() {
sessionStorage.scrollTop = $('.sidebar').scrollTop();
});
if (sessionStorage.scrollTop != "undefined") {
$('.sidebar').scrollTop(sessionStorage.scrollTop);
}
http://jsfiddle.net/xpvt214o/549685/

How do I scroll the page to the top after the fragment identifier pulls the page down?

I am not trying to prevent the fragment identifier from working. I want the page to go back to the top after it goes down.
This question is asked for the purposes of using jQuery's UI tabs. You need the id to be set on the tab content div, so that jQuery knows which tab to open.
The fragment identifier will open the tab that it is set to, but it also scrolls the page down to the tab's content.
On a page with the tab close to the top, and barely any headers, I wish to keep my page at the top, not scroll down ~150 pixels.
Using javascript's onscroll event, we can see when the page scrolls.
Side note - Since I only have one scenario, I verify that my fragment identifier is what it should be.
We need to then keep a count of when the page scrolls. The page should only be set to the top at the beginning, otherwise the user wouldn't be able to scroll. Thus, check the scroll count for 1, and then move the page to the top.
<script type="text/javascript">
var scrollCount = 0;
window.onscroll = function () {
var hash = window.location.hash.substr(1);
if (hash === "chats") {
scrollCount++;
}
if (scrollCount === 1) {
window.scrollTo(0, 0);
}
}
</script>

Making an image appear after scrolling past header - attempts not working?

I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.
Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.

Jquery Mobile go back button scrolls to top

In my Jquery Mobile website
I am using href for back button like;
<a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse"">
but if I have scroll on first page, back button jumps back to top again.
First page does not stay on same position.
Is there any solution for this?
Solution
I had this issue i fixed it using iSroll
While going from PageA to PageB save the scroll position of PageA in a variable.
to do this modify the iscroll.js and add getScrollY method under scrollTo like this
scrollTo : function(x, y, time, relative) {
var that = this, step = x, i, l;
that.stop();
if (!step.length)
step = [{
x : x,
y : y,
time : time,
relative : relative
}];
for ( i = 0, l = step.length; i < l; i++) {
if (step[i].relative) {
step[i].x = that.x - step[i].x;
step[i].y = that.y - step[i].y;
}
that.steps.push({
x : step[i].x,
y : step[i].y,
time : step[i].time || 0
});
}
that._startAni();
},
getScrollY : function() {
var that = this;
return that.y;
},
Now save the current position before page change like this
curScrollPos = myScroll.getScrollY();
And set the scroll position while going back to that PageA, i am doing this on pagehide event of PageB
myScroll.scrollTo(0, curScrollPos, 1);
myScroll.refresh();
This way i solved my issue, hope this helps.
More info
If you want to find out more about this topic take a look at this article, you will also find working examples.
why don't you directly add data-rel="back" on the anchor tag and set href="#" instead ?
<a id='{0}' class='{1}' href='#' data-rel="back" data-role="button" data-icon="arrow-l" data-transition="slide" data-direction="reverse"/>
Before I describe your available solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.
If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.
There are 2 viable solutions:
iScroll and its jQuery Mobile derivate iScrollview
iScroll homepage: http://cubiq.org/iscroll-4
iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview
iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.
That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.
Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.
Silent scroll
Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.
In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changes. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.
//scroll to Y 100px
$.mobile.silentScroll(100);
And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/2xfrM/
And here's a real life jsFiddle example using large listview and several pages: http://jsfiddle.net/Gajotres/5zZzz/
// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){
$('#test-list li').on('click', function(){
storePosition.topCoordinate = $(this).offset().top;
$.mobile.changePage('#second');
});
});
// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){
if(storePosition.topCoordinate !== null) {
$.mobile.silentScroll(storePosition.topCoordinate);
}
});
// Store position location
var storePosition = {
topCoordinate : null
}
Unfortunately like in your example, this solution works only on pageshow. Because of jQM architecture it is only possible to do this during the pageshow event.
Final notes
If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.
I found a solution here: https://forum.jquery.com/topic/jquery-mobile-scroll-to-top-of-page-on-page-load#14737000005271291
(function($){
$( document ).on( "mobileinit", function() {
var silentScroll = $.mobile.silentScroll;
$.mobile.silentScroll = function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
// FIX : prevent auto scroll to top after page load
return;
} else {
silentScroll.apply(this, arguments);
}
}
})
}(jQuery));

CSS JS Display none alter div

I have a one pager. And in that one pager, I have an item that is set as display:none (fixed side nav in a div).
Can I have it show when scrolling to a certain div?
So it starts out in the code but not displayed, and then when the user scrolls to #about can the side nav show up?
Essentially you will need to check if the user has scrolled to or beyond the div id of about.
First you will need to establish the current Y value of the div.
//cache about div
var about = $('#about');
//this caches the about div position on window load
var aboutPosition = about.position();
Next you will need to determine how far the the user has scrolled. The best way I have determined to accomplish this is with a timer. You could use the scoll event but its far too taxing on the user browser and a timer will be for the most part indistinguishable.
//generic timer set to repeat every 10 mili(very fast)
//with a callback to execute the logic
var checkScrollPos = window.setInterval("scrollTopLogic()",10);
function scrollTopLogic(){
//if about y position is greater than or equal to the
//current window scroll position do something
if(aboutPosition.y >= $(window).scrollTop()){
$('nav').show();
//remove timer since it is no longer needed
window.clearInterval(checkScrollPos);
}
}
You can catch the scroll event of the div and show the element like this
$("#div").scroll(function() {
$("#item").show();
});

Categories