Make Mobiscroll height and width responsive

Question

With Mobiscroll, the height and width is set in the original JQuery implementation. When the screen size is changed, I currently have the width and height changing with CSS @media queries. I would like to know if there is a way with the original JQuery implementation.

My JQuery

$('ul.scroll-list select').scroller({
    preset: 'select',
    theme: 'ios',
    display: 'inline',
    mode: 'scroller',
    inputClass: 'i-txt',
    width: 50,
    height:50,
    onShow: function (html, instance) {
       $("input[id$='_dummy'], .scroll-list label").hide();
    }
});

My CSS

@media only screen and (max-width: 959px) {
    .ios .dww li {font-size:0.7em;}
    .dww.dwrc {height:150px !important;}
}

Would like to know if there is a cleaner way of doing it, via the theme or some JQuery implementation.

Thanks!

score 2 · Accepted Answer · answered Nov 01 '12 at 03:20

2

you can do this by getting the screen width by .width()

$(selector).width(); //get the width you want 
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

answered Nov 01 '12 at 03:20

NullPoiиteя

56,591
22
125
143

That's excellent, thanks for your help NullPointer. I've posted my final code as the answer. – Desmond Nov 02 '12 at 01:35
Thanks again for your reply to this, it worked well. The problem I am having now is getting the size to change when you change orientation on the phone. The whole website resizes with @mediaqueries, but as the height and width is set in Javascript, it doesn't resize until you refresh the browser. Is the a solution to this? Thanks again – Desmond Nov 16 '12 at 02:33

score 1 · Answer 2 · answered Nov 02 '12 at 01:35

I fixed this, here's the final code:

// Add mobi scroller to fares page
    var scrollWidth = $('.scroll-list li').width() - 10;
    var scrollHeight = $('.scroll-list li').height();

    $('ul.scroll-list select').scroller({
        preset: 'select',
        theme: 'ios',
        display: 'inline',
        mode: 'scroller',
        inputClass: 'i-txt',
        width: scrollWidth,
        height: scrollHeight,
        onShow: function (html, instance) {
           $("input[id$='_dummy'], .scroll-list label").hide();
        }
    });

score 0 · Answer 3 · edited May 23 '17 at 12:06

Here is what I did for resizing the mobiscroll date control on orientation change:

 function setDatePickerWidthAndHeight()
 { 
    var scrollWidth = ($("div[id='main_content']").width()) / 4;
    var scrollHeight = scrollWidth / 2.5;
    var selectorBase1 = "date_1";
    $("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth);
    $("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight);
 }

 $(function () {
 $(window).bind('orientationchange', function (event) {
                setTimeout(setDatePickerWidthAndHeight(),100);
            });
 }

Also, I used css similar to this (not much different than yours) in media queries to adjust the font size (".dwwr td" is not in a media query):

.dww li {
    font-size: 3.25em;
    }
.dwwr td {
    padding: 0;
}

I used code similar to yours for initializing the width and height.

I am not sure what the .eq(0) is and I can't remember where I saw someone else doing that but it works...... the only problem is that on some older phones it seems to slow down and eventually crash the phone's browser after a few orientation changes.

Note: I think the width and height properties are for one scroller, hence the "/ 4". Since there are 3 scrollers, if I divide the width by 4 it should always fit on the page and account for padding and margins.

In their documentation there is not an example with ".eq(0)"

Edit:

Here is where I saw the ".eq(0)" thing.

Edit:

At this post I found a way to get the orientation change working better.

Thanks Soenhay. The original version I had didn't work so well on orientation change, so I will give yours a go! — Desmond, Dec 04 '12 at 20:42
This way has its problems also: http://stackoverflow.com/questions/13710834/problems-with-mobiscroll-orientationchange-and-access-address-bar-crashes-some — Soenhay, Dec 04 '12 at 23:20

Make Mobiscroll height and width responsive

3 Answers3