Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2012, 11:56
Новичок на форуме
Отправить личное сообщение для PEKTOP Посмотреть профиль Найти все сообщения от PEKTOP
 
Регистрация: 04.07.2012
Сообщений: 3

Оверлей с собственным скролбаром
Встала задача создать оверлей, который бы вел себя подобно оверлею на сайте vk.com. Допустим есть контент большой длинный на странице и по нажанию на определенный объект должен появляться оверлей который бы сократил скрол бар для прокрутки только области видимости оверлея. Я нарисовал схему для наглядности. (137 Kb)
Как мне реализовать такой оверлей?
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2012, 13:14
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            .wrapper {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .wrapper_fon {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.4;
                filter: Alpha(opacity=40);
            }
            .wrapper .overlay {
                position: relative;
                padding: 10px;
            }
            .wrapper .overlay .list {
                width: 400px;
                margin: 0 auto;
                background-color: #fff;
            }
        </style>

        <script type="text/javascript">
            function openOverlay() {
                document.body.style.overflow = 'hidden';

                document.querySelector('.wrapper_fon').style.display = 'block';
                document.querySelector('.wrapper').style.display = 'block';

                return false;
            }
            function closeOverlay() {
                document.body.style.overflow = 'auto';

                document.querySelector('.wrapper_fon').style.display = 'none';
                document.querySelector('.wrapper').style.display = 'none';

                return false;
            }
        </script>

    </head>
    <body>
        <div class="wrapper_fon"></div>
        <div class="wrapper">
            <div class="overlay">
                <div class="list">
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    <a href="" onclick="return closeOverlay();">закрыть</a>
                </div>
            </div>
        </div>

        <div>
            <a href="" onclick="return openOverlay();">открыть</a><br/>
            <img src="http://sonicsquad.ucoz.ru/_nw/2/72557.jpg" width="800" height="600" alt="" />
        </div>
    </body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2012, 13:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,326

PEKTOP, похоже ты придумал новое определение слову "оверлей"...
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2012, 13:51
Новичок на форуме
Отправить личное сообщение для PEKTOP Посмотреть профиль Найти все сообщения от PEKTOP
 
Регистрация: 04.07.2012
Сообщений: 3

ksa, я имел ввиду Overlay - наложение.
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2012, 13:52
Новичок на форуме
Отправить личное сообщение для PEKTOP Посмотреть профиль Найти все сообщения от PEKTOP
 
Регистрация: 04.07.2012
Сообщений: 3

devote, спасибо за помощь!
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2012, 14:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,326

Сообщение от PEKTOP
я имел ввиду Overlay - наложение.
Трудный этот русский язык, дорогие граждане! Беда, какой трудный.
Главная причина в том, что иностранных слов в нём до чёрта.
(с) Зощенко
http://www.ostrovok.de/old/classics/...o/story079.htm
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2012, 14:49
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815


В целом согласен с ksa, я даже попробывал перевести на русский
================================================== =

Встала задача создать верхний слой, который бы вел себя подобно верхнему слою, как в месте vk.com. Допустим есть содержимое большой длинны на странице и по нажанию на определенный предмет должен появляться верхний слой который бы сократил полосу прокрутки для прокрутки только области видимости верхнего слоя. Я нарисовал свой замысел для наглядности. (137 Kb)
Как мне реализовать такой верхний слой?


Единственный перевод языка который удалось придумать для java Script это кофесценарии.
А для jQuery это кофеВопросы/кофезапросы (кВопросы/кЗапросы )
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 04.07.2012 в 15:01.
Ответить с цитированием
Ответ



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

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