fullpage.js swipe on mobile scrolls through multiple sections - fullpage.js

On mobile when you swipe up slowly fullpage.js jumps ahead multiple sections like a fast forward or something (my site for example). Is there any way to turn off that feature? What I want is slow swipe up to reveal the lower section and animate to that section when you release. The demo on the main website here has this behaviour, but I can't see any option for it.

Sure!
You can do that by using the Drag And Move extension for fullpage.js.
This will allow you to scroll like in the demo page.

Related

Tabview vs. GridLayout vs. DockLayout

I checked almost every demo application from the website, but nobody use tabview, only Gridlayout or docklayout for "tabbing" purposes. What is the benefit of the Gridlayout instead of tabview? Apart from the customize the background.
My point is to have a native tab look and feel on every page.
If I have page 1, page 2, page 3, all the page components should have the same tabview/GridLayout part, or I can move out the tabview section to an individual global component?
Apologize for the basic question.
Thanks!
If you are looking for pure native look and feel, you would go with a TabView. Another advantage with TabView is lazy loading, it loads the page only when required.
You may go with GridLayout when you want to keep the TabView look similar on both iOS and Android. iOS by default uses Tabs at bottom and Androids places them at top. iOS would give you a More tab when the number of tab exceeds the available space, on Android it will be scrollable. These are by native, so if you want a customised common look and feel, then you could use GridLayout. Or still you could use the TabView and replace the TabBar with your own custom view, which is a bit complicated.
If you want the tabs on every page, then you should probably have a Frame inside each tab and load your pages there. So the TabBar remains same on every page. The same could be achieved with GridLayout, it's all about choices. I personally like sticking with the native look and feel of platform.

Carousel view or Custom Render Tabs?

I have question - what is rightn and correct way to implement this design in Xamarin (Xamarin forms)
Design principle
I see here 2 ways for implementations:
First way - is TabbedPage. And right Custom Render (For IOS - move tabs to top, and for android - Icons)
Second way - is CarouselView - but not sure is good.
Additional requirements is - Animation switch between content of "tabs"
Switch by finger slide is NICE TO HAVE option.
There is no right and wrong way. There is only what meets your requirements and what is easiest to implement and maintain.
Your linked picture clearly shows a TabbedPage. However your additional requirements would make this an issue. iOS shows the tabs at the bottom. I'm not sure if it is easy to move them to the top. It would require a custom renderer if it is even possible. I think iOS allows you to swipe between tabbed pages but I'm not sure that Android does.
It would probably be easier to implement a CarouselView with buttons above. That way you will be able to place your buttons where you like, allow you to swipe between them and have animation. This meets all your requirements.

Is there a way to control safari mouse swipe gestures?

In the latest version of OSX and safari you can use mouse swipe gestures to go forwards and backwards through your browser history. my problem: I have a page with a horizontally scrolling image gallery. If you're using the mouse swipe gesture to scroll through the images, when you get to the end of the images its very easy to swipe into the next or previous page...
does anyone know a way to explicitly disable this using css or any other method?
Perhaps the following documents can help:
Handling Gesture Events
Preventing Default Behaviour
: with event.preventDefault();
These might only apply to iOS though.
Aside from that, I would say it's just how the browser handles the gestures, similar to how mouse-wheel scrolling will scroll a DIV block until it reaches the end then start to scroll the page as a whole.
Unfortunately, there's no way to prevent this behaviour since it's a browser gesture (event.preventDefault() on touchstart event won't work).

WebBrowser div scrolling

If I limit WebBrowser's height, and content is longer, scrollbar is created inside the WebBrowser (effectively, HTML page is long), similar to IE in WP7. This scrollbar behaves the way I want to - after swift swipe it continues to scroll, slowing down.
But if I place a div with a scrollbar in the WebBrowser content, this scrollbar behaves like regular HTML scrollbar, it does not keep scrolling after user stops touching the display.
Is there a way to make this work too ?
Thanks
No, not easily. The WP7 IE9 browser control supports the overflow:scroll CSS property that allows the user to scroll content within the current page. It is worth noting that most Android and iPhone browsers do not support this, although it has been added in iOS5. None of these browser support inertia scrolling for overflow:scroll, WP7 included.
The only way to get inertia scrolling for overflow content is to do it yourself using JavaScript. For WebKit browsers there is a popular library, iScroll, that provides this functionality. However, it does not work for WP7 (due to lack of CSS3 3D transforms that are used to push the scrolling content onto a different layer for hardware acceleration) - so you will need to write your own implementation. Good luck!

Windows mobile controlling scroll bar with finger

I have a question about the windows mobile development.
I created a mobile form on the windows mobile 6.0 test project. But that example form slightly larger than the vertically normal pocketpc forms. I now everybody said you can press the scrollbar for accessing bottom or any location of the form.
But i need to use the finger for easy navigating form areas. This kind of iphone :)
Is it possible ? how can i make this ?
Windows Mobile 6.5 adds gesture support, that is supposed to allow such functionality for finger control. Of course, your code has to take advantage of it.
You can also write your own, which isn't difficult, but still cumbersome.
My answer could be classified as subjective. I try to now show the scroll bar when possible for just that reason. On most devices that have touch screen, you can scroll using you finger (and I'm a somewhat large guy -- 6'3" with farmer kid hands).
But if you are displaying a grid, that isn't always possible. The results can go off the screen very easily. Oh well, grab a pen and hit the scrollbar.
Other screen elements that can help: tab control. separate your controls into groups and put each group on a separate tab. I also do a lot of wizards with LARGE next and previous buttons.
But in all of this, if it is designed to be stylus free, just pray the user doesn't have to type anything using the screen soft keyboard. That just doesn't work with a finger.

Resources