I have constructed a paradigm just to show you what kind of problem I'm facing.
Imagine you want to make a button appear every time the web page is scrolled to top (not scrolling upwards but when the web page has reached top) and you want the button to disappear the moment the user scrolls downwards.
Any reasonable man would think that by checking the scrollView.contentOffset.y you could get the scrolling state of the web page. If it's 0 then it's on top.
if (scrollView.contentOffset.y == 0) {
// It's on top.
}
However, there are some pages where this method doesn't work.
For example: http://www.apple.com/iphone-5s/
The contentOffset remains (0, 0) no matter how much you scroll downwards. I don't care about pages that aren't scrollable. I only care about pages that are scrollable but the contentOffset remains (0, 0) like the one above.
How do I solve this problem? Maybe using javascript? I'm out of ideas.
You can use a library from jQuery named waypoint
jQuery(element.loc).waypoint
You can find more information on how to use it on the jQuery site
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
I've got a JQueryMobile site, and I want to place a div at the top, that isn't visible on the first page load, but only when the user scrolls up. It's meant to emulate a pull-to-refresh. Basically like what these guys did, using this Javascript. This isn't a pull-to-refresh, but they're doing what I want to, which is 'hiding' a div above the initial view.
Unfortunately, JQueryMobile waits until the site is fully loaded, then automatically scrolls all the way back up to the top. So even though I can scroll the page down immediately, a few seconds later (random time), it'll scroll back up.
Is there any way to either stop the scrolling-back-up of JQueryMobile, or to create this div using HTML/CSS?
You can set display:none on your header so it isn't visible, then show it and scroll at the same time. See http://jsfiddle.net/Lanny/CDhmr/1/. Even if there's a significant delay between your page being rendered and your javascript executing scroll will happen at the same time that you extend the document.
It seems that $.mobile.defaultHomeScroll might help here.
Haven't used JQueryMobile, but noticed this pull request on GitHub:
https://github.com/jquery/jquery-mobile/pull/5751
I found some lovely websites - http://www.mini.jp/event_campaign/big-point/, http://www.twenty8twelve.com/ and http://www.scozzese.com - all vertical scrolling, and all using a technique that aligns the 'pages' to the top of the browser when you scroll onto a new 'page' - even if you scroll half way into one.
Could anyone give me any pointers e.g. the right terminology/words I could use to search for more info, or a brief intro on the basics behind this technique, or if any jQuery etc plugins exist I can play and learn with?
I did a search of their code but nothing jumped out as how to do it, my Javascript and jQuery are still novice level.
Javascript Has some native methods like scroll(), scrollTo(), scrollBy() which (with some tricks) you can use to smoothly scroll the page. Together with offsetTop(), offsetLeft() you can achieve effects like on these sites.
There are also a lot of jQuery Plugins out there (e.g. like this google hit) to save you a lot of work with this.
Just search for these Methodnames, this should give you enough hits I guess.
Basic scrolling...
// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();
if(t > h) {
$(window).scrollTop(t - h);
}
Their scrolling script isn't very smart. If I scroll the webpage down by repeatedly clicking on the down arrow, every time I click, it scrolls back up. So inevitably it doesn't work.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.