Фильтр по:
  

Плавное сворачивание / разворачивание блока + куки - Страница 4

Как сделать...

  • Страница 4 из 6
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту)
Плавное сворачивание / разворачивание блока + куки
Дата: Воскресенье, 11.09.2011, 02:35 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 antant,
Quote (antant)
Если не трудно, напишите как сделать ссылку, открывающую/закрывающую по клику сразу все блоки

... Не думаю, что самому написать подобное очень сложно, тем более пример уже есть ....
Держи:

Скрипт:
Code
function showHideAll(x){
$('div.hideWrap a.hideBtn').each(function(){
if(x&&x==1){if(this.className.indexOf('show')==-1){$(this).addClass('show').siblings('div.hideCont').show();};
}else{if(this.className.indexOf('show')>-1){$(this).removeClass('show').siblings('div.hideCont').hide();};}
});
};


HTML:
Code
<a href="javascript://" onclick="showHideAll('1');return false;"><strong>Показать всё</strong></a> | <a href="javascript://" onclick="showHideAll('0');return false;"><strong>Скрыть всё</strong></a>


☑ Пример (Сворачивание / разворачивание блока + куки + showHideAll(x))
....

 
Дата: Четверг, 06.10.2011, 00:03 |
Serg77
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 Очень помогли ваши решения, по ходу возник ещё вопрос, как сделать чтобы по клику на раскрытие одного другие открытые сворачивались, + первый пункт открытый остальные закрытые при загрузке страницы.
И чтобы не плодить ветки... сложно сделать прокрутку если большой текст в блоке... то-есть ограничить размер блока и сделать прокрутку?

Сообщение отредактировал Serg77 - Четверг, 06.10.2011, 00:04
 
Дата: Понедельник, 10.10.2011, 22:14 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Serg77,
Quote (Serg77)
по ходу возник ещё вопрос, как сделать чтобы по клику на раскрытие одного другие открытые сворачивались, + первый пункт открытый остальные закрытые при загрузке страницы.

Вот, именно так как вы и описали, составить скрипт ) ... Примеров и вариантов для старта предостаточно )
...
Quote (Serg77)
И чтобы не плодить ветки... сложно сделать прокрутку если большой текст в блоке... то-есть ограничить размер блока и сделать прокрутку?

Нет, не сложно ... относительно. Задать блоку фиксированную высоту и прописать overflow:scroll; ... По сути, если не учитывать мелкие оформительские детали, всё.
...

 
Дата: Понедельник, 17.10.2011, 22:55 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
Code
$(function() {  
      $('.hideWrap a.hideBtn').each(function(i) {  
          var cookie = getCookie('hideBtn' + i);  
          if (cookie && cookie.indexOf('show') > -1) $(this).toggleClass('show').parents('.hideWrap').find('.hideCont').show();  
      });  
      $('.hideWrap a.hideBtn').click(function() {  
          cont = $(this).parents('.hideWrap').find('.hideCont');  
          $(this).toggleClass('show');  
          cont.slideToggle('normal');  
          var hideBtn = $('.hideWrap a.hideBtn').index($(this)),  
              isShow = $(this).attr('class');  
          setCookie('hideBtn' + hideBtn, isShow, 365);  
          return false;  
      });  
  });

не работает в chrome и ошибка
Code

Problem at line 4 character 53: Expected '{' and instead saw '$'.
if (cookie && cookie.indexOf('show') > -1) $(this).toggleClass('show...

 
Дата: Вторник, 18.10.2011, 03:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
не работает в chrome и ошибка

Это откуда код такой?
Я “такой” - не писал.
Во-первых - нет кавычек в блоке «if».
Quote (JS)
...
if (cookie&&cookie.indexOf('show')>-1){
$(this).toggleClass('show').parents('.hideWrap').find('.hideCont').show();
}
...

Во-вторых - не совсем верно объявлена переменная «cont» (предполагается локальная переменная).
Quote (JS)
...
var cont = $(this).parents('.hideWrap').find('.hideCont');
...

... Исправляй. И будет всё работать ...
...

 
Дата: Вторник, 18.10.2011, 10:12 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
Code
$(function() {
        $('.hideWrap a.hideBtn').each(function(i) {
            var cookie = getCookie('hideBtn' + i);
            if (cookie && cookie.indexOf('show') > -1) {
                $(this).toggleClass('show').parents('.hideWrap').find('.hideCont').show();
            }
        });
        $('.hideWrap a.hideBtn').click(function() {
            var cont = $(this).parents('.hideWrap').find('.hideCont');
            $(this).toggleClass('show');
            cont.slideToggle('normal');
            var hideBtn = $('.hideWrap a.hideBtn').index($(this)),
                isShow = $(this).attr('class');
            setCookie('hideBtn' + hideBtn, isShow, 365);
            return false;
        });
});


Cпасибо за ответ, думал не ответят, я сделал как ты сказал и ещё исправил проблему с "});" $(function() { не был закрыт, но всё равно не работает в Chrome, ещё он в Chrome в закрытом виде появляется, а в Firefox хорошо отображаться в открытом. А на счёт кода я его взял из твоего поста #9

А внедрить этот код к основному, точнее отредактировать первый и заменить на этот помоги
Code
(function($) {
      $(".hidden_menu_button").click(function() {
          if ($(".hidden_menu").is(":hidden")) {
              $(".hidden_menu").slideDown("normal");
          } else {
              $(".hidden_menu").slideUp("normal");
          }
      });
})(jQuery);

Сообщение отредактировал remus - Вторник, 18.10.2011, 21:04
 
Дата: Вторник, 18.10.2011, 21:43 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
А на счёт кода я его взял из твоего поста #9

Хм ... Опять накосячил ) ... Пасибки, ща поправлю )
...
Quote (remus)
но всё равно не работает в Chrome, ещё он в Chrome в закрытом виде появляется, а в Firefox хорошо отображаться в открытом.

Даже пример в Хроме не работает???
... Ты, часом, не на локале тестишь? в смысле не с жесткого запускаешь? - с харда Хром не пишет куки (такая специфика), только с WEB-сервера.
... Если нет, ссылочку оставь не страницу где не работает - посмотрю что так ...
...
Quote (remus)
А внедрить этот код к основному, точнее отредактировать первый и заменить на этот помоги

..?
Не очень понял куда ты это “внедрить” хочешь? ...
У тебя что, на странице только один (1) блок с классом «.hidden_menu» - если один, то почему класс а не ID? Если не один ... то вообще не понятно ... Открываться же будут все ...
...

 
Дата: Среда, 19.10.2011, 11:59 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz)
Ты, часом, не на локале тестишь? в смысле не с жесткого запускаешь?

