логин: 
<< предыдущая заметкаследующая заметка >>
11 апреля 2010
разобрался с Оперой и глюками

Рассказываю.

Задача: определить размер видимой части окна браузера.
Решение, предлагаемое во всех методичках, основано на двух методах измерения (в примере a и b), и выбор делается в зависимости от типа браузера:

function getWinH(){
var a=document.body.clientHeight;
var b=document.body.parentNode.clientHeight;
if(window.opera) return a;
return document.compatMode=='CSS1Compat' ? b : a;
}

Это не работает. Почему? Потому что есть некоторые Оперы непредсказуемы, и вместо высоты видимой части экрана выдают полную высоту всей невидимой страницы. Ставим для случая Оперы идиотскую проверку, какой из параметров тупо меньше (предполагая, что страница большая и имеет прокрутку), и тогда все начинает работать:

function getWinH(){
var a=document.body.clientHeight;
var b=document.body.parentNode.clientHeight;
if(window.opera) { return a>b ?b:a; }
return document.compatMode=='CSS1Compat' ? b : a;
}

Умнее, извините, не получилось.

PS: Только не говорите мне, что вместо этих несчастных трех строчек я должен поставить чемодан говна jQuery :)

Пробуем:


MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101451.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101453.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101454.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101455.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101457.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101458.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101459.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101462.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101466.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101467.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101468.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101469.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101477.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101483.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101485.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101486.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101487.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101489.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_010420101490.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101491.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101497.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101499.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101500.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101504.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101505.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101506.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101508.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101509.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101510.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101511.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101515.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101516.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101518.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101520.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_020420101523.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101527.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101534.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101535.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101536.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101537.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101538.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101541.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101545.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101546.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101547.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101549.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101550.jpg MODULE NOT FOUND: FOTO0: /dnevnik/2010/04/Roscon_030420101551.jpg
<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
архив понравившихся мне ссылок
Оставить комментарий
Windows Opera
1
0
Вроде правильно показывает.
Windows Opera
0
0
[email protected] (217888993625)
Oprea - normal
Windows Opera
0
0
Wot (#83640)
Глючит в комментах распознование html при наличии знака меньше.

Например в Prototype:
document.documentElement.clientHeight
если опера меньше 9.5
document.body.clientHeight
если webKit и не некий doc.evaluate
document.clientHeight
Linux Firefox
 Москва
0
0
А где-то это можно увидеть в виде волшебной формулы?

опера меньше 9.5... вот ведь мерзавцы! и как это узнать?

а webKit - это похоже мой мобильник, кстати.
Windows Opera
0
0
Wot (#83640)
В исходниках.
Windows Safari Chrome
0
0
Леонид, скажите честно, это который раз за время разработки движка, когда Вы сталкиваетесь с глюками в реализации js в отдельных браузерах, с которыми надо разбираться более минуты?
Linux Firefox
 Москва
0
0
Думаю, около 20% работы над движком я потратил на JS. Сколько из этих 20% были связаны именно с кроссбраузерностью - не помню, наверно процентов 8.
Windows Safari Chrome
1
0
А теперь переведите эти 8% в часы, и вспомните, что прочая разработка js тоже сократится минимум раза в 2. Кроме того, с учётом удобной сериализации параметров можно было немного выиграть на разработке движка.

И это в никуда потраченное время исключительно из-за нежелания использовать удобные библиотеки...

PS Спасибо за хороший ответ.
Linux Firefox
 Москва
0
0
Знаете, я как-нибудь переживу 8% времени :) Это как-то гораздо лучше 80% времени на изучение принципов и примеров работы с чужим софтом, чтобы затем всю жизнь таскать с собой чужой чемодан, начинка которого тебе неизвестна :)
Windows Safari Chrome
0
0
Ну почему всю жизнь? Через 5-10 лет и js будет другим, и другие библиотеки появятся, и другие нужды...

А документация jQuеry очень простая и понятная, в режиме справочника с конкретными примерами работы (что для js не существует в принципе). Кроме того, есть удобные сайты для упрощения работы с документацией, например:
http://jqapi.com
Linux Firefox
 Москва
0
0
Ага, уже бегу учить английский язык.
Windows Safari Chrome
0
0
Леонид, это необходимая вещь для программиста - умение читать документацию на английском без особых трудностей...

