Никогда не работал с contentEditable, но решение интересное. Насколько я знаю там есть определенны, скажем так, особенности работы с последующим value этого блока. Например перевод строки превращается в еще один <div>...</div>. Отсюда возможно будут последующие сложности с передачей данных на сервер, нужно писать какой-то парсер. Ну это лишь мои предположения.
Ну если чуть подробнее, то viewport мы получаем как-то так
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
Дальше узнаем насколько документ проскролен от top и left плюс высота и ширина veiwport'a соответственно и сравнивая с позицией элемента получаемой по функции выше можно узнать попал он во viewport или нет.
@smanioso Например, в ваших скриптах есть window.onload, ну например критичный. Однако вы используете CDN гугл со скриптом jquery или шрифтами или еще чем-нибудь. Так вот, страница у вас загрузиться, так работают современные браузеры и они это "проглотят", однако висящий запрос к гловскому CDN не даст сработать событию onload, это тормозит загрузку. К тому же не знаю как ведут себя мобильные браузеры, плохое соединение и тд. Я в целом хочу изучить вопрос.
@smanioso Да меня честно говоря не особо пугает, что у меня что-то не загрузиться и мне надо будет это брать с локальной копии. Висящий запрос блокирует window.onload например. Из решений нашел подобное - www.phpied.com/non-onload-blocking-async-js Любопытное решение.
Я так понимаю это в первую очередь спасает меня от того, чтобы я вообще не остался без jQuery в случае чего, но запрос так и будет висеть и тормозить работу.
@twixoff ну вы бы хоть читали другие ответы прежде чем писать :( Нельзя просто так сделать класс для скрытия с display: none; так как оно применяется мгновенно и анимации просто не произойдет.
@BelkinVadim При показе это естественно, а вот в вашем примере он остается и после того как стал прозрачным, что как бы плохо. Только display: none; полностью скрывает отображение элемента на странице.
@BelkinVadim вы допускаете примерно такую же ошибку. Элемент прозрачный, но не скрытый - uimages.ru/img/6kmsacqcck.png Хотя по нему и не получается кликнуть и событие вряд ли сработает, сролл появляется и место он занимает. В общем единственным правильным решением это будет обработка событий по завершению анимации, как-то так — jsfiddle.net/Zvyxd/8
@DeLaVega Дело в том, что у css анимации есть колбэк — www.sitepoint.com/css3-animation-javascript-event-... , но как-то не хочется. Суть вопроса в том, чтобы это было так же просто как и с показом. А в FireFox и правда не работает без префиксов -moz, я написал только для -webkit. И кстати нативная анимация на css на много быстрее и плавнее нежели js, просто не хочется вешать обработчики на события по анимации, но видимо придется. Кстати события есть как и для анимации (onAnimationEnd) так и для transition (onTransitionEnd).
@DeLaVega то что вы предлагаете не скрывает элемент, а делает его прозрачным. Он остается на своем месте, по нему можно будет кликать, будут срабатывать события и так далее. Все эти танцы с дополнительными классами я знаю, а так же можно ловить событие onAnimationEnd и в конечном счете скрывать его, но это решение не такое простое, как с показом элемента.
Да и к слову я видел реализации когда сайт намеренно оборачивается в iframe с тем же document для создания иллюзии ajax, при этом iframe'у атрибут src вообще не назначался, но к сожалению код сильно обфусфирован и разобраться не получилось, что к чему.
<div>...</div>. Отсюда возможно будут последующие сложности с передачей данных на сервер, нужно писать какой-то парсер. Ну это лишь мои предположения.