I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!
You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.