Как создать боковую панель для надстройки браузера - PullRequest
1 голос
/ 31 августа 2011

Я разрабатываю кросс-браузерное расширение (дополнение), которое находится на правой стороне каждой страницы.Прямо сейчас я накладываю боковую панель вверху каждой страницы.Но я бы предпочел, чтобы он располагался по бокам каждой страницы сам по себе, не скрывая ни одной части родительской страницы.Я безуспешно искал ответ на этот вопрос.Кажется, есть встроенные методы для создания боковых панелей в некоторых браузерах .Но я ищу технику, которая включает только html и css (и jquery, если необходимо).

В качестве примера того, что я ищу, расширение Google Related находится внизу каждой страницы, нофактически загружает содержимое страницы при загрузке.

enter image description here

Надстройка Widgya является частью содержимого родительской страницы, и вы можете увидеть, как Google Related подталкивает ее, чтобы избежатьвторжение на страницу.Это соответствующий HTML-код из Связанного расширения:

<div style="clear: both; height: 46px; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; "></div>
<iframe class="grelated-iframe" frameborder="0" id="grelated_iframe_189" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="z-index: 2147483647; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; vertical-align: baseline; position: fixed; bottom: 0px; left: 0px; right: 0px; top: auto; width: 100%; height: 49px; " scrolling="no"></iframe>

Используя div, который вызывает 'clear: both', и iframe, который является абсолютно позиционным, эффект достигается.Но я не могу воспроизвести этот эффект на правой или левой стороне экрана.Я пробовал разные методы, но безуспешно.Буду признателен за понимание подхода.

Спасибо

Обновление:

Вот эффект, которого я пытаюсь достичь:

enter image description here

Chrome имеет / имел экспериментальный API боковой панели, но мне нужна возможность сделать это в css & html, не полагаясь на API для конкретного браузера.

1 Ответ

0 голосов
/ 31 августа 2011

Вы имеете в виду «позиция: фиксированная»? Я не думаю, что «ясно: оба» могут сделать полосу фиксированной в определенной позиции при прокрутке.

Простой пример - панель уведомлений на

http://chat.stackoverflow.com/
...