Затенение страницы перед выводом "лайтбока"

[LShadow77]

Ещё раз здравствуйте!

Сейчас пытаюсь реализовать эффект затемнения страницы полупрозрачным блоком DIV, полностью покрывающим тело документа.

Т.е., добавляется элемент DIV с id="DocShade", большим значением z-index и position:absolute;left:0px;right:0px. атрибутам width и height соответственно присваиваются величины max(scrollWidth,clientWidth) и max(scrollHeight,clientHeight), взятые у document.documentElement или document.body (в зависимости от compatMode).

Когда происходит изменение размеров окна, обработчик onresize выполняет следующие действия:

  1)временно скрывает блок, чтобы исключить его из размеров документа: Shade.style.display="none";

  2)изменяет размеры блока в соответствие с новыми размерами документа;

  3)снова активизирует блок: Shade.style.display="block";

В FireFox всё прекрасно работает!

В Internet Explorer 8 пункт (1) не прокатывает ((((!!!! При изменении размеров окна документа, его рабочая область растягивается по ширине и высоте до предела, так как размеры покрывающего блока из расчётов не исключаются (шоб Бил застрелился!)

То есть, вот так отображается в FireFox - правильно:

А вот, как в IE8:

Помогите, пожалуйста, решить эту проблему!

И да, вот собственно сам html:

P.S. в java я ещё больший новичок, чем в html (стаж - три дня).

Edited November 27, 2012 by LShadow77

[npofopr]

Чем вам готовые скрипты не нравятся?

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

Хотя, если пишете что то, то видимо знания есть, а раз есть, то возьмите готовое решение и разберите его код.

[LShadow77]

Чем вам готовые скрипты не нравятся?

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

Для того, чтобы разобраться, как работает код, надо его написать. В этом и состоит моя цель - практика.

Хочу понять, как сделать что-то реально работающее (и кросброузерное естественно) своими руками, не прибегая к сторонним костылям ака jquery и проч. (костыли нужны профессионалам).

Хотя, если пишете что то, то видимо знания есть, а раз есть, то возьмите готовое решение и разберите его код.

Я новичок в html/javascript, но отнюдь не в программировании. Так что в этом мне проще.

Готовая реализация ещё не гарантирует решения всех проблем. Тот же LightBox, например, полностью развалился в самом эксплорерном из эксплорернейших.)) К тому же, в чужом коде, зачастую, сам чёрт может ногу сломать...

[npofopr]

Не знаю, что у вас там ломается. Вообще они пишут, какие браузеры поддерживают.

Опять же не понятно, зачем писать на форум, если вы изучаете. Ну это мое мнение.

Проще литературу сперва читать

Ну да ладно. Пойду пирожки печь) Может гуру подскажут)

[LShadow77]

Естественно, качественная литература - №1 при изучении чего-либо. На втором месте - гугл. Но один хороший ответ хорошего специалиста на форуме может избавить от многих долгих часов поиска (не всегда результативного, между прочим). Для этого форумы и существуют. Тем более часто бывает, что задачу нужно решить как можно быстрее и нет времени на последовательное и вдумчивое обучение.

По-этому у меня большая просьба - если вы можете предложить конкретное решение, то я буду очень признателен. Если нет, то не надо, пожалуйста, засорять тему.

P.S. Приятного аппетита

[npofopr]

Вы лучше запостите тему в javascript. Она чуть ниже. Просто возможно некоторые гуру контролят только свой раздел.

У вас тут я бы не сказал, что совсем уж для начинающих.

[LShadow77]

npofopr

Пожалуй, вы правы. Закину и туда удочку...

[Vadimka]

а не проще всё решить с помощью css только?? js зачем то подключил для изменения размера. div с

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background: #222;

http://jsfiddle.net/KzwW8/

и всё, у тебя див с размерами окна, растягивай, сжимай, всё равно заполнит всё, и при скролинге всё хорошо

работает до IE7, на 6 на всю высоту не тянет.хотя поддержка IE6 сейчас нахер уже не нужна

Edited November 28, 2012 by Vadimka

[npofopr]

а не проще всё решить с помощью css только?? js зачем то подключил для изменения размера. div с

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background: #222;

http://jsfiddle.net/KzwW8/

