| |
|
|
| | Добрый день.
подскажите, пожалуйста, как они это сделали?
http://vk.com/shurlepov_michail?z=photo25341591_287097178%2Fphotos25341591
1) скролл перемещает окно, которое сверху
2) нижнее окно при этом находится на одном месте.
Приведите, пожалуйста, простейший пример данной реализации (но чтобы работало во всех браузерах). Я правильно понимаю, что это сделано чисто на дивах и стилях без использования каких-либо библиотек (типа jqwery). Кто-нибудь подобное делал?
У меня пока такой вариант:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript">
function photo(x) {
if (x==1) {
document.getElementById('viewerWrap').style.position = 'fixed';
document.getElementById('viewerWrap').style.display = 'block';
document.getElementById('viewerWrap').style.zIndex = '8000';
document.getElementById('topPanel').style.position = 'fixed';
document.getElementById('Main').style.background = 'url(vid/bg_black_80.png) left top repeat';
}
else {
document.getElementById('viewerWrap').style.position = 'relative';
document.getElementById('viewerWrap').style.display = 'none';
document.getElementById('viewerWrap').style.zIndex = '0';
document.getElementById('topPanel').style.position = 'relative';
document.getElementById('Main').style.background = 'url(vid/blank.png) left top no-repeat';
}}
</script>
<style>
#viewerWrap {position:relative; top: 0; left: 0; right: 0; z-index:0; display:none; overflow-y:scroll; padding:0px; }
#viewerWrap .viewerPage { width: 740px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); margin: 30px auto 30px; }
#topPanel {position:relative; }
</style>
</head>
<body id="Main">
<div id="topPanel">
33333333333333333333333333333333333 3<br/><br/>
<a href="javascript:void(null)" onClick="photo('1');">CLICK</a>
<br/><br/>
33333333333333333333333333333333333 3<br/><br/>
</div>
<div style="display:none; height:100%;" id="viewerWrap">
<div class="viewerPage">
<a href="javascript:void(null)" onClick="photo('2');" style="float:right;">CLOSE </a>
111<br />111<br />111<br />111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br />111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br />111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br />
111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />111<br /> 111<br />111<br />11177<br />
</div>
</div>
</body></html>
|
В IE - видно 2 полосы прокрутки..
Как исправить, чтобы был идеальный вариант?
С уважением. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(13.08.2012 в 17:19)
| | | Зашёл по ссылке - ничего особливого не увидел.
Приложите здесь скриншот, на котором в Paint'e обозначьте - что вы полагаете "нижним окном" (обведите его в красный кружок и подпишите); и что такое, по-вашему, "окно сверху (также обведите, например, синим кружком, и подпишите). | |
| |
|
|
| |
 119.5 Кб |
|
| |
для: ЯСА
(13.08.2012 в 17:40)
| | | Приведён же пример кода.. По нему должно быть всё понятно..
В аттаче пример. Затемнённое - это нижнее окно..
Тут смысл в том, что нужна не какая-то фотогалерея на jqwery, которую потом каким-то макаром допиливать, а именно самописный скрипт (см. выше).
В верхнее окно (которое в аттаче на белом фоне) можно писать любой контент (комментарии, например). При этом они должны тянуться ниже, а справа должна появляться горизонтальная полоса прокрутки, которая прокручивает верхнее (незатемненное) окно.
никто не сталкивался? | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(13.08.2012 в 17:47)
| | | Ваш код решает какую-то иную задачу.
В общем, всё просто.
1. СНАЧАЛА текущему document.body устанавливаете style.overflow = 'hidden' (и это - самое ГЛАВНОЕ в данной задаче).
2. ЗАТЕМ определяете его новый document.body.offsetWidth (он станет больше за счёт исчезновения вертикального скроллбара)
3. Ну а потом, зная ширину и высоту (document.body.offsetHeight) тела документа делаете минимум два DIV'a, вложенные один в другой. Внешний DIV - с позицией absolute на всю ширину и высоту экрана + большой z-Index + style.overflow = 'auto'
Ну а во внутреннем помещаете картинку и прочее. Если высота контента внутреннего DIV'a будет больше высоты внешнего (которая равна высоте экрана), то у внешнего DIV'a появится нужный вам вертикальный скролл как раз на месте бывшего вертикального скролла тела документа.
4. Чтобы добиться изменения прозрачности (то, что вы назвали "затемнением"), помещаете внутрь внешнего DIV'a ещё два (или три) - слева от центрального DIV'a с контентом, справа и снизу (по необходимости). Именно у них и будете менять свойство opacity для "затемнения"/"осветления" (для MSIE - через свойство стиля filter)..
5. Соответственно, по "закрытии" всей этой конструкции возвращаете телу документа document.body.style.overflow = 'auto'
А все эти ваши position = 'fixed' - здесь абсолютно не нужны... | |
| |
|
|
| |
991 байт |
|
| |
для: ЯСА
(13.08.2012 в 22:50)
| | | Спасибо за ответ.
Несколько исправленный вариант в аттаче (может кому пригодится).
Решает поставленную задачу, проверен во всех современных браузерах.
В IE7.0 - убрана 2-я полоса прокрутки.
Ваш вариант, к сожалению, сложно заценить, т.к. не видно html кода. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(13.08.2012 в 23:12)
| | | Ну вот, вы и сами дошли до того, чтобы убрать scroll.
Плохо только, что вы воспользовались атрибутом SCROLL, а не свойством стиля overflow.
Полагаю, что работать следует в какой-то одной "системе измерения" - если у атрибутов имеется свойство стиля, аналогичное атрибуту, то пользовать надо свойство стиля.
Если длина измеряется в метрах, масса в килограммах, а время - в секундах, то и давление надо измерять в паскалях, а не в миллиметрах ртутного столба.
-----
Ну и по поводу position: fixed -- MSIE версий ниже 7-й этого дела не поймут.
Потому лучше использовать absolute - ущерба скрипту не будет.
-----
И на всякий случай - вместо многочисленных "троек" для "набора высоты контента" в примерах много проще использовать любой блочный тег со style="height: 345%". | |
| |
|
|
| |
|
|
| |
для: ЯСА
(13.08.2012 в 23:42)
| | | с "overflow" - не получилось. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(13.08.2012 в 23:48)
| | | В строке #12 вашего кода замените scroll = 'none' на style.overflow = 'hidden'
Аналогично в строке #21 ваш scroll = 'yes' на style.overflow = 'auto' | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.08.2012 в 01:27)
| | | ------------------------------------
В строке #12 вашего кода замените scroll = 'none' на style.overflow = 'hidden'
Аналогично в строке #21 ваш scroll = 'yes' на style.overflow = 'auto'
------------------------------------
при этом варианте в IE7.0 - остаётся 2 полосы прокрутки (вертикальных...)
------------------------------------
Ну и по поводу position: fixed -- MSIE версий ниже 7-й этого дела не поймут.
Потому лучше использовать absolute - ущерба скрипту не будет.
------------------------------------
при этом варианте в FireFox 14.0.1 - работает некорректно. | |
| |
|
|
