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

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


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

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



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

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

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

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

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

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

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

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






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

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



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

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

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

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

Скрипт

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

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

Код:


<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>

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

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

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




Все готово! Перейдите на страницы форума и проверьте, как это работает

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

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

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

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

Да...

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



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

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

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



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

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

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

http://amurr.gip-gip.ru

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

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

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

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

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

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

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

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

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

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

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

первый виджет
#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" в его названии. Или как еще вам удобнее. В него вставте код. Вставляйте код при вот таком виде значка - . Не забудьте "сохранить".

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

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

А вообще 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>

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

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

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

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

Код:

<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>

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>

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

Dana Domirani Огромное спасибо вам Всё работает отлично.
Хорошо что вы у нас есть

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

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

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

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

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

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

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