Да с него biggrin :D biggrin

Code
(function($) {
         $("#hidden_menu_button").click(function() {
             if ($("#hidden_menu").is(":hidden")) {
                 $("#hidden_menu").slideDown("normal");
             } else {
                 $("#hidden_menu").slideUp("normal");
             }
         });
})(jQuery);


да блин я чуть не то кинул, мне надо что бы открывалось по этой системе, вот, а блок у меня не 1 их 16 smile
просто я разобраться не могу в js сколько всего прочитал так и не понял...

------------------

на одном форуме вообще написал парень

Quote (PhoEn-X)

Страшный скрипт... не проще подключить JQuery версию cookie?
Code
http://wd-planet.ucoz.ru/cookie.js


Code
function createCookie() {$.cookie('cookie01', 'cookie01cont');}; // создаем куки с именем cookie01
   $.cookie('cookie01'); // считываем (если они созданы)
   if ($.cookie(cookie01')) {какая нибудь функция}; // если созданы куки cookie01 то выполняется "какая нибудь функция"
   function delCookie() {$.cookie('cookie01', null, {path: '/'});}; // функция удаления куки cookie01


Code
ну и управляем созданием и удалением))
<a onclick="createCookie();">Создать куки</a><a onclick="delCookie();">Удалить куки</a>

Сообщение отредактировал remus - Среда, 19.10.2011, 12:03
 
Дата: Среда, 19.10.2011, 14:41 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
Да с него biggrin biggrin biggrin

Тогда всё понятно ... )
...

Quote (remus)
да блин я чуть не то кинул, мне надо что бы открывалось по этой системе, вот, а блок у меня не 1 их 16 smile
просто я разобраться не могу в js сколько всего прочитал так и не понял...

Вам типа, нужно сменить тип анимации при открытии/закрытии блока?
Если да, тоже не очень понял, то вот так:
Code
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$('.hideWrap .hideBtn').each(function(i){var cookie=getCookie('hideBtn'+i);
if (cookie&&cookie.indexOf('show')>-1){
$(this).toggleClass('show').parents('.hideWrap').find('.hideCont').show();};
})
/* StartClickFunction */
$('.hideWrap .hideBtn').click(function(){var cont=$(this).parents('.hideWrap').find('.hideCont');
$(this).toggleClass('show');
if(cont.is(':hidden')){cont.slideDown('normal');}else{cont.slideUp('normal');};   
var hideBtn=$('.hideWrap .hideBtn').index($(this)),isShow=$(this).attr('class');
setCookie('hideBtn'+hideBtn,isShow,365);
return false;
});
/* End DocumentReady */
});
</script>

А именно, строка:
Code
if(cont.is(':hidden')){cont.slideDown('normal');}else{cont.slideUp('normal');};

...
☑ Пример (hideContCookie_v4.html)

Но, вообще-то, функция $.slideToggle(); выполняет тот же код, что и ваш - то бишь, проверяет скрыт ли блок, и, если скрыт - открывает его именно методом $.slideUp();, если же открыть, то закрывает его методом $.slideDown(); ...
Так что, ... так.
...

Quote (remus)
а одном форуме вообще написал парень
Quote (PhoEn-X)
Страшный скрипт... не проще подключить JQuery версию cookie?

