Question

Original Title but too long for post:
“ASP.NET MVC 4, Razor, JQuery, JQueryMobile, Problems with Mobiscroll – orientationchange and access address bar crashes some mobile browsers. Changing scroller width and height does not work on some phones.”

The crash issue happens on Android 2.1.
It does not happen on iPhone, HTC EVO 4G LTE or other HTCs.

Changing the scroller width and height does not work on HTCs. If I change to landscape then the scroller is the same size as it should be in portrait. If I change it back to portrait then the scroller is the size it should have been in landscape.

Here is the JQuery/Mobiscroll code:

  function createDatePicker(selector){
        if($("#input_date_1").scroller('isDisabled') != 'undefined'){
            var scrollWidth = ($("div[id='main_content']").width())  / 4;
            var scrollHeight = scrollWidth / 2.5;
            $("#input_" + selector).scroller({
                    preset: 'date',
                    minDate: new Date(2000, 0, 1),
                    maxDate: new Date(2020, 11, 31),
                    theme: 'android',
                    display: 'inline',
                    mode: 'scroller',
                    dateOrder: 'mmddyy',
                    width: scrollWidth,
                    height: scrollHeight,
                    onChange: function (valueText, inst) {
                        var lbl = $("#lbl_" + selector);
                        var date = $("#input_" + selector).scroller('getDate');
                        lbl.text(date.toDateString());
                    }
                });
        }

  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 () {
        createDatePicker('date_1');

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

I am including these scripts in @section scripts {} which is rendered at the bottom of the page ( not sure if that is relevant ).

Any help would be appreciated.

Answer 1

It turns out the problem was that the older Android phones do not like the resize event the way it was written above…. and newer phones did not like the orientationchange event. The code at this link made everything work perfectly:

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

And here is how I used it:

//
// usage:
//$(window).smartresize(function () {
//    // code that takes it easy...
//});
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr) {

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function (fn, threshold, execAsap) { return fn ? this.bind('resize', debounce(fn, threshold, execAsap)) : this.trigger(sr); };

})(jQuery, 'smartresize');


  $(function () {
        createDatePicker('date_1');

         $(window).smartresize(function () {
                setDatePickerWidthAndHeight();
            }, 200);
    });

I found the link in the answer of this post: window.resize in jquery firing multiple times

Thanks!