|
Плавное сворачивание / разворачивание блока + куки
|
|
|
2011-09-11Дата: Воскресенье, 11.09.2011, 02:35 | Сообщение # 46 |
Аццкий кодер
Группа: Администраторы
Статус: 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))
....
| | |
|
|
2011-10-06Дата: Четверг, 06.10.2011, 00:03 | Сообщение # 47 |
Рядовой
Группа: Пользователи
Статус: Offline
|
Очень помогли ваши решения, по ходу возник ещё вопрос, как сделать чтобы по клику на раскрытие одного другие открытые сворачивались, + первый пункт открытый остальные закрытые при загрузке страницы.
И чтобы не плодить ветки... сложно сделать прокрутку если большой текст в блоке... то-есть ограничить размер блока и сделать прокрутку?
Сообщение отредактировал Serg77 - Четверг, 06.10.2011, 00:04 | | |
|
|
2011-10-10Дата: Понедельник, 10.10.2011, 22:14 | Сообщение # 48 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Serg77, Quote (Serg77) по ходу возник ещё вопрос, как сделать чтобы по клику на раскрытие одного другие открытые сворачивались, + первый пункт открытый остальные закрытые при загрузке страницы.
Вот, именно так как вы и описали, составить скрипт ) ... Примеров и вариантов для старта предостаточно )
...
Quote (Serg77) И чтобы не плодить ветки... сложно сделать прокрутку если большой текст в блоке... то-есть ограничить размер блока и сделать прокрутку?
Нет, не сложно ... относительно. Задать блоку фиксированную высоту и прописать overflow:scroll; ... По сути, если не учитывать мелкие оформительские детали, всё.
...
| | |
|
|
2011-10-17Дата: Понедельник, 17.10.2011, 22:55 | Сообщение # 49 |
Рядовой
Группа: Пользователи
Статус: 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...
| | |
|
|
2011-10-18Дата: Вторник, 18.10.2011, 03:21 | Сообщение # 50 |
Аццкий кодер
Группа: Администраторы
Статус: 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');
...
... Исправляй. И будет всё работать ...
...
| | |
|
|
2011-10-18Дата: Вторник, 18.10.2011, 10:12 | Сообщение # 51 |
Рядовой
Группа: Пользователи
Статус: 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 | | |
|
|
2011-10-18Дата: Вторник, 18.10.2011, 21:43 | Сообщение # 52 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
remus, Quote (remus) А на счёт кода я его взял из твоего поста #9
Хм ... Опять накосячил ) ... Пасибки, ща поправлю )
...
Quote (remus) но всё равно не работает в Chrome, ещё он в Chrome в закрытом виде появляется, а в Firefox хорошо отображаться в открытом.
Даже пример в Хроме не работает???
... Ты, часом, не на локале тестишь? в смысле не с жесткого запускаешь? - с харда Хром не пишет куки (такая специфика), только с WEB-сервера.
... Если нет, ссылочку оставь не страницу где не работает - посмотрю что так ...
...
Quote (remus) А внедрить этот код к основному, точнее отредактировать первый и заменить на этот помоги
..?
Не очень понял куда ты это “внедрить” хочешь? ...
У тебя что, на странице только один (1) блок с классом «.hidden_menu» - если один, то почему класс а не ID? Если не один ... то вообще не понятно ... Открываться же будут все ...
...
| | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 11:59 | Сообщение # 53 |
Рядовой
Группа: Пользователи
Статус: Offline
|
Quote (likbezz) Ты, часом, не на локале тестишь? в смысле не с жесткого запускаешь?
Да с него  :D
Code (function($) {
$("#hidden_menu_button").click(function() {
if ($("#hidden_menu").is(":hidden")) {
$("#hidden_menu").slideDown("normal");
} else {
$("#hidden_menu").slideUp("normal");
}
});
})(jQuery);
да блин я чуть не то кинул, мне надо что бы открывалось по этой системе, вот, а блок у меня не 1 их 16 
просто я разобраться не могу в 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 | | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 14:41 | Сообщение # 54 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
remus, Quote (remus) Да с него 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 не сработает.
Надеюсь понятно описал ....
...
| | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 17:30 | Сообщение # 55 |
Рядовой
Группа: Пользователи
Статус: 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 | | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 18:02 | Сообщение # 56 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
remus, Quote (remus) Я хотел поменять с $.slideToggle(); на $.slideUp();$.slideDown(); я про эти функции читал, но мне функция $.slideToggle(); не нравиться тем что когда много раз нажимаешь на неё, ну допустим большой текст, он будет открывать закрывать, хотя ты уже убрал курсор, а функции $.slideUp();$.slideDown(); не дают так делать...
Понятно ) Ok.
...
| | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 23:48 | Сообщение # 57 |
Рядовой
Группа: Пользователи
Статус: 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 | | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 23:56 | Сообщение # 58 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
remus, Quote (remus) что то не дописал я, что бы изначально в открытом виде блоки были...
Ответ ...
...
Учимся юзать поиск ...
...
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 22:40 | Сообщение # 59 |
Рядовой
Группа: Пользователи
Статус: 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>
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 22:59 | Сообщение # 60 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
remus, Quote (remus) но на див работает, а на таблице нет! почему?
Потому что:
Code var cont = $(this).siblings('.hideCont');
.siblings() - Осуществляет поиск элементов, являющихся соседними для выбранных элементов (под соседними понимаются элементы, которые имеют общего родителя)...
...
| | |
|
