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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новый скрипт : Сворачивающиеся и разворачивающиеся виджеты форума - Страница 2 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>

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

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

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

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

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

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

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

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

http://www.smesharik-funclab.net/ - ну слева то все нормально работает. А так, что бы сразу с обеих сторон увы нельзя. Только или левая колонка или правая. pardon

автор cvtifhbr Октябрь 7th 2010, 14:07

Увы......

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

автор cvtifhbr Октябрь 7th 2010, 14:17

Но, слева действует!
Действует только слева

автор Emi Октябрь 7th 2010, 14:53

У меня какие то поля появились... как исправить?

автор **Dana Domirani** Октябрь 7th 2010, 14:58

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

автор Emi Октябрь 7th 2010, 15:04

У меня так и стоит, но все равно... и еще картинка стрелочки не видна...

А точно скрипт именно для ПРАВЫХ виджетов?

автор Emi Октябрь 7th 2010, 15:10

Да...

Все у вас работает, только картинки со стрелками не видно.

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

Попробуйте расширить окно в скрипте - height: 13px; width: 16px
тогда будет видно что и куда двигать дальше.

автор LION Октябрь 8th 2010, 14:22

В качестве общей информации.

Установил скрипт на форум phpBB2 в правую колонку.
Все работает прекрасно, колонка сворачивается отлично, однако, если в колонке есть картинки, например банеры, они не сворачиваются, а остаются. То есть вся колонка исчезает, а банер остается:

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

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

Проблема решается только удалением банеров из колонки.

автор auelhan Октябрь 10th 2010, 13:44

Установилось нормально.Мелочь,а приятно.Спасибо!

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

Здравствуйте, всё сделал как описано в теме, но у меня пишет скрипты, сверху и снизу виджетов

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

http://amurr.gip-gip.ru

А когда вы вставляли скрипт в виджет - значек над левом верхнем полем окна был такой? - open

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

Изобретатель пишет:А когда вы вставляли скрипт в виджет - значек над левом верхнем полем окна был такой? -

красный плюс был

Надо что бы был open

зеленый. Вставляете скрипт - потом "сохранить".

Кстати я у себя оба скрипта в один верхний виджет запихнул и все работает.

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

Изобретатель пишет:Надо что бы был зеленый. Вставляете скрипт - потом "сохранить".

Кстати я у себя оба скрипта в один верхний виджет запихнул и все работает.

Переделал с зелёным плюсом всё равно скрипты пишет

Скопируйте то, что вы выложили в верхний виджет. Скопируйте именно из ВАШЕГО виджета. Потом выложите скопированное сюда.

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

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

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

Изобретатель пишет:Скопируйте то, что вы выложили в верхний виджет. Скопируйте именно из ВАШЕГО виджета. Потом выложите скопированное сюда.

первый виджет
#f5ebf7 url(http://oi42.tinypic.com/vg54yu.png[/url]) 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'); }">

Все правильно. Тогда вам надо убедится, что в том виджете НИЧЕГО более не осталось. Лучше вообще создайте новый персональный виджет..... - скажем с индексом "1" в его названии. Или как еще вам удобнее. В него вставте код. Вставляйте код при вот таком виде значка - open

. Не забудьте "сохранить".

С нижним виджетом проделайте тоже самое.

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

не получилось я уже 3 раза по разному делал, всё равно скрипты пишет, уже не знаю что делать?
Что самое интересное самый первый раз слева у меня всё нормально было, а потом бах и хана

автор **Lika** Октябрь 20th 2010, 21:16

А вообще HTML на форуме разрешён?
ПА-Общ. настройки-Сообщения-Конфигурация-Разрешить HTML-Да.

idjer83 пишет:не получилось я уже 3 раза по разному делал, всё равно скрипты пишет, уже не знаю что делать?
Что самое интересное самый первый раз слева у меня всё нормально было, а потом бах и хана

Слева!? Если остался скрытый виджет слева, то так и будет! Скрипт может работать только "там или там". Проверьте все, что относится к левым виджетам. Все удалены? Скрытых нет?

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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