Проблемы с Mobiscroll - сбой ориентации и адресной строки в некоторых мобильных браузерах
Оригинальное название, но слишком длинное для публикации: "ASP.NET MVC 4, Razor, JQuery, JQueryMobile, проблемы с Mobiscroll - изменение ориентации и адресная строка доступа приводят к сбою некоторых мобильных браузеров. Изменение ширины и высоты скроллера не работает на некоторых телефонах".
Проблема сбоя происходит на Android 2.1. Такого не бывает на iPhone, HTC EVO 4G LTE или других HTC.
Изменение ширины и высоты скроллера не работает в HTC. Если я перейду в альбомную ориентацию, размер скроллера будет такого же размера, как и в портретной ориентации. Если я верну его обратно в портретный режим, то размер скроллера будет таким, каким он должен был быть в альбомной ориентации.
Вот код JQuery/Mobiscroll:
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 scripts {}, который отображается внизу страницы (не уверен, что это актуально).
Любая помощь будет оценена.
1 ответ
Выяснилось, что проблема заключалась в том, что старым телефонам Android не нравилось событие изменения размера, как это было написано выше.... а новым телефонам не нравилось событие directionalchange. Код по этой ссылке заставил все работать отлично:
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
И вот как я это использовал:
//
// 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);
});
Я нашел ссылку в ответе этого поста: window.resize в jquery, стреляя несколько раз
Спасибо!