-
Posts
7 -
Joined
-
Last visited
-
Days Won
1
Content Type
Profiles
Forums
Calendar
Store
Posts posted by memed
-
-
Вот моя работа: http://jsfiddle.net/memed/snuu2/embedded/result/
Открытка выполнена только при помощи css и без использования картинок (хотя картинки и разрешены условиями конкурса).
- 6
-
-
У меня получилось следующее решение:
Оказывается, что если повесить обработчик на ивент scroll, то в андроиде выполнение происходит не сразу, а с некоторой задержкой. Для того, чтоб это поправить, я отслеживаю ивент touchstart, который является стандартным для Android и iPhoe, и вешаю на дополнительный обработчик. Но при этом нужно отличить такие ивенты как просто прикосновение (touch) и прикосновение при скролле (scroll). Также, было бы не плохо, чтоб пользователь мог убрать хедер, когда ему это нужно, просто тачнув в любом месте контента (кроме самого хедера). Результатом является следующий код:
var touchT = 0, //тригер touch или scroll
posHdr = 1; // тригер скрыт/виден хедер
document.addEventListener('touchstart', function(event) {
if ( event.target.nodeName == 'A' || $(event.target).closest('.header').length) //список элементов при прикосновении к которым сценарий действий не должен меняться
return;
touchT = 1; // произошел touch
$('.header').css({top: '0'}); // скрывается хедер
setTimeout(function() { // если через 0,75с не произошел scroll, то выполняется тригер touch
if (touchT == 1)
$(document).trigger('touch');
}, 750);
}, false);
$(document).bind('touch', function() {
if( posHdr == '1' ) { // если хедер виден
$('.header').css({top: '0'}); // скрывается хедер
posHdr = 0; // хедер скрыт
} else {
$('.header').css({top: $(window).scrollTop()+'px'}); // новое положение хедера
posHdr = 1; // хедер виден
}
});
window.onscroll = function() {
touchT = 0; // произошел scroll
if( posHdr == '1' ) { // если хедер виден
clearTimeout(timered); // останавливается отсчет времени для выпленения функции, повешеной на touch
$('.ui-header').css({top: '0'}); // скрывается хедер
var scrlTop = $(window).scrollTop(); //расчет нового положения хедера
timered = setTimeout(function() {$('.ui-header').css({top: scrlTop + 'px'}); }, 500); //чтоб избежать мигания, хедер появляется чрез пол секунды
}
};Еще причиной "залипаня" и отображения скрытых элементов при скролле в андроиде 2.3 может быть испоьзование css свойтва translate3d. В моем случае это была галлерея. Пришлось именно для андроида 2.3 заменить это свойство animate-ом.
-
Я проверила демо из статьи на хабре - баг все равно присутствует.
Чтобы было понятнее о чем я говорю, можно посмотреть
. Там показаны на андроиде 2.3 сайти твиттера, сайт, над которым я работаю, и демо пример со статьи. Видно, что хедер иногда "прилипает" к пальцу при скролле.Прошу прощение за качество видео, но лучше камеры под рукой не нашлось.
-
Доброго время суток.
Подскажите, пожалуйста, кто сталкивался со следующей проблемой в верстке под андроид и айфон:
необходимо сделать, чтоб при скролле хедер всегда находился в верхней части экрана. Казалось, что нет ничего проще - достаточно поставить position: fixed; top: 0. Но iOS4 не поддерживает данное свойство. При использовании плагина iScrool 4 возникаю проблемы с галереями, которые хочется листать перетаскиванием пальцев. С Hammer-ом получилось тоже самое. Еще как вариант jQuery Mobile, но тоже есть минусы: при зуме хедер всегда прилеплен к левому краю экрана и увидеть его целиком никак нельзя.
Сейчас я деаю хедер абсолютно позиционированным и пробую скриптом при начале скролла скрыть хедер, а при окончании скролла отследить положение верхней точки экрана, сделать хедер видемым и задать этот отступ. И вроде все гуд, но на андроид 2.3, 4 (sumsung, htc) и айфоне 4 бывают такие моменты, когда при скролле хедер не пропадает, а "прилипает" к пальцу. как только скролл закончен, то все выглядит хорошо. Такой баг замечен на мобильном твиттере. И такая же беда проявляется, если использовать jQuery Mobile (на ихнем сайте можно посмотреть).
Может кто-то подскажет рецепт фиксированого позиционирования? Или лечения проявления скрытых элементов при скролле? последнее еще просматривается после закрытия выпадающих меню
-
Нашла хорошую статью (правда css-ос там не ограничивается). Мне она помогла. Может еще кому-нибудь пригодиться.
- 1
Лучшая новогодняя открытка
in Contests
Posted
А мне очень-очень-очень понравилась открытка №8. Я бы на нее бесконечно смотрела))))
Большое спасибо организаторам, участникам и всем, кто голосовал!!!!
Всех с наступающим Новым годом!!!