Кроме того, в случае документации jQuеry примеры достаточно подробны, что можно не читать текст, ограничиваясь аннотацией.
Linux Firefox
 Москва
1
0
Так я и не программист, я фантаст ;)
Windows Firefox
0
0
lleo.me/[email protected] aka Mem0
А что должно получиться - то?
В Фаерфоксе появляется полоса прокрутки... =(
Linux Ubuntu Firefox
0
0
Andrey Pozdnyakov
Ага!
Так вот оно как должно быть.
Тогда, раньше и в Фаерфоксе не работало правильно.
Windows Firefox
0
0
lleo.me/[email protected]С.
Вертикальные фотки в Фаерфоксе не влезают в окно, просто аккуратненько располагаются за пределами (сверху и снизу) текущего окна. Если поскроллить, то видны нормально. А раньше вроде делался ресайз под окно?

FF 3.6.3, разрешение экрана 1680x1050, размер полного окна браузера 1680x1019, размер окна браузера для отображения страницы 1672x823.
Linux Firefox
 Москва
0
0
Не, ну ресайз фоток под окно - это как-то глупо, мне кажется.
Windows Firefox
0
0
lleo.me/[email protected]С.
По идее, наоборот. Какая мне радость от того, что фотка открылась у меня прямо в окне, если я должен скроллить экран, чтобы разглядеть ее целиком? А если кто-то, используя этот движок, выложит фотографии с 10-мегапиксельной камеры без ресайза?

Обычно такой просмотр реализуют именно в качестве предварительного, а уж если фото приглянулось, то либо сразу сохраняют на диск, либо открывают в новом окне/табе, где ничего кроме самой фотографии нет, и скроллинг отвлекать не будет.

Кроме того, нельзя щелчком по фотографии перейти к просмотру следующей (что безусловно позволяют все эти галерейные приблуды, вроде пресловутого jQ). А в результате всех этих прокруток я теряю место, на котором закончил смотреть «галерею» на странице. Если бы фото уменьшалось под экран, я мог бы хотя бы мышь держать на месте прежнего щелчка.
Windows Safari Chrome
0
0
Что характерно, jQuеry этого не умеет, и не для этого нужен. Конечно, есть плагины сверху, например, flexbox, но это совсем не часть jQuеry.

Что касается ограничения отображения картинки по размеру экрана - подписываюсь, оно весьма полезно и нужно.
Linux Firefox
 Москва
0
0
Мне кажется, пришло время наладить фильтр jQuery как следует. Скоро уже чихнуть будет нельзя, чтоб тебе тут же не предложили носовой платок с логитипом jQuery, либо сообщили, что jQuery пока, к сожалению, проблему чихания не обрабатывает ;)
jQ хорош для двух вещей: анимации и AJAX. Если сделать второе своими руками, то польза от всех (подчёркиваю) чемоданов сводится к анимации. Оно, конечно, круто, когда окна не просто появляются, а вылетают, но во-первых, это тоже можно сделать самому (opacity существует в CSS), а во-вторых, этого вообще можно не делать.
Почему люди советуют, так это потому что никто не хочет делать своими руками AJAX и анимацию. В фотогалерее анимация - это красиво, но может так затормозить старенький браузер на маломощном компе, что юзер взвоет.
Nokia-E90 Safari
 Москва
0
0
LLeo Nokia (#3043)
+100
К этому могу лишь добавить, что отличная кроссбраузерная процедура opacity в коде движка присутствует давно, но НЕ ИСПОЛЬЗУЕТСЯ. Почему? Не нашлось ей применения. Анимацию и эффекты - как-то глупо строить, это производит впечатление, а повседневно работать неудобно. Да и где в движке анимация нужна? Окошки комментариев вываливать как улыбку Чеширского кота? :)
Примерно так, да. Хотя перетаскивание этих окошек всё-таки стоит отладить.
Ещё забыл: jQ любят неоправданно пихать за его удобное обращение к тегам, классам и id: $("#id"), $(".class") и $("tag"). За это его ставят даже там, где не надо.
Linux Firefox
 Москва
0
0
Ну, я на этот счет сделал себе процедуру idd('id_metka'), и пока для всех задач, с которыми я сталкивался, ее хватало.

