Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

автор **Luz** Октябрь 5th 2010, 14:37

Первое сообщение в теме :

Сворачивающиеся и разворачивающиеся виджеты форума

Для чего это нужно?

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

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget14

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Warning2

Внимание: этот скрипт отлажен для версий PHPBB3, INVISION и PUNBB.
Для версии PHPBB2 он может работать, но пока не отлажен.

Как это будет работать?

Установить этот скрипт очень легко - для его установки не нужен доступ к шаблонам. Однако в зависимости от положения виджетов на форуме (слева или справа) он устанавливается по-разному.

Скрипт запоминает ваш выбор даже при переходе на другие страницы форума и при обновлении страницы. Вы можете изменить режим показа, снова щелкнув по стрелочке или же очистив кэш браузера.

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Warning2

Внимание : данный скрипт не будет действовать, если на вашем форуме виджеты установлены и слева, и справа !

Установка скрипта

Для того, чтобы установить скрипт, вы должны создать два персональных виджета:

ПА ► Модули ► Портал & Виджеты ► Виджеты главной страницы
Создать персональный виджет

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget10

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget10

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget11

Скрипт состоит из двух частей, каждая из которых будет помещена в свой виджет.
Один из этих виджетов надо будет потом установить сверху, над всеми вашими виджетами, а другой - снизу, под всеми виджетами.

Когда вы щелкните по кнопке "Создать персональный виджет", откроется страница редактирования виджета :

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget12

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget12

Имя виджета ► Вы можете выбрать любое имя, для простоты на этом форуме мы назвали их "Первый виджет" и "Последний виджет".

Использовать стандартный шаблон ► нет

Название виджета ► оставьте это поле пустым.

Содержание виджета ► Вставьте сюда коды, приведенные ниже - свой код для каждого виджета и в зависимости от положения ваших виджетов (слева или справа).

Скрипт

Для форумов с виджетами в левой колонке:

Для "Первого виджета" (то есть виджета, который вы поставите в самом верху, над всеми вашими виджетами) добавьте в поле "Содержание виджета" следующий код:

Код:: <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i13.servimg.com/u/f13/16/54/26/99/arrow_10.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>

Вы можете изменить значение элементов #f5ebf7 и https://i.servimg.com/u/f13/16/54/26/99/arrow_10.png в соответствии с дизайном вашего форума.

Код #f5ebf7 определяет фоновый цвет стрелки, ссылка http://oi42.tinypic.com/vg54yu.png отвечает за изображение стрелки.

Для "Последнего виджета" (то есть виджета, который вы поставите в самом конце, под всеми виджетами) добавьте в поле "Содержание виджета" следующий код:

Код:: <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

Для форумов с виджетами в правой колонке:

Для "Первого виджета" (то есть виджета, который вы потом поставите в самом верху, над всеми вашими виджетами) добавьте в поле "Содержание виджета" следующий код:

Код:: <div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i13.servimg.com/u/f13/16/54/26/99/arrow_10.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>

Вы можете изменить значение элементов #f5ebf7 и https://i.servimg.com/u/f13/16/54/26/99/arrow_10.png в соответствии с дизайном вашего форума.

Код #f5ebf7 определяет фоновый цвет стрелки, ссылка https://i.servimg.com/u/f13/16/54/26/99/arrow_10.png отвечает за изображение стрелки.

Для "Последнего виджета" (то есть виджета, который вы потом поставите в самом конце, под всеми виджетами) добавьте в поле "Содержание виджета" следующий код:

Код:: <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

Установка виджетов на форум

После того, как вы создали виджеты, вы должны установить их на ваш форум:

ПА ► Модули ► Портал & Виджеты ► Виджеты главной страницы
Выберите вкладку "Персональные виджеты, найдите два созданных вами только что виджета и перетащите их мышкой на нужное место - то есть "Первый виджет" на самый верх, "Последний виджет " - в самый низ. Не забудьте нажать на "Сохранить"

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget13

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 Widget13

Все готово! Перейдите на страницы форума и проверьте, как это работает Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 75998

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 75998

© Данный туториал создан на основе туториала, написанного командой англоязычного форума поддержки нашего сервиса help.forumotion.com. Любая публикация этого материала без нашего разрешения запрещается.

