Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.10.2011, 07:15
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Прокрутка всплывающего окна
Пытаюсь разобраться как вконтакте устроена прокрутка всплывающего окна. Заинтересовало то, что контент страницы на заднем фоне не прокручивается, а прокручивается только всплывшее окно.
Вот пример: http://vkontakte.ru/yeremyan?z=video13555100_130393462%2Fvideos1355510 0
Пытался самостоятельно понять, понял что там хитрость, чтобы контент страницы повешать на position: absolute; и z-index:x; Но до конца так и не разобрался, очень много там кода ... Если можно, подскажите как подобное сделать в более простом варианте, или может расскажите принцип работы этого окна.
Спасибо.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 17.10.2011, 08:04
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

я тоже не решился по коду разбираться. Идея в том, чтобы убрать прокрутку документа и разместить поверх div, растянув его на все окно. Когда содержимого будем много у этого div'а будет появляться прокрутка. Как убрать прокрутку у документа:

1. overflow: hidden. Но изменение overflow перезапускает флешки, которые находятся внутри, в ff.

2. сделать, чтобы документ поместился в окне полностью, т.е. подогнать его ширину и высоту. А чтобы позиция содержимого не изменилась, задать ее с помощью отрицательных margin-left/margin-top

а вот как они прокрутку в диалогах сделали, это мне самому интересно...
Ответить с цитированием
  #3 (permalink)  
Старый 17.10.2011, 08:18
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

я еще попробую минимизировать их код, вырезать всё ненужное, чтобы добраться до истины
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #4 (permalink)  
Старый 17.10.2011, 10:55
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

прокрутка в диалогах(возможно подобная, не такая как у них)-два контейнера. родительский с overflow: hidden . отлавливает движение колеса-вложенный позиционируется исходя из этого относительно внешнего. при этом во вложенном контейнеры сообщений вложенные с сообщениями.Итого при событии движение колеса-позиционируется внутренний,но при этом позиционируется так ,чтоб вложенные в него открывались полностью-то есть ориентация но топ и и ботом вложенных-вместить те что влазят между началом и концом области,соответственно если топ и ботом не вмещаются то растяжка род контейнера.
Ответить с цитированием
  #5 (permalink)  
Старый 17.10.2011, 11:26
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

greatilya,

подобное решение сойдёт?
http://avto.pro/catalog/honda/accord...7-11/#40811586


Правда там мою вёрстку засрали конечно.... но вобщем смысл ясен...

Последний раз редактировалось Seva1986, 17.10.2011 в 11:35.
Ответить с цитированием
  #6 (permalink)  
Старый 17.10.2011, 12:15
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

dmitriymar,
Как я понял вы предлагаете много JS кодинга. Сегодня вечером всё же расковыряю контакт и доберусь до истины.

Сообщение от Seva1986
подобное решение сойдёт?
Нет, это абсолютно не то. У вас там и прокрутка в диалоговом окне и в документе есть.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн

Последний раз редактировалось greatilya, 17.10.2011 в 12:19.
Ответить с цитированием
  #7 (permalink)  
Старый 17.10.2011, 13:44
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от greatilya
Нет, это абсолютно не то. У вас там и прокрутка в диалоговом окне и в документе есть.

что не то? прокрутку в нутри блока можно не делать, а самому блоку position:absolute вместо position:fixed..
Ответить с цитированием
  #8 (permalink)  
Старый 17.10.2011, 18:15
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Seva1986
что не то? прокрутку в нутри блока можно не делать, а самому блоку position:absolute вместо position:fixed..
прочитай тему еще раз и посмотри как оно работает в контакте и как у тебя

dmitriymar, не до конца понял, что ты написал. Но у тебя не хватает как минимум полосы прокрутки. Т.е. по идее еще надо создать блок с нулевой шириной, высотой равной высоте внешнего контейнера и высотой содержимого равной высоте содержимого внутреннего блока. И разместить этот блок справа, это будет полоса прокрутки, которую надо со всем остальным синхронизировать. Ну и еще клавиши вверх/вниз (пробел?) обрабатывать.
Ответить с цитированием
  #9 (permalink)  
Старый 17.10.2011, 18:50
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от x-yuri
Но у тебя не хватает как минимум полосы прокрутки. Т.е. по идее еще надо создать блок с нулевой шириной,
Это незачем.
Отлавливается событие колеса когда курсор находится над блоком сообщений,если над ним-запретить ст. действие браузера скрол и перепозиционировать вложенный контейнер относительно родительского с атрибутом overflow: hidden.
Клавиши отлавливать-ну а что мешает их отлавливать и отрабатывать по тому же алгоритму?
А вообще если нужен видимый скрол,то его не сложно добавить.
Писал подобный верт скролинг со скролбаром заказчика графическим. Единственное, что текст на блоки не бился-весь код занял около 50-70 строк

Последний раз редактировалось dmitriymar, 17.10.2011 в 18:55.
Ответить с цитированием
  #10 (permalink)  
Старый 17.10.2011, 20:23
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Долго сидел ковырялся в коде контакта. Там конечно замучено всё очень и очень детально + поддержка различных устройств. Примерно их идею понял, и вот что у меня получилось:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var iScrolled = 0;
function window_show() {
	iScrolled = $(window).scrollTop();
	$(window).scrollTop(0);
	$('#container_all').css('position', 'fixed');
	$('#container_all').css('margin-top', '-'+iScrolled+'px');
	$('#layer_bg').css('display', 'block');
	$('#layer').css('display', 'block');
	
}
function window_hide() {
	$('#container_all').css('margin-top', '0px');
	$('#container_all').css('position', 'absolute');
	$(window).scrollTop(iScrolled);
	$('#layer_bg').css('display', 'none');
	$('#layer').css('display', 'none');
	
}
</script>
<style media="all" type="text/css">
/* reset css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr,acronym {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight:normal;font-style:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%;}
q:before,q:after {content:'';}

#container_all { position:absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#container_content { width:960px; margin:0 auto; border-left:#ccc 1px solid; border-right:#ccc 1px solid; }
#layer_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; overflow: hidden; background: #000; opacity: 0.2; filter: alpha(opacity=20); display: none; }
#layer { position:absolute; top: 0; left: 0; width: 100%; z-index: 600; padding:25px 0; display: none; }
#layer_box { width:600px; margin:0 auto; background:#fff; }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<div id="container_all">
	<div id="container_content" onclick="window_show()">
		м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
	</div>
</div>
<div id="layer_bg"></div>
<div id="layer" onclick="window_hide()">
	<div id="layer_box">
		м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
	</div>
</div>
</body>
</html>

Сразу упомяну: никаких визуальных эффектов не делал.
Прошу, бросайте камни.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Firefox 5. Перестали работать всплывающие окна mikel Общие вопросы Javascript 3 24.06.2011 13:36
Позиционирование всплывающего окна debugx jQuery 5 24.05.2011 15:47
Плавное открытие окна. Flashton Элементы интерфейса 3 20.10.2010 16:00
script для всплывающего окна?????! BIZNES123 Элементы интерфейса 3 04.12.2009 10:43
Вызов скрипта в теле всплывающего окна на Javascript demchenko Я не знаю javascript 2 10.06.2009 10:46