А насчет классов и тэгов - может, я многого еще не знаю в этой жизни, но мне сложно представить задачу, когда нужно обработать не конкретный объект, а классы... "Сделать все комментарии зелеными"? :)
Windows Safari Chrome
0
0
>мне сложно представить задачу, когда нужно обработать не конкретный объект, а классы

Самый простой и жизненный пример - сделать галерею из набора шаблонизированных элементов. В вашем случае - задать выдачу просто набора картинок со ссылками на большие картинки, которые по классу подменяют открытие картинки на всплывающее окно. Кроме того, так можно сделать листание между всплывающими окнами, что есть во всех приличных галереях.
Я использую в простейшем случае, для анимации. То есть, скрыть\показать все блоки с таким-то классом.
Ещё в jQ есть куча других полезных фич, вроде .text() и .html(), которые позволяют получать текст и HTML-содержимое блоков. Я сейчас делаю игру с помощью этого движка, всё удобно и красиво.
Windows Safari Chrome
0
0
Вы ещё упускаете удобные селекторы типа :odd, :hidden, :has, :eq, :last, селекторы форм, очень удобная работа с детьми/родителями/братьями (даже
эта простейшая вещь в обычном js нифига не кроссбраузерна). Что характерно, всё перечисленное приходилось применять в реальных проектах.
Windows Safari Chrome
0
0
>jQ хорош для двух вещей: анимации и AJAX

Не только. Ещё очень удобными селекторами, сериализатором форм, удобной работой с DOM, удобной работой с event'ами, удобным получением и изменением css параметров, удобным получением прочих параметров, типа размеров блока и прокрутки. Да, я знаю, что многое из этого есть в js, только там в разных браузерах всё работает слишком по разному, а в отдельных особо одарённых браузерах просто отсутствуют нужные функции.

Что характерно, несмотря на то, что jQ используется большей частью для всяческих свистелок и перделок, он оказывается безумно удобен в других вещах. Из интересного, мне однажды очень пригодилась там функция globalEval, работающая как eval, но в глобальном контексте.
Windows Safari Chrome
0
0
Леонид, может, дело в том, что при чихании полезно использовать носовой платок? ;)
Linux Firefox
 Москва
0
0
Да-да! Чемодан на колесиках с мигающими носовыми платками, свободно выезжающим комплектом складных простыней, подушка-аэрозоль со встроенным компасом и щипцы для обжима кошачьих яиц. В упакованном виде всего 18 килограмм! Теперь чихать стало гораздо удобнее!
Windows Safari Chrome
0
0
Ваш сарказм смотрится особенно прелестно на фоне того, что в этом движке Вы таскаете с собой как минимум чемодан с платками и свободно выезжающим комплектом простыней...
Linux Firefox
 Москва
0
0
Вы про те 7кб вспомогательных процедур? ;)
Windows Safari Chrome
0
0
Я про 24.5Кб JsHttpRequest.js
Windows Firefox
0
0
lleo.me/[email protected]С.
Конечно же вы правы, я неточно выразился — «галерейные приблуды, основанные на jQ».
Мы используем FancyBox, скажем.
Linux Firefox
 Москва
1
0
Все оказалось на удивление просто. Сделал.
Windows Firefox
0
0
lleo.me/[email protected]С.
У меня все стало отлично рисоваться в FF и IE8, спасибо!
Linux Firefox
 Москва
0
0
Это как-то оказалось совсем просто: свойство .width доступно из JS, я его проставляю и вызываю перепозиционирование.

Кстати, через это свойство думаю позже сделать и эмуляцию onload для тех браузеров, где img onload не работает. Просто периодически его проверять, как изменилось - значит, подгрузилась картинка и пора ее позиционировать. Или хрен с ними, с дурацкими браузерами?
Windows Firefox
0
0
lleo.me/[email protected]С.
Ой, а в каких браузерах не работает img onload? Это же должно быть что-то совсем древнее? Или это снова какой-нибудь билд Оперы отжигает?

Леонид, если вы в настроении попрограммировать ;о) может, кинете взгляд?
http://lleo.aha.ru/blog/2010/02/03_02.html#2275
Ну реально напрягает курсор вертикального ресайза. Машинально мышку отдергиваешь, потому что и в винде-то лучше ничего без нужды не ресайзить, а то там до сих пор интерфейсы бывают очень кривые, а уж в браузере границы фреймов двигать — нафиг-нафиг.
Linux Firefox
 Москва
