与Mobiscroll问题 - orientationchange和访问地址栏崩溃一些移动浏览器 [英] Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers

问题描述

原标题，但过长的帖子： ASP.NET MVC 4，剃刀，JQuery的，JQueryMobile，与Mobiscroll问题 - 。orientationchange和访问地址栏崩溃一些手机浏览器更改滚轮宽度和高度没有在某些手机上正常工作

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."

崩溃问题上Android 2.1的发生。 它不会发生在iPhone，HTC EVO 4G LTE或其他HTC的。

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

更改滚动条的宽度和高度不会对HTC的工作。如果我改变为横向然后卷轴是相同的大小，因为它应该在的画像。如果我改回为纵向则滚动​​条是它应该是横向的尺寸。

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.

下面是JQuery的/ Mobiscroll code：

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);
        });
    });

我包括@section脚本，这些脚本{}这是在页面（不知道这是有关）的底部呈现。

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

任何帮助将是AP preciated。

Any help would be appreciated.

推荐答案

原来的问题是，旧的Andr​​oid手机不一样的resize事件上面写的方式....和较新的手机不喜欢orientationChange事件。在code这个链接使一切工作完美：

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处理程序/

这里是我如何使用的：

//
// 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);
    });

我发现这个职位的答案的链接：<一href="http://stackoverflow.com/questions/6658517/window-resize-in-jquery-firing-multiple-times">window.resize jQuery中发射多次

谢谢！

这篇关于与Mobiscroll问题 - orientationchange和访问地址栏崩溃一些移动浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！