Scroller positioning (feature preview)

This is going to make a lot of people happy.

In our current implementation we render the modal scroller in the middle of the screen. There is no easy way to control the positioning.

With an upcoming release we’re introducing two new modes: “bubble” and “docked”.
Because mobiscroll is used on smartphones as well as tablets, these two new modes are perfect fits. Bubble mode is similar to how selects and date pickers are rendered on iPads, and the docked mode is a good fit for smaller screens.

With “bubble” mode your mobiscroll controls don’t loose context. Even if you put down your tablet and pick it up 10 minutes after. It will still be pointing to whatever element you tied it to.
You won’t need to think about positioning issues. Mobiscroll will be smart enough to find the right position and place the scroller.

When using the “docked” mode, mobiscroll will slide up/down from the bottom and the top of your screen being a familiar rendering mode for a lot of users.

Take a look at these two preview videos demonstrating the upcoming rendering modes.

Have you seen our new Rating & Grading Control ? (Get it with an Introductory Discount!)

Tell us what you think!

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!

Tags: , , ,

  • phila

    This is going to be a HUGE help for mobile devices – at present the screen moves & then tries to put the scroller where it wants, which is sometime off-screen

    What is REALLY going to help is to mimic the new Android date scrollers, so that when you get to the end of the month, the number below the final day is “1”, and moving to that day moves the month on, and if required, the year, e.g.:
    29 AUG 2011
    30 SEP 2012
    1 OCT 2013
    and moving the “day” wheel will make it:
    30 SEP 2011
    1 OCT 2012
    2 NOV 2012

    I hope that makes sense – yes, I know I’m giving you an idea here, and I fully expect you to say that you’ve come up with and added a new feature 😛

  • Glenn

    Fantastic news! This is exactly what I need.

    It also looks like you have an updated iOS theme, will this be included in the release?

    • kovlex

      You spotted it! Yes, updated iOS theme will be included.

  • Matt

    When can we begin testing this?

  • Thomas

    Hey guys, great idea!

    I’m currently using the date picker in this configuration:Date -> Modal -> Clickpick -> Android ICS Light
    I experienced people having some kind of trouble when choosing a date. For example you have the arrows to move the year up and down. As I’m using the date picker also for the desktop version of my website, people choose the arrows to select a date instead of dragging and scrolling. Now they think if they click the button ‘^’ the year would change from 2012 to 2011, just going up the list. But instead they are choosing 2013. Seems like this is pretty confusing.
    It would be great if you could consider this in your next upgrade. Maybe there is also a way to switch the way the arrows operate programmaticaly?

  • I really like the idea of having bubble and docked modes optimized for tablets and smartphones, but what I’d really like to see is a way for mobiscroll to dynamically switch between them based on the device/window size. I’m working on a responsive web application, and I would like to use the bubble mode on larger screens and then have it automatically switch to the docked mode when the window is reduced to a certain width. This wouldn’t be too hard to do if the differences between bubble and docked mode are CSS-only.

  • That very nice. Thanks for example.

  • jigar

    how to set the wheel index when i use custom theme and rows : 3