Jump to content

memed

User
  • Posts

    7
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by memed

  1. А мне очень-очень-очень понравилась открытка №8. Я бы на нее бесконечно смотрела)))) Большое спасибо организаторам, участникам и всем, кто голосовал!!!! Всех с наступающим Новым годом!!!
  2. Вот моя работа: http://jsfiddle.net/memed/snuu2/embedded/result/ Открытка выполнена только при помощи css и без использования картинок (хотя картинки и разрешены условиями конкурса).
  3. Вот мои монстры: http://jsfiddle.net/memed/GPBTP/1/ http://jsfiddle.net/memed/YLHhz/1/ http://jsfiddle.net/memed/2K6cC/1/
  4. У меня получилось следующее решение: Оказывается, что если повесить обработчик на ивент 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-ом.
  5. Я проверила демо из статьи на хабре - баг все равно присутствует. Чтобы было понятнее о чем я говорю, можно посмотреть . Там показаны на андроиде 2.3 сайти твиттера, сайт, над которым я работаю, и демо пример со статьи. Видно, что хедер иногда "прилипает" к пальцу при скролле.Прошу прощение за качество видео, но лучше камеры под рукой не нашлось.
  6. Доброго время суток. Подскажите, пожалуйста, кто сталкивался со следующей проблемой в верстке под андроид и айфон: необходимо сделать, чтоб при скролле хедер всегда находился в верхней части экрана. Казалось, что нет ничего проще - достаточно поставить position: fixed; top: 0. Но iOS4 не поддерживает данное свойство. При использовании плагина iScrool 4 возникаю проблемы с галереями, которые хочется листать перетаскиванием пальцев. С Hammer-ом получилось тоже самое. Еще как вариант jQuery Mobile, но тоже есть минусы: при зуме хедер всегда прилеплен к левому краю экрана и увидеть его целиком никак нельзя. Сейчас я деаю хедер абсолютно позиционированным и пробую скриптом при начале скролла скрыть хедер, а при окончании скролла отследить положение верхней точки экрана, сделать хедер видемым и задать этот отступ. И вроде все гуд, но на андроид 2.3, 4 (sumsung, htc) и айфоне 4 бывают такие моменты, когда при скролле хедер не пропадает, а "прилипает" к пальцу. как только скролл закончен, то все выглядит хорошо. Такой баг замечен на мобильном твиттере. И такая же беда проявляется, если использовать jQuery Mobile (на ихнем сайте можно посмотреть). Может кто-то подскажет рецепт фиксированого позиционирования? Или лечения проявления скрытых элементов при скролле? последнее еще просматривается после закрытия выпадающих меню
  7. Нашла хорошую статью (правда css-ос там не ограничивается). Мне она помогла. Может еще кому-нибудь пригодиться.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy