Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2013, 18:39
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

Плавное отображение/скрытие блока
привет всем ... попросили меня сделать модальный блок - который плавно выезжаёт слева на право, а потом так же скрывается, в примере все видно. это у меня получилось.

но позже решили что этот блок должен плавно открываться сразу же при входе на сайт + если кликнуть по ссылке (меню) то он должен свернуться (закрыться) - а уже потом перейти на другую страницу.

может кто-то знает как это реализовать, помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2013, 19:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

zerofx,
а если блок закрыли -- переходить по ссылке меню сразу?
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2013, 19:12
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

$('#panel-sticker span').click(); // Открытие
$('#panel-sticker .close').click(); // Закрытие

Суй в нужное место получишь результат...
Ответить с цитированием
  #4 (permalink)  
Старый 24.12.2013, 19:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Rise
$('#panel-sticker').children('.close').click(); // Закрытие
а не удаление разве?
Ответить с цитированием
  #5 (permalink)  
Старый 24.12.2013, 19:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

рони, ну автор это так называет плавно выезжаёт слева на право, а потом так же скрывается
Ответить с цитированием
  #6 (permalink)  
Старый 24.12.2013, 21:57
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

Сообщение от Rise Посмотреть сообщение
рони, ну автор это так называет плавно выезжаёт слева на право, а потом так же скрывается
прикалуетесь - юмор это всегда хорошо =)

ну так и есть ну как я более буквально Вам объясню спасибо уважаемые
а на счет кода .. только не кричите - куда его поместить? в основное тело функции - или создать новую? ...


просто в голове столько всего за несколько дней .. сейчас натуплю и буду - опять у Вас спрашивать а почему оно не работает ..

Последний раз редактировалось zerofx, 24.12.2013 в 22:00.
Ответить с цитированием
  #7 (permalink)  
Старый 24.12.2013, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

zerofx,
вас конкретно спросили ...
смена названия кнопки закрыть/открыть - блок при открытии выдвигается - клик по меню обязательно предварительно закроет блок если он открыт ...
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
 <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
 <style type='text/css'>
 #menu ul{list-style:none}
 #menu li{float:left;margin:0 25px 0 0}
 #menu a{padding:5px;font:18px 'Verdana';color:#F00;text-decoration:none}
 #menu a:hover{padding:5px;border-bottom:solid 2px red;border-right:solid 2px red;border-left:solid 2px green;border-top:solid 2px green}
 #panel{position:absolute;top:50%;left:-400px;margin:-40px 0 0 0;overflow:hidden}
 #panel-content{background:#EEE;border:1px solid #CCC;width:388px;height:80px;float:left;padding:3px 5px}
 #panel-sticker{float:left;position:relative;background:#FFA500;padding:3px 20px 3px 5px;margin:0;cursor:pointer}
 #panel-sticker .close{position:absolute;right:3px;top:3px}
 </style>
<script type='text/javascript'>
(function ($) {
    $(document).ready(function () {
        var $panel = $('#panel');
        if ($panel.length) {
            var $sticker = $panel.children('#panel-sticker');
            var showPanel = function () {
                $panel.animate({
                    left: '+=400'
                }, 900, function () {
                    $(this).addClass('visible');
                });
            };
            var hidePanel = function (href) {
                $panel.animate({
                    left: '-=400'
                }, 900, function () {
                    $(this).removeClass('visible');
                    href && (window.location = href)
                });
            };
            showPanel();
            $("#menu a").click(function (event) {
                if ($panel.hasClass('visible')) {
                    event.preventDefault();
                    hidePanel(this.href)
                }

            })
            $sticker
                .children('span').click(function () {
                    if ($panel.hasClass('visible')) {
                        hidePanel();
                        $(this).text('Открыть')
                    } else {
                        showPanel();
                        $(this).text('Закрыть')
                    }
                }).andSelf()
                .children('.close').click(function () {
                    $panel.remove();
                });
        }
    });
})(jQuery);
</script>


</head>
<body>
  <div id="menu">
    	<ul>
    		<li><a href="http://javascript.ru/forum">Тест1</a></li>
    		<li><a href="http://javascript.ru">Тест2</a></li>
    	</ul>
    </div>

	<div id="panel">
	    <div id="panel-content">
	        Какой-то контент, который вы хотите показать.<br/>
	        Несколько строк<br/>
	        для наглядности
	    </div>
	    <div id="panel-sticker">
	        <span>Закрыть</span>
	        <div class="close">×</div>
	    </div>
	</div>
</body>
</html>

Последний раз редактировалось рони, 25.12.2013 в 01:36.
Ответить с цитированием
  #8 (permalink)  
Старый 24.12.2013, 23:15
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

извините пожалуйста я не понял ... блок изначально должен быть открыт - как только человек заходит на сайт - он открывается ... а теперь на счет меню - да такое условие. это так сказать такие понты ... при переходе на другую страницу, или клика по другой ссылке блок должен исчезать, т.е. пр'ятаться туда откуда вышел .. а потом уже должен происходить переход на другую страницу...
Ответить с цитированием
  #9 (permalink)  
Старый 25.12.2013, 01:26
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

+ в ff стало не корректно работать, при переходе - по другой ссылке - в ff блок закрывается некорректно, а именно просто пропадает, в google chrom ок ... а в ie7-8 вообще не работает...
Ответить с цитированием
  #10 (permalink)  
Старый 25.12.2013, 01:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от zerofx
в ff блок закрывается некорректно
добавил )))
Сообщение от zerofx
а в ie7-8 вообще не работает...
исправил ваши ошибки должно работать
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное раскрытие и сворачивание блока StyLLeR jQuery 6 07.07.2014 16:00
Движение по элементам блока без перезапуска функции выпадающеего меню. tutelaris Элементы интерфейса 4 26.04.2013 09:15
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 08:46