То же самое, только в профиль, НО, JavaScript cookie.js сработает раньше, чем jQ jquery.cookie.min.js, так как ему требуется библиотека jQuery, а она тяжёлая, следовательно, пока не загрузится полностью jQuery, jquery.cookie.min.js не сработает.
Надеюсь понятно описал ....
...

 
Дата: Среда, 19.10.2011, 17:30 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 likbezz, извиняюсь, я не внимательно все посты прочитал, теперь буду знать. Как я понял браузер не на компьютере, а на локальном сервере.

Да ты прав мне надо было изменить анимацию при открытие/закрытие блока, что собственно ты и сделал, спасибо!
Quote (likbezz)
Вам типа, нужно сменить тип анимации при открытии/закрытии блока?
Если да, тоже не очень понял, то вот так:

Оказывается всё так просто...
Quote (likbezz)
А именно, строка:
Code
if(cont.is(':hidden')){cont.slideDown('normal');}else{cont.slideUp('normal');};


Я хотел поменять с $.slideToggle(); на $.slideUp();$.slideDown(); я про эти функции читал, но мне функция $.slideToggle(); не нравиться тем что когда много раз нажимаешь на неё, ну допустим большой текст, он будет открывать закрывать, хотя ты уже убрал курсор, а функции $.slideUp();$.slideDown(); не дают так делать...
Quote (likbezz)
Но, вообще-то, функция $.slideToggle(); выполняет тот же код, что и ваш - то бишь, проверяет скрыт ли блок, и, если скрыт - открывает его именно методом $.slideUp();, если же открыть, то закрывает его методом $.slideDown(); ...
Так что, ... так.


Сообщение отредактировал remus - Среда, 19.10.2011, 17:31
 
Дата: Среда, 19.10.2011, 18:02 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
Я хотел поменять с $.slideToggle(); на $.slideUp();$.slideDown(); я про эти функции читал, но мне функция $.slideToggle(); не нравиться тем что когда много раз нажимаешь на неё, ну допустим большой текст, он будет открывать закрывать, хотя ты уже убрал курсор, а функции $.slideUp();$.slideDown(); не дают так делать...

Понятно ) Ok.
...

 
Дата: Среда, 19.10.2011, 23:48 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
Code
.hideBtn{
          /* img/minus */
}
.hideBtn.close{
          /* img/plus */
}
/* ну и удалил display:none -> hideCont */


что то не дописал я, что бы изначально в открытом виде блоки были...
Code
$(document).ready(function() {
          $('.hideWrap .hideBtn').each(function(i) {
              var cookie = getCookie('hideBtn' + i);
              if (cookie && cookie.indexOf('close') > -1) {
                  $(this).toggleClass('close').siblings('.hideCont').hide();
              }
          });

          $('.hideWrap .hideBtn').click(function() {
              var cont = $(this).siblings('.hideCont');
              $(this).toggleClass('close');
              if (cont.is(':hidden')) {
                  cont.slideDown('normal');
              } else {
                  cont.slideUp('normal');
              }
              var hideBtn = $('.hideWrap .hideBtn').index($(this)),
                  isShow = $(this).attr('class');
              setCookie('hideBtn' + hideBtn, isShow, 365);
              return false;
          });
});

Сообщение отредактировал remus - Среда, 19.10.2011, 23:51
 
Дата: Среда, 19.10.2011, 23:56 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
что то не дописал я, что бы изначально в открытом виде блоки были...

Ответ ...
...
Учимся юзать поиск ...
...

 
Дата: Пятница, 21.10.2011, 22:40 |
remus
Рядовой
Группа: Пользователи
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 исправил теперь в открытом виде и сохраняет.
Code
$(document).ready(function() {
           $('.hideWrap .hideBtn').each(function(i) {
               var cookie = getCookie('hideBtn' + i);
               if (cookie && cookie.indexOf('close') != -1) {
                   $(this).toggleClass('close').siblings('.hideCont').hide();
               }
           });

           $('.hideWrap .hideBtn').click(function() {
               var cont = $(this).siblings('.hideCont');
               $(this).toggleClass('close');
               if (cont.is(':hidden')) {
                   cont.slideDown('normal');
               } else {
                   cont.slideUp('normal');
               }
               var hideBtn = $('.hideWrap .hideBtn').index($(this)),
                   isShow = $(this).attr('class');
               setCookie('hideBtn' + hideBtn, isShow, 365);
               return false;
           });
});


но на див работает, а на таблице нет! почему?
Code
<div class="hideWrap">
     <table border="0" cellpadding="0" cellspacing="0">
         <tr>
             <td>
                 <a class="hideBtn" href="javascript://">открыть/закрыть</a>
             </td>
         </tr>
         <tr>
             <td>
                 <div class="hideCont">
                     текст
                 </div>
             </td>
         </tr>
     </table>
</div>

 
Дата: Пятница, 21.10.2011, 22:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
но на див работает, а на таблице нет! почему?

Потому что:
Code
var cont = $(this).siblings('.hideCont');

.siblings() - Осуществляет поиск элементов, являющихся соседними для выбранных элементов (под соседними понимаются элементы, которые имеют общего родителя)...
...

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту)
  • Страница 4 из 6
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Поиск:


Мобильная версия