I'm looking to recreate the vertical scrolling from this page: http://www.apple.com/iphone-5s/
Is there a library that will implement this (with jquery is ok). Particularly, I want to override the mouse wheel and keyboard so that scrolling down will smoothly jump to the next section and scrolling up will smoothly jump to the previous section.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
You can also look at fullPage.js, simple but quite powerful. You can even link it with a menu and use landscape scrolling too. Also, it works in IE8 and IE9 not like onePageScroll which only works with IE 10 and modern browsers.
Demo
Website
You can use something like http://github.com/stephband/jparallax.
also try http://ianlunn.co.uk/plugins/jquery-parallax/
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.
I've created a virtual-rendering implementation (similar to what you would find in the project SlickGrid). Everything seems to be working very well, with one problem: On Mac, smooth scrolling (the rubber-banding and fade-to-stop) doesn't work on my element when I add overflow: auto??
http://syntaqx.com/infiniload/
Any help would be appreciated.
You can use JS Librarys:
https://github.com/ftlabs/ftscroller
FTScroller is a cross-browser Javascript/CSS library to allow touch,
mouse or scrollwheel scrolling within specified elements, with
pagination, snapping and bouncing support.
I have a horizontally scrolling div with sections inside. I'm using Ariel Flesler's scrollTo plugin to scroll from one section to another.
Please see: http://jsfiddle.net/carienf/qZeEe/
The fiddle works perfectly in IE 9, Safari 5.1, Opera 11.5 and Chrome 14 (all the latest versions). I can click on a link to scroll to the corresponding section and scroll or mousewheel around in it.
Problem:
In Firefox 7 (and earlier), when I have scrolled to Section 2 or Section 3 and then scroll down using the scrollbar, my position is reset to the first section. This also happens when I resize the browser window. If I scroll using the mousewheel, Firefox behaves (in other words, I stay in the current section).
My question is pretty much an exact repeat of this question: Problem mixing overflow-x, FireFox, and Javascript
Only, the accepted answer (which is to allow the horizontal scrollbar to be visible) doesn't work for my specific case. Also, the guy who posted the question has removed his example. I really need that scrollbar to stay hidden and I really don't like the idea of hiding it behind a div.
Is there a way (other than setting overflow to "auto") to stop Firefox from resetting my scroll position? Or some other way to hide the scrollbar?
UPDATE: Updated Firefox to 8.0 (still a beta version) and then the behaviour is consistent with the other browsers.
I can see a couple of options.
clip off the scroll bar. Takes some measuring and you have to position absolutely.
Add a 2nd div outside that does the vertical scrolling. That breaks your code as it currently stands, but it does resolve the scrolling problem. jsfiddle.net/s2YFM
I just ran into the same exact issue. When my "modal window" pops up, I set html.noscroll { overflow: hidden }, which unfortunately causes the window to scroll-to-top.
Here's the only solution I could make work:
function RemoveScrollbar(html) {
var scrollTop = html.scrollTop;
html.addClass('noscroll');
html.scrollTop = scrollTop;
}
This is MooTools code, but super simple to convert to jQuery or other frameworks.
Have you seen yahoo's ipad/tablet home page? The swipe effect for flipping through headlines is impressive. I have seen some workarounds in jquery (using the cycle plugin + the touchwipe plugin) but these all simply detect user gesture and then run the x- absolute position animation, rather than actually track the user's gesture. Know of a solution similar to yahoo's?
Found the solution: http://cubiq.org/iscroll-4
Used the "snap-to" option to re-create the carousel effect.
Swipe JS is a good one. If this is the effect that you are looking for - http://swipejs.com
Not sure, but there is jQuery Mobile.