2
0
Например - моя Opera 9.63 Linux - не отрабатывает onload на img.

Что касается курсоров - надо вообще менять систему. Очень неудобно стало пользоваться голосовалкой, и даже смотреть на нее не получается, мимо взгляд проходит. Думаю, надо вернуться к системе кнопок "жжоте", "гоните", а результаты указывать как прежде крупно и наглядно.
Windows Safari Chrome
0
0
Тоже в ряде случаев использую fancybox. Однако, для своих проектов рекомендую simplebox - он заметно проще и шире настраивается, и побыстрее работает.
Linux Firefox
 Москва
0
0
"jQuery не умеет..."
Шо там блять уметь-то? Две новые строчки вставил:

var H=(getWinH()-20); if(e.height>H) { e.height=H; posdiv('bigfoto',-1,-1); }
var W=(getWinW()-50); if(e.width>W) { e.width=W; posdiv('bigfoto',-1,-1); }
Windows Safari Chrome
0
0
Речь шла о "галерейных приблудах", к коим комментатор по загадочной причине причислял jQuery.

За масштабирование - спасибо.
Linux Firefox
 Москва
0
0
Вот пример галерейной приблуды, установленной поверх сами-знаете-какого движка:

http://bsdpro.ru/portfolio.html

Люди рады. А мне - не нравится, у меня дико тормозит, мигает и делает просмотр фоток некомфортным. Хотя движок мой, и поставилось в него легко.
Windows Safari Chrome
0
0
prototype+lightbox. Чисто технически, он легко меняется до любого вида, в том числе удобного Вам - без затенения фона и с моментальным открытием/изменением элемента галереи. С небольшим доведением до ума - ещё и станет сразу отображать элементы навигации.

Самое приятное в том, что при использовании библиотек типа prototype или jQ сам код таких галерей становится простым и понятным, и их доведение до нужного состояние становится удобным и быстрым.

Так что не вижу причин для критики.
Linux Firefox
 Москва
0
0
Наверно это тогда вопрос к местным знатокам типа hkm - а есть ли у объекта img управляемое от JS поле height? Или у img бывает атрибут max-height? Если есть - не проблема сделать.
В вашем вопросе - 90% ответа на него. Это очень высокий уровень :-)

PS. Предлагаю сделать модуль "антиматериализатора" для комментов. Заменять, например, "библиотека -> ЕдРо, ее имя -> Путин В.В"
Linux Firefox
 Москва
0
0
:)))

Ну это вписывается просто в /include_sys/spamoborona.php :)
Windows Opera
0
0
del me pls
Windows Opera
0
0
В одном юзерскрипте для одного сайта один человек сделал так: если картинка не влезает в экран, она ресайзится. А по ctrl+click можно посмотреть оригинальный размер.
Linux Firefox
 Москва
0
0
Да. Шорткеи я буду делать отдельно.
Windows Firefox
1
0
Ivan (#141224)
Чего-то не работает "сообщение об очепятках" придется писать так.
Фраза:
"Потому что есть некоторые Оперы непредсказуемы,"
Надо
"Потому что некоторые Оперы непредсказуемы,"
или
"Потому что есть непредсказуемые Оперы ,"
Windows Firefox
1
0
Ivan (#141224)
Да неработающие опечатки под браузером Firefox/3.6.3
Linux Firefox
0
0
Винтер (#4790)
Подтверждаю баг.
Linux Firefox
 Москва
0
0
Это не баг, это курсив. Опечатки работают только с местами текста, где нет разметки.
Linux Firefox
 Москва
0
0
Это не баг, это курсив. Опечатки работают только с местами текста, где нет разметки.
> Только не говорите мне, что вместо этих несчастных трех строчек я должен поставить чемодан говна j Query :)

Три строчки здесь, три строчки там, три строчки в дргом месте... ;)


Кстати, в форме отправки комментария я не могу никуда переместить курсор, он постоянно перепрыгивает в конец строки. Правда, возможно, это проблема только в Safari 4 под МакОСью

всего комментариев: 66

<< предыдущая заметка следующая заметка >>