Хитрый вопрос знатокам

Konstantin S. · №1

Добрый день.

Возникла такая простая на первый взгляд задачка:
(Сразу скажу, что под Browser control я понимаю сам ActiveX Мозиллы для отображения страницы)

Есть окно, в котором находится наверху тулбар с кнопками, а ниже -- Browser.
В браузер загружается страница. Интересно, можно ли сделать таким образом, чтобы
при скроллинге страницы вниз в браузере, она как бы подкладывалась под
полупрозрачный тулбар ?

То есть, сначала мы видим такую картину:

А после того, как подвинули скроллбар вниз, такую:

Компоновка окна должна быть такая, как на рисунке. То есть, на фоне во все окно Browser control, а над ним
полупрозрачное окно с кнопками.

Я рассматривал два варианта реализации:

1. При загрузке HTML страницы сразу же после тэга "body" вставлять прозрачную картину, с высотой, равной высоте тулбара. Проблема в том, что если на странице есть слои с абсолютным позиционированием, то они все равно будут наверху, то есть, под тулбаром.

2. Убрать из браузера скроллбары и реалтзовать их самостоятельно. То есть, приплюсовать к высоте страницы еще высоту тулбара и при скроллинге двигать еще и сам контрол. Проблема заключается в том, что не всегда браузер возвращает корректную высоту страницы в пикселах. Очень часто свойство document.body.clientHeight возвращает 0. Особенно, если страница выполнена полностью на DIV-ах с использованием CSS. Хотя при этом свойство document.documentElement.clientHeight возвращает правильное значение.

Может кто-то знает, как решить такую вот хирую задачку ?

Спасибо.

Отредактировано Konstantin S. (28-06-2006 15:22:14)

rowlad · №2

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

Проблема в том, что если на странице есть слои с абсолютным позиционированием, то они все равно будут наверху, то есть, под тулбаром.

это в связи с чем так будет? выставляй Z-index как твоя душа пожелает

ЗЫ
Или я проблему не догоняю

Отредактировано rowlad (28-06-2006 15:55:55)

Al_H · №3

Если речь идет о блоке, а не панели самого браузера, то

Выделить код

Код:

position: fixed; opacity: 0.6; z-index: 100; width: 100%;

Konstantin S. · №4

Поясню на конкретном примере:

На фоне браузер, сверху полупрозрачный тулбар (окно с альфа-каналом).
Мы загружаем в браузер страницу. Имеем следующую картину:

Мы видим, что верхушка страницы находится под тулбаром и если там есть ссылки,
то на них просто не нажать. Надо сделать так, чтобы верх страницы был под тулбаром.
Для этого мы в HTML код страницы при загрузке вставляем блок, который должен
сместить весь контент на количество пикселей, равное высоте тулбара.
Вот так:

Соответсвенно, когда мы скроллим страницу вниз, ее контент как бы заходит под
полупрозрачный тулбар.
Типа вот такого:

Но беда в том, что если на странице есть слои с position:absolute, то они не подвинутся вниз,
даже если мы вставим новый слой наверх. Они все равно останутся там, где и должны быть.
Вот пример:

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

То есть, ситуация понятна... А вот как ее решить, нет...

Отредактировано Konstantin S. (28-06-2006 16:41:59)

Al_H · №5

Выделить код

Код:

html {margin-top: 100px;}

или

Выделить код

Код:

body {margin-top: 100px;}

или

Выделить код

Код:

body {position: relative; top: 100px;}

Отредактировано Al_H (28-06-2006 17:33:47)

Anton · №6

Если речь идёт о xul, то "плавающую" панель можно сделать из popup'а:

Выделить код

Код:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="window" title="0"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="showpopup();">

    <script type="application/x-javascript">
        <![CDATA[
            var c = 0;
            function showpopup ()
            {
                if (c++ > 3)
                    return; // на всякий случай
                var pp = document. getElementById ("pp");
                pp. showPopup (document. firstChild, 10, 20, "tooltip");
            }
        ]]>
    </script>

    <vbox width="200" height="200">
        <popup id="pp" noautohide="true" onpopuphiding="setTimeout(showpopup,0);">
            <toolbar>
                <toolbarbutton label="l1"/>
                <toolbarbutton label="l2"/>
            </toolbar>
        </popup>
        <button label="clickme" oncommand="alert('test');"/>
    </vbox>

</window>

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

Отредактировано Anton (28-06-2006 19:45:07)

Al_H · №7

В общем, правильно заданный вопрос - это уже половина ответа. Операционная система - Windows? Панелька - от самого браузера, или это элемент внутри веб-страницы? Как она появилась над областью контента?

Konstantin S. · №8

Код:
Выделить код
Код:
html {margin-top: 100px;}
или
Выделить код
Код:
body {margin-top: 100px;}
или
Выделить код
Код:
body {position: relative; top: 100px;}

Не совсем все так просто:
Смотрите, имеем тестовый HTML файл:
(один из слоев абсолютно позиционирован)

Выделить код

Код:

<html>
<body style="border: 1px dashed #999;">
<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>
<div style="background-color: #99F;">NORMAL DIV</div>
</body>
</html>

Вот скриншот в Мозилле:

Теперь начинаем тестить:
(в заголовок страницы начинаем свтавлять код стилей и смотреть, что как)

1. Вариант

Выделить код

Код:

body {margin-top: 100px;}

К такому результату, что "NORMAL DIV" смещается вниз, а вот
"ABSOLUTE DIV" остается на своем месте. Скриншот:

(В других браузерах то же самое)

2. Вариант

Выделить код

Код:

body {position: relative; top: 100px;}

Во всех браузерах одно и то же: ничего не изменилос, кроме как в FireFox:

Стоит обратить внимание, что весь контент сместился вниз, "ABSOLUTE DIV" имеет
начальные координаты, такие же как у "NORMAL DIV". То есть, уже неправильно...

3.

Выделить код

Код:

html {margin-top: 100px;}

Вот, что получается:

Все прекрасно.
В других браузерах (IE, Opera) все то же самое, что в п.1.

Выводы: вроде как, п.3 работает неплохо, и делает то, что надо.
Однако, настораживает тот факт, что только FireFox дает такой эффект.
Остальные браузеры Absolute слои все равно пихают наверх.

Не будет ли проблем с этим будущем ? Можно ли гарантировать, что вариант 3
будет срабатывать для абсолютно любой страницы ?

И еще вопрос: если стиль для "html"
уже задан, то, чтобы его перекрыть надо использовать "!important" на конце ?

Konstantin S. · №9

В общем, правильно заданный вопрос - это уже половина ответа. Операционная система - Windows? Панелька - от самого браузера, или это элемент внутри веб-страницы? Как она появилась над областью контента?

Отвечаю:
1. OS - Windows
2. Панелька -- это плавающее окно, созданное средствами WinAPI, находящееся над окном браузера. Причем, панелька полупрозрачная.

Konstantin S. · №10

Дополнение:
Я потестил этот CSS

Выделить код

Код:

html {margin-top: 100px;}

на куче страниц. Вроде, все работает как часики. Респект Al_H за совет. :beer:
Осталось выяснить два момента:

а) Как перехватить входящий траффик для вставки своего CSS ?
В Internet Explorer есть такая чудная вещица как MimeFilter. А как быть с FireFox ?
(извиняюсь за глупые вопросы, только вот начал ковыряться с Мозиллой)
б) Это точно на 100% работает ?

Al_H · №11

Как вариант:

Выделить код

Код:

body {position: relative; margin-top: 100px;}

В браузерах, в которых не работает margin-top, может сработать padding. Попробуйте, таким образом может найтись универсальный вариант.

Не будет ли проблем с этим будущем ?

Тщательно распланированная страница может разлететься, тем более сверстанная на CSS.
а) Через системные CSS-файлы. Можно через Greasemonkey или Stylish. (И не забудьте !important перед ; когда будете задавать глобальные стили)
б) Конечно же нет!

Konstantin S. · №12

В браузерах, в которых не работает margin-top, может сработать padding. Попробуйте, таким образом может найтись универсальный вариант.

К сожалению padding не работает нигде.
Получается, что только в Мозилле это есть.

Тщательно распланированная страница может разлететься, тем более сверстанная на CSS.

Я тестил на сайте http://www.csszengarden.com. Вроде все Окей.

а) Через системные CSS-файлы. Можно через Greasemonkey или Stylish. (И не забудьте !important перед ; когда будете задавать глобальные стили)

А именно фильтровать контент как ? Просто помимо этого я еще хочу, например, заменить одни слова на другие...

б) Конечно же нет!

Хмм... Как бы это проверить, и найти "проблемные страницы" ?

Al_H · №13

Я тестил на сайте http://www.csszengarden.com.

Этого далеко не достаточно. И прежде всего - верстка-то у них всегда на основе одного и того же HTML-кода.

А именно фильтровать контент как ?

Была тема, в которой выложено несколько скриптов для Greasemonkey, один из них - тот, что попроще - мой. Пользуйтесь поиском.

Хмм... Как бы это проверить, и найти "проблемные страницы" ?

Только на собственном горьком опыте. Я могу примерно предположить, когда метод может давать осечку. Например, при жестком задании высоты страницы и полей - может, теоретически. При переопределении свойства display у body. В любом случае, всего не предусмотреть, и какая-то гарантия была бы только если бы было специальное расширение, очень популярное, и люди бы сообщали обо всех багах в течение года. Кстати, еще могут быть осечки... не при наложении фона, а, пожалуй, при установке у body значения border. В общем, время покажет.

Konstantin S. · №14

В общем я тут проверял на разных страницах с разными CSS. Вроде все нормально. А вот с расширениями я так ничего толком не понял. Кстати, есть ли в природе хорошая документация по работе с ActiveX Мозиллы ?

Я вот нашел только вот это:
http://www.iol.ie/~locka/mozilla/mozilla.htm

и это

http://www.paranoia.clara.net/index.html

Интересно, а есть ли еще что-то ?

Полезная информация