idjer83, попробуйте так, для правой колонки - в первом (верхнем) виджете поставьте:

Код:: <div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>

Во втором (нижнем):

Код:: <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

автор Tara Октябрь 20th 2010, 21:47

У меня тоже не пашет (извени что вклинилась) но я на втором бобике наверно по этому.

автор idjer83 Октябрь 20th 2010, 21:50

HTML на форуме включил, все старые удалил, а скрытые как посмотреть?

автор Tara Октябрь 20th 2010, 21:54

Dana Domirani А вы для левого виджета не дадите такой код а? У меня лично получилось я думаю и автора темы получится! Может у вас есть, очень надо, а то у меня виджет слева стоит так красивее.
yes

Конечно! Для левой колонки код:
Верх -

Код:: <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>

Низ -

Код:: <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

автор idjer83 Октябрь 20th 2010, 22:02

Dana Domirani пишет:idjer83, попробуйте так, для правой колонки - в первом (верхнем) виджете поставьте:
Код:
<div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>

Во втором (нижнем):
Код:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

да спасибо всё работает

автор Tara Октябрь 20th 2010, 22:17

Dana Domirani Огромное спасибо вам

Всё работает отлично.
Хорошо что вы у нас есть girl_yes

Всегда рада, когда могу помочь )

автор K13 Октябрь 21st 2010, 00:23

Аналогично, отображаются текстом скрипты.
Причем я писал в соседней теме - аналогично не получилось ничего с футером.

html везде включен, все делалось по инструкции. В чем может быть еще причина?

K13, футер рабочий, этот скрипт тоже. Надо только найти допущенную ошибку.

отображаются текстом скрипты

Попробовали установить так?

автор K13 Октябрь 21st 2010, 00:36

Отобой, сейчас с панелью все получилось. По методу, который указан выше в сообщениях.
Единственное, почему-то при обновлении панель опять появляется, хоть и написано, что будет запоминать.

Подправьте скрипт в нижнем виджете - замените на этот:

Код:: <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

автор K13 Октябрь 21st 2010, 01:48

Получилось.
Последний вопрос.
Неожиданно эта панель стала как бы "поверх форума". Т.е. форум не сжимается. Попробовал отключить все, однако даже нескрывающаяся панель стала поверх форума.

автор kpripper Ноябрь 24th 2010, 14:28

Никто не замечал подвисания браузера после установки скриптов ?

автор Лого Декабрь 3rd 2010, 14:50

на ВВ2 не работает?

автор master Декабрь 3rd 2010, 19:11

Внимание: этот скрипт отлажен для версий PHPBB3, INVISION и PUNBB.
Для версии PHPBB2 он может работать, но пока не отлажен.

автор alexx-demko Январь 17th 2011, 12:43

Dana Domirani пишет:Сверху и снизу? это отображение блоков виджетов, в которых находится скрипт. Поставьте в их настройках: использовать стандартный шаблон - нет.

скажите пожалуйста, вы не смотрели и не думали над тем скриптом, что-бы по умолчания виджеты были свернуты?

автор spirale Февраль 3rd 2011, 23:47

А куда можно копнуть, если стрелочки неактивны? Сделала в сочетании с кодом отсюда https://help.forum2x2.ru/t13940-topic, колонка по умолчанию спрятана, но и не открывается по нажатию на стрелку. Если код из css убрать, колонка видна всегда, стрелочка отображается "для разворачивания" и она так же неактивна, т.е. колонку свернуть нельзя. Форум BB2, колонка справа.

автор kpripper Март 19th 2011, 13:51

Отладьте плиз для ВВ2.

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 3 7f0d5572ef84

автор alexx-demko Март 20th 2011, 06:22

spirale пишет:А куда можно копнуть, если стрелочки неактивны? Сделала в сочетании с кодом отсюда https://help.forum2x2.ru/t13940-topic, колонка по умолчанию спрятана, но и не открывается по нажатию на стрелку. Если код из css убрать, колонка видна всегда, стрелочка отображается "для разворачивания" и она так же неактивна, т.е. колонку свернуть нельзя. Форум BB2, колонка справа.

да, про эту тему так и забыли....

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума

Re: Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума