memed

А мне очень-очень-очень понравилась открытка №8. Я бы на нее бесконечно смотрела)))) Большое спасибо организаторам, участникам и всем, кто голосовал!!!! Всех с наступающим Новым годом!!!

Вот моя работа: http://jsfiddle.net/memed/snuu2/embedded/result/ Открытка выполнена только при помощи css и без использования картинок (хотя картинки и разрешены условиями конкурса).

Вот мои монстры: http://jsfiddle.net/memed/GPBTP/1/ http://jsfiddle.net/memed/YLHhz/1/ http://jsfiddle.net/memed/2K6cC/1/

У меня получилось следующее решение: Оказывается, что если повесить обработчик на ивент 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-ос там не ограничивается). Мне она помогла. Может еще кому-нибудь пригодиться.