What is breaking the scroll on my site? (touch only) - javascript

So I've built a website and everything is going fine except one thing. When you go to the shop page on a mobile and hit "filter products" (only visible on screens up to 1000px wide), the filter menu that slides out doesn't scroll.
If you try it on your laptop using the mouse wheel it will scroll fine, but go on your phone (or get the chrome inspector to mimic a touch device) and you'll see it doesn't scroll any more when you touch the screen, only with the mouse wheel.
Here is the page in question: https://growitmowit.co.uk/shop/
I have tried ripping the css & js out but once you've clicked "filter products" and the menu has slided out you cannot scroll (with touch) until you slide the filter menu away.
I've now spent hours trying to figure it out and need some help :) Thank you in advance.
oh yeah - sometimes, when you first open the page with the inspector in device mode it is fine. If that's the case refresh the page and it'll start playing up :(

Related

When I scroll UP on mobile, it jumps straight to the top

This is an old website, build on WordPress but there is a bug only on mobile devices ( cant replicate with dev-tools ). When you are scrolling down, sometimes it automatically brings you up at start of the page, sometimes it's Ok but after scrolling a little bit UP, again it jumps to the start of the page.
Could someone please help or guide me on that.
Website -> here

Titanium.UI.ScrollableView doesn't show children when scrolling fast

In my Titanium IOS app I have a ScrollableView populated with several WebViews.
When scrolling slowly between views everything works fine and I'm able to see the views as they slide back and forth.
However, when trying to scroll fast (by flicking the screen) the ScrollableView gets black almost immediately, giving me no feedback of whether I'm scrolling or not. Even though the ScrollableView goes black it still scrolls though.
Maybe flicking isn't supported? Any help would be appreciated.

Working to get scrolling on mobile devices, works on desktops. Using fullPage.js

I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.

Mobile Site Prevent Elastic Page Scrolling

I have developed an ajax site that has a fixed header and footer and a scrollable div in the middle that contains the content of the application. The site works great on mobile devices as well (iPad, Android, etc) except for the fact that when the user gets to the bottom of the middle scrollable div, the elastic scroll comes into play and the bottom of the page pulls away from the bottom of the screen. Same when they reach to top of the scrollable div.
I know you can completely prevent elastic scrolling by doing the following:
$('#Platform').bind('touchmove', function (e) {
e.preventDefault();
});
But this obviously prevents any scrolling at all and then the user can't see the content of the application. My thought is to put some conditional logic in the above event to make it so that e.preventDefault() is called only when the user is at the top of the div AND they are trying to scroll up or they are at the bottom of the div AND they are trying to scroll down. I started doing something like this:
$('#Platform').bind('touchmove', function (e) {
var platform = $('#Platform');
if ((platform.scrollTop() + platform.innerHeight()) >= platform[0].scrollHeight) {
e.preventDefault();
}
});
The above code basically determines if they are at the bottom of the scrollable div and if they are, e.preventDefault() is called. This is great but once they hit the bottom of the div, they will never be able to scroll again! I figure that I have to somehow determine which way the user is swiping and include that in my logic. If they are at the bottom and are swiping down, don't scroll. But if they are at the bottom and swiping up, allow them to scroll. And visa versa for when they are at the top of the div.
Is this the best way to go about accomplishing my goal? Is there a better way? If this is what I should do, how does one determine the direction of the swipe?
Also, is there an easier way to test a website on an iPad, iPhone, Android device than having to deploy it to a development server? I would have played around with my proposed solution more except for the fact that I didn't have anyway of easily debugging my code.
Thanks.
http://cubiq.org/iscroll-4 fits great for your usage.
You can easily debug your programs if you have a Mac, then you just use the iPhone/iPad simulator that you get when downloading xCode / iPhone SDK.

Facebook's mobile app/site horizontal slide menu : Jquery plugin?

Does anybody know a good horizontal slide menu jquery plugin that could emulate Facebook's relatively new mobile site/app's menu?
Basically you have a view of all the content, and when you click a button, a menu slides from the left, moving the content a little to the right (to the width of the menu sliding in). When a button on the menu is clicked, the menu slides out of view, the content slides back, and then changes corresponding to whatever menu button was clicked.
Aldomatics code doesn't behave well in windows phone and doesn't handle orientation issues
This topic is old but here is a working solution for mobile devices (Build with Jquery) :
it's working on Windows phone, iOs and Android Devices.
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
http://apptitudes.github.com/SlidingMenuJS/
I was looking for the same thing.
The best example I can find is a paid mobile Wordpress theme:
http://themeforest.net/item/hotcake-mobile-business-html-template/1065437
Pretty slick and you could at least see how it is done.
Cheers,
I find this implementation the best example currently available:
https://github.com/aldomatic/FB-Style-Page-Slide-Menu
It's not a jQuery plug-in, per se, but it should to the trick!

Categories

Resources