и всё, у тебя див с размерами окна, растягивай, сжимай, всё равно заполнит всё, и при скролинге всё хорошо

работает до IE7, на 6 на всю высоту не тянет.хотя поддержка IE6 сейчас нахер уже не нужна

Извините, но каким местом ваш пример похож на всплывающее окно?

Вот лайт боксы на css: раз, два.

[Vadimka]

ну я на счёт затемняющего фона для лайтбокса, какой смысл использовать скрипт для определения размера окна и высчитывания и тд. когда можно задать всё в css, разве так лучше?

[LShadow77]

В этой теме я поднял вопрос только про динамическое затемнение окна перед тем, как появится лайтбокс, при чём, чтобы корректно работало во всех броузерах, включая пресловутый IE. Сам лайтбокс пока что не рассматриваю.

Действительно, на первый взгляд проще задать в CSS: "position:fixed; left:0px; top:0px; width:100%; height:100%;" и красота, работает во всех нормальных броузерах. Но только не в IE8 (и-да-гореть-билу-гейцу-в-линуксовом-аду-во-веки-веков-аминь)! Т.к. атрибут fixed оно не поддерживает. И вообще, за этот короткий период освоения html/css, я уяснил, как мне кажется, суть проблемы кроссброузерности: "...кроме/только не в IE", "IE игнорирует...", "IE неверно отображает...", "IE не поддерживает...", "в IE всё не так", "гуманоиды рулят". Решение всех бед: на территории стран СНГ IE запретить к использованию, за нарушение - ПЖ! Увы, только в мечтах.

Приведённый скрипт хоть как-то работает в эксплорере. Осталось только выяснить, как заставить IE пересчитывать размеры страницы без учёта заданного элемента (в данном случае, блока DIV).

И вот некоторые мои соображения. Если написать Shade.style.display="none"; или ч.л. подобное, то мозила/опера немедленно изменяют это свойство в DOM. В IE этот процесс, по ходу, асинхронный. Присвоение свойства атрибуту происходит не в момент интерпритации соответствующей строки скрипта, а хз когда. Может через какое-то время, по таймеру. А может даже, только после возврата из функции. Всё для увеличения производительности, естественно, но по-этому и не срабатывает.

Вот если бы в javascript существовала функция/метод, которая заставляла бы броузер немедленно применять все сделанные изменения к дереву DOM, то это могло бы стать решением.

Но, возможно или скорее всего, я тут ошибся. Очень хочется узнать, кто что по этому поводу думает.

P.S. Этот форум в IE6 некорректно отображается, вместо меню - каша!

P.S.2 Оказывается, что в IE7 и IE8 свойство CSS — position: fixed работает только если указать doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»> (это же касается и многих других якобы не поддерживаемых свойств).

Тока мне больше по душе transitional, так что вопрос всё ещё открыт...

Edited November 28, 2012 by LShadow77

[Николя223]

Оказывается, что в IE7 и IE8 свойство CSS — position: fixed работает только если указать doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»> (это же касается и многих других якобы не поддерживаемых свойств).

ну ну ))

[Great Rash]

Надо указывать <!DOCTYPE HTML> и забить на все остальные. Затемнение надо делать при помощи CSS (как ту правильно сказали уже). И забить на написание лишнего JS-кода. Что значит "по-душе"? Надо работать с чем-то не потому что так больше нравится или нет, надо работать с теми инструментами, которые дают наибольший профит за короткое время.

Но конечно если вы предпочитаете извращения, то используйте transitional. Тогда вам следует поискать «javascript определение размеров документа» в Google.

Решайте проблемы по мере из поступления, возможно вам поможет в этом план, составленный на бумажке. Что-то типа такого:

1) определить размеры окна

2) создать затемняющий элемент

3) изменить его opacity

4) по окончании изменения opacity отобразить что-то

Вот и начните с первого пункта.

[Николя223]

вот вот))

на той картинке просто доктайп и всё работает в IE7... А вот если доктайп убрать... это уже другой разговор =))

[LShadow77]

...или просто забить на некоторые не бросающиеся в глаза несуразности IE, скрипт-то уже написан. А этот глючок в эксплорере проявляется только, если начать специально изменять размеры окна и скролить его.

Пока остановился на таком решении, раз другого не остаётся.

А за ответы спасибо. Если будут ещё идеи - пишите.