Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2015, 22:25
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

Выползающий сайдбар
Написал скрипт, но почему-то после первого нажатия когда класс стал fbopen на fbclose не меняется. Помогите кто чем может и в чем ошибка подскажите.
Код:
if ( $(".sidebar").hasClass("sbclose") ) {
  if($(".sbbtn").hasClass("closer"))
    {
      $(".sbbtn").removeClass( "closer" ).addClass('opener');
    }
    $(".opener").click(function(){
      $(this).removeClass( "opener" ).addClass('closer');
      $(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
      $('.main').animate({width: '70%',margin:'0 0 0 30%'}, 100);
    });
}
else  {
  if($(".sbbtn").hasClass("opener"))
    {
      $(".sbbtn").removeClass( "opener" ).addClass('closer');
    }
    $(".closer").click(function(){
      $(this).removeClass( "closer" ).addClass('opener');
      $(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
    });
}
http://codepen.io/
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2015, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

anar1811,
в клике должно быть условие а не наоборот


<!DOCTYPE html><html>
<head>
<meta charset="utf-8">


<style>
body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
.sidebar{background:#333;position:absolute;top:0;bottom:0;left:-30%;height:auto;width:30%;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.sbopen{left:0}
.sbclose{left:-30%}
.sbopen+.main{margin-left:30%}
.sidebar-span{width:500px}
.header{height:50px;background:#008000}
.main{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.content{}
.button-area-show,.button-area-close{left:0;top:0px;background:#ccc;height:50px;width:50px}
</style></head><body>
<div class="sidebar sbclose">
  <span class="sidebar-span">sadadsdasdasdasdasdasdasdasd</span>
</div>
<div class="main">
  <div class="header">

      <a class="sbbtn opener" href="#">Открыть</a>

  </div>
  <div class="content">
    dsfsdfasdfdfadsfadsfasdfsdf
  </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('.sbbtn').click(function () {
        $(this).toggleClass('opener closer');
        $('.sidebar').toggleClass('sbopen sbclose');
    });


</script>

</body></html>

Последний раз редактировалось рони, 27.08.2015 в 23:11.
Ответить с цитированием
  #3 (permalink)  
Старый 28.08.2015, 11:13
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

Сообщение от рони
аnar1811,
в клике должно быть условие а не наоборот
$(".sbbtn").click(function(){
  if($(".sbbtn").hasClass("opener"))
  {
    $(".sbbtn").removeClass( "opener" ).addClass('closer');
    $(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
    $('.main').animate({width: '70%',margin:'0 0 0 30%'}, 100);
  }
  else
  {
    $(".sbbtn").removeClass( "closer" ).addClass('opener');
    $(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
    $('.main').animate({width: '100%',margin:'0'}, 100);
  }
});
Так что-ли ?
Ответить с цитированием
  #4 (permalink)  
Старый 28.08.2015, 11:14
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

Спасибо за совет
Ответить с цитированием
  #5 (permalink)  
Старый 28.08.2015, 11:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от anar1811
Так что-ли ?
если оно работает как вам нужно то так
правда половина строк ненужна, но уже гораздо лучше.
Ответить с цитированием
  #6 (permalink)  
Старый 30.08.2015, 12:43
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

рони, не подскажешь как реализовать кукисы или хороший туториал?
$(".sbbtn").click(function(){
  if($(".sbbtn").hasClass("opener"))
  {
    $(".sbbtn").removeClass( "opener" ).addClass('closer');
    $(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
    $('.main').animate({width: '80%',margin:'0 0 0 20%'},60);
    $('.rsidebar').animate({width: '0'},60);
    $('.content').animate({width: '100%'},60);
  }
  else
  {
    $(".sbbtn").removeClass( "closer" ).addClass('opener');
    $(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
    $('.main').animate({width: '100%',margin:'0'},0);
    $('.rsidebar').animate({width: '0',margin:'0 0 0 0'},60);
    $('.rsidebar').animate({width: '20%'},60);
    $('.content').animate({width: '80%'},60);
  }
});
Ответить с цитированием
  #7 (permalink)  
Старый 30.08.2015, 12:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

anar1811,
как сохранить ссылку на тэг по которому кликнул ?
Ответить с цитированием
  #8 (permalink)  
Старый 30.08.2015, 16:07
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

$(".sbbtn").click(function(){
  if($(".sbbtn").hasClass("opener"))
  {
    localStorage.setItem('sideclass', 'closer');
    var classop = localStorage.getItem('sideclass');
    $(".sbbtn").removeClass( "opener" ).addClass(classop);
    $(".sidebar").removeClass( "sbclose" ).addClass('sbopen');
    $('.main').animate({width: '80%',margin:'0 0 0 20%'},60);
    $('.rsidebar').animate({width: '0'},60);
    $('.content').animate({width: '100%'},60);
    $('.sbbtn').addClass(classop);
  }
  else
  {
    localStorage.setItem('sideclass', 'opener');
    var classcl = localStorage.getItem('sideclass');
    $(".sbbtn").removeClass( "closer" ).addClass(classcl);
    $(".sidebar").removeClass( "sbopen" ).addClass('sbclose');
    $('.main').animate({width: '100%',margin:'0'},0);
    $('.rsidebar').animate({width: '0',margin:'0 0 0 0'},60);
    $('.rsidebar').animate({width: '20%'},60);
    $('.content').animate({width: '80%'},60);
  }
});

так что-ли? НО ничего не берет из локал сторедж
Ответить с цитированием
  #9 (permalink)  
Старый 30.08.2015, 17:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

anar1811,
бред не пишите и будет брать
в клике только запоминание индекса кликнутого элемента. до клика код который откроет запомненный в прошлый раз элемент.
Ответить с цитированием
  #10 (permalink)  
Старый 19.09.2015, 22:17
Интересующийся
Отправить личное сообщение для anar1811 Посмотреть профиль Найти все сообщения от anar1811
 
Регистрация: 26.08.2012
Сообщений: 18

Спасибо,рони. Не знаю как,но написал. И что странно работает. А есть на русском материал для изучения, а то я не вник в суть работы скрипта. Методом тыка написал
var items = JSON.parse(window.localStorage.getItem('x') || "{}");
    var butt = $('.lfb-butt');
	for(var key in items) {
      if (items.hasOwnProperty(key)) {
        $('.leftbar').eq(key).addClass('opener');
        $('.rightbar').eq(key).addClass('rbclose');
        $('.sidebar').eq(key).addClass('sbclose');
        $('.content').eq(key).addClass('cclose');
      }
    }
    butt.click(function(event) {
		if($('.leftbar').hasClass( "opener" ))
		{
			event.stopPropagation();
			var i = butt.index(this);
			items[i] = 1;
			window.localStorage.removeItem('x', JSON.stringify(items));
			$('.leftbar').eq(i).removeClass('opener');
			$('.rightbar').eq(i).removeClass('rbclose');
			$('.sidebar').eq(i).removeClass('sbclose');
			$('.content').eq(i).removeClass('cclose');
		}else
		{
			event.stopPropagation();
			var i = butt.index(this);
			items[i] = 1;
			window.localStorage.setItem('x', JSON.stringify(items));
			$('.leftbar').eq(i).addClass('opener');
			$('.rightbar').eq(i).addClass('rbclose');
			$('.sidebar').eq(i).addClass('sbclose');
			$('.content').eq(i).addClass('cclose');
		}
})

Последний раз редактировалось anar1811, 19.09.2015 в 22:19.
Ответить с цитированием
Ответ



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

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