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!

Answer 1

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