Фильтр по:
  

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

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

  • Страница 5 из 6
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту)
Плавное сворачивание / разворачивание блока + куки
Дата: Пятница, 21.10.2011, 23:06 |
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').parents('.hideWrap').find('.hideCont').hide();
         }
     });
     $('.hideWrap .hideBtn').click(function() {
         var cont = $(this).parents('.hideWrap').find('.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 - Пятница, 21.10.2011, 23:10
 
Дата: Суббота, 22.10.2011, 02:03 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 remus,
Quote (remus)
получается так ?

Ну вот ... ) А говоришь “не умею” ... smile
...

...

 
Дата: Вторник, 22.11.2011, 20:46 |
PlayTime
Рядовой
Группа: Проверенные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 Здравствуй Ув. likbezz
Можешь помочь сделать чтобы сохранялись куки но только при помощи вот этого скрипта: http://dl.dropbox.com/u/10183681/jquery.cookie.js
А то у меня к одному элементу куки привязаны по этому скрипту. а открывающееся блоки по другому. Выходит нужно два скрипта. Хотя знаю что можно все сделать и при помощи одного.
Буду очень благодарен за помощь.

Добавлено (22.11.2011, 20:46)
---------------------------------------------
Здравствуйте Ув. likbezz . Захожу каждый день на форум чтобы глянуть ответ. Может ты напишешь сможешь помочь или нет. Буду очень благодарен. ПОнимаю что может не быть времени или какие нибудь другие причины.

 
Дата: Четверг, 02.02.2012, 18:28 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 For bandjuk
Q:
Quote (bandjuk)
Привет! Спасибо! Поставил вчера скрипт сворачивания блоков, всё работает, но есть проблема, не получается сделать чтобы кнопки сворачивания были в заголовке (титле)

А, понятненько )
Перво-наперво, удаляешь из кода всё то, что прописал до этого ...
Включая вот это:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>

Тебе это не нужно, к сайту уже подключёна библиотека JQ, по умолчанию.
...

Потом, идёшь в ПУ » Управление дизайном » Таблица стилей CSS
Добавляешь туда вот эти строки:
Code
table.hideWrap{text-align:left;clear:both;}  
a.hideBtn{display:block;background:transparent url('http://ssilki.at.ua/Java/minus.gif') no-repeat 10px center;cursor:pointer;outline:none;text-decoration:none;}  
a.hideBtn.close{background-image:url('http://ssilki.at.ua/Java/plus.gif');}
div.hideCont li{list-style:none;}

...

Затем, ПУ » Управление дизайном » Глобальные блоки » ...
Открываешь Верхний глобальный блок, и добавляешь туда скрипт:
Code
<script type="text/javascript" src="http://ssilki.at.ua/Java/_cookie.js"></script>

В любое место.

Там же, открываешь Нижний глобальный блок, в самый верх добавляешь скрипт:
Quote (JavaScript)
<script type="text/javascript">
$('table.hideWrap a.hideBtn').each(function(i){var cookie=getCookie('hideBtn'+i);
if(cookie&&cookie.indexOf('close')!=-1){$(this).toggleClass('close').parents('table.hideWrap').find('div.hideCont').hide();};
});
$('table.hideWrap a.hideBtn').click(function(){
$(this).toggleClass('close').parents('table.hideWrap').find('div.hideCont').slideToggle('normal');
var hideBtn=$('table.hideWrap a.hideBtn').index($(this)),isShow=$(this).attr('class');
setCookie('hideBtn'+hideBtn,isShow,365);return false;
});
</script>

...

Там же, открываешь глобальный блок с левой колонкой (Первый контейнер), и делаешь что бы было вот так:
Здесь пример для блока категорий:
Quote (HTML)
<?if($CATEGORIES$)?>
<table border="0" cellpadding="0" cellspacing="0" width="186" class="hideWrap">
<tr><td align="center" height="30" style="background:url('http://ssilki.at.ua/Diz/media/7.gif') #000000;color:#FFFFFF;font-size:10px;"><!-- <bt> --><!--<s5351>--><a class="hideBtn" href="javascript://" title="Показать\Скрыть блок"><b>Категории раздела</b></a><!--</s>--><!-- </bt> --></td></tr>
<tr><td style="background:url('http://ssilki.at.ua/Diz/media/8.gif');padding:0 5px 0 7px;">
<div class="hideCont"><!-- <bc> -->$CATEGORIES$<!-- </bc> --></div>
</td></tr>
<tr><td><img src="http://ssilki.at.ua/Diz/media/9.gif" border="0" style="margin-bottom: 7px"></td></tr>
</table>
<?endif?>

То бишь:
1. Прописываешь таблице класс == hideWrap
2. Заключаешь заголовок блока в ссылку с классом == hideBtn
3. Заключаешь содержание блока в блок с классом == hideCont
...

Такую же операцию проделываешь со всеми блоками к которым нужно применить данный скрипт. В данном случае показано с блоком «Категории раздела».
...

И, если всё сделано правильно, увидишь вот такое:


...

☑ Готовая страница, как пример, на всякий ...
...
Прикрепления: 9689354.png (19.7 Kb)

 
Дата: Пятница, 03.02.2012, 18:16 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


 likbezz, Спасибо тебе огромное! Всё злорово получилось! Очень доволен! Ты молодец! Хорошо всё объяснил, да ещё и с примерами! biggrin И сайт у тебя хороший! Красиво оформлен и ничего лишнего, грузится быстро! В общем молодец!
Жаль не могу тебе плюсик поставить! sad

Добавлено (03.02.2012, 18:16)
---------------------------------------------
fflesh, можно тебя ещё по доставать? Как сделать, чтобы в блоках с правой стороны кнопки открыть/закрыть были справа от названия блока?

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


 bandjuk,
Quote (bandjuk)
Как сделать, чтобы в блоках с правой стороны кнопки открыть/закрыть были справа от названия блока?

Добавь дополнительный класс ссылке, только правом блоке, типа:
Quote (HTML)
<a class="hideBtn right" href="javascript://" title="Показать\Скрыть блок"><b>Категории раздела</b></a>

И добавь к стилям:
Code
a.hideBtn.right{background-position:166px center;}


То бишь, все вместе будет вот так:
Quote (CSS)
table.hideWrap{text-align:left;clear:both;}
a.hideBtn{display:block;background:transparent url('http://ssilki.at.ua/Java/minus.gif') no-repeat 10px center;cursor:pointer;outline:none;text-decoration:none;}
a.hideBtn.right{background-position:166px center;}
a.hideBtn.right.close{background-image:url('http://ssilki.at.ua/Java/plus.gif');}
div.hideCont li{list-style:none;}

...

И будет вот так: Пример (добавлен класс right)
...

 
Дата: Пятница, 03.02.2012, 18:50 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


 likbezz, Понял, спасибо! smile Я сам где то так и думал, но вот сделать не смог! sad

 
Дата: Понедельник, 06.02.2012, 02:48 |
use
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 Ребят ГОРЮ!
Помогите у меня есть скриипт на спойлер
вот он

Code
<script type="text/javascript">
   function sh(num) {
   obj = document.getElementById("spo_"+num);
   if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
   }
</script>


ХТМЛ
Code
<a href="javascript:sh('1')">Открыть\закрыть</a>
<div id="spo_1" style="display:block">
контент
</div>


Мне нужно тоже самое токо с куки.Пожалуйста ребят)

Сообщение отредактировал use - Понедельник, 06.02.2012, 02:49
 
Дата: Понедельник, 06.02.2012, 21:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 use,
Quote (use)
Ребят ГОРЮ!
Помогите у меня есть скриипт на спойлер
вот он

Используйте даный в этой теме, он не намного отличается от вашего:
Code
<div class="hideWrap">    
<a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>    
<div class="hideCont">Здесь располагается содержимое  class "hideCont"</div>    
</div>

..

 
Дата: Воскресенье, 08.04.2012, 06:20 |
rob4ik
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 Вечер добрый.

А вы не могли бы изменить / модифицировать уже имеющийся js скрипт (добавить в него куки + плавное сворачивание):
Code
    function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}


Пример скрипта

скрипт очень простой + поддержка ID, что для меня не мало важно.

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


 rob4ik,
Quote (rob4ik)
Вечер добрый.
А вы не могли бы изменить / модифицировать уже имеющийся js скрипт (добавить в него куки + плавное сворачивание):

Добрый.
Зачем изобретать велосипед? В итоге получится то что предложено постом выше.
Если нужно по ID - измените классы на ID.
Но, ID - это уникальный элемент а странице, то есть блок должен быть один. Не вижу в этом больших преимуществ, да и маленьких тоже.
...

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

 
Дата: Воскресенье, 22.04.2012, 09:09 |
ramambarum
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 likbezz, спасибо большое! Подскажите, пожалуйста, можно ли сделать так,чтобы если свёрнуто по кукам, то сразу показывалось свёрнутым, а не сворачивалось после загрузки страницы?

 
Дата: Вторник, 07.08.2012, 11:29 |
Burman
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 Добрый день, likbezz

спасибо за скрипт., можете подсказать по какой причине не работает версия с куками на моей странице - http://vipsalondoma.ru/Netshop/nimue/ ?
ставил скрипт и в конец страницы, и все равно не работает.

вот этот код работал
Code
<div class="hideWrap">
<a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');$(this).toggleClass('show');return false;">Показать</a>
<div id="hideCont1" class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>


но мне нужно запоминать положение открыто/спрятано для блоков

спасибо.

Сообщение отредактировал Burman - Вторник, 07.08.2012, 11:32
 
Дата: Вторник, 07.08.2012, 17:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Burman,
Quote (Burman, Вт, 07.08.2012, 11:29:36)
можете подсказать по какой причине не работает версия с куками на моей странице

Потому что у вас нет скрипта записи/чтения кук.
Code
<script type="text/javascript" src="http://likbezz.ru/_theme/_script/_ext/_cookie.js"></script>

Должен находится выше скрипта блоков ..

 
Дата: Среда, 08.08.2012, 16:57 |
Burman
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz, Вт, 07.08.2012, 19:27:53)
Потому что у вас нет скрипта записи/чтения кук.


он там есть, только я его оказывается неправильно подцепил, исправил, но все равно не заработало

работает только версия скрипта
Code
:
<div class="hideWrap">
<a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');return false;">Показать</a>
<div style="display:none;" id="hideCont1" class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>


а вот это уже не работает:
Code

<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$("div.hideWrap a.hideBtn").click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
/* End DocumentReady */
});
</script>

и

<div class="hideWrap">
<a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>
<div class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>


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


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