Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Всплывающие блоки справа и слева

Предыдущая тема Следующая тема Перейти вниз

Всплывающие блоки справа и слева

Сообщение автор Домовой в Пт 1 Ноя - 19:32

Туториал подходит для всех версий форума.

Всплывающие блоки справа и слева для размещения текста, ссылок и прочей лабуды.
Можно ставить по одному или сразу оба.
При желании можно поставить несколько, предварительно изменив селекторы в скриптах и в CSS.
На примере два блока, справа и слева.

Выглядит это так

До клика на кнопки



После клика на кнопки



Инструкция по установке для версий форума [punBB и phpBB2]
Установка правого блока.

Управление кодами Javascript создайте новый Javascript

Название * : Правый блок
Расположение : На всех страницах
Код Javascript * :

Код:
$(document).ready(function(){
    $('.splLinkR').click(function(){
      $(this).parent().children('div.splContR').toggle('normal');
      return false;
    });
  });
Сохранить.

Далее откройте шаблон overall_header и перед </head> вставьте

<!--Блок с содержимым правой панели-->
<div style="position:fixed;right:3px;top:100px;z-index:20000">
  <div class="splLinkR"><img src="ссылка на картинку кнопку" title="Правый блок"/></div>
<div class="splContR" style="display:none;position:absolute;">
ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА
</div></div>
В коде значения
right:3px;top:100px;
расположение кнопки от правого и верхнего края монитора соответственно.
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.

Код:
/*Правая панель*/
.splContR {
width:200px!important; /*ширина окна*/
height:auto; /*высота окна*/
background-color:#fff !important; /*фон окна*/
top:55px; /*отступ окна от верха кнопки*/
right:7px; /*отступ окна от правого края монитора*/
border:1px solid #828282; /*толщина, стиль и цвет рамки окна*/
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
box-shadow:0 0 20px 3px #828282;
-webkit-box-shadow:0 0 20px 3px #828282;
-moz-box-shadow:0 0 20px 3px #828282;
padding:10px 10px 10px 10px;
text-align:center;
color:#000000 !important; /*цвет шрифта*/
font-size:12px; /*размер шрифта*/
}
Оформляйте на свой вкус и цвет))





Установка левого блока

Управление кодами Javascript создайте новый Javascript

Название * : Левый блок
Расположение : На всех страницах
Код Javascript * :

Код:
$(document).ready(function(){
    $('.splLinkL').click(function(){
      $(this).parent().children('div.splContL').toggle('normal');
      return false;
    });
  });
Сохранить.

Далее откройте шаблон overall_header и перед </head> вставьте

<!--Блок с содержимым левой панели-->
<div style="position:fixed;left:3px;top:100px;z-index:20000">
  <div class="splLinkL"><img src="ссылка на картинку кнопку" title="Левый блок"/></div>
<div class="splContL" style="display:none;position:absolute;">
ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА
</div></div>
В коде значения
left:3px;top:100px;
расположение кнопки от левого и верхнего края монитора соответственно.
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.

Код:
/*Левая панель*/
.splContL {
width:200px!important;/*ширина окна*/
height:auto; /*высота окна*/
background-color:#fff !important; /*фон окна*/
top:55px; /*отступ окна от верха кнопки*/
left:7px; /*отступ окна от левого края монитора*/
border:1px solid #828282; /*толщина, стиль и цвет рамки окна*/
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
box-shadow:0 0 20px 3px #828282;
-webkit-box-shadow:0 0 20px 3px #828282;
-moz-box-shadow:0 0 20px 3px #828282;
padding:10px 10px 10px 10px;
text-align:center;
color:#000000 !important; /*цвет шрифта*/
font-size:12px; /*размер шрифта*/
}


Установка на форумы версий [IPB и phpBB3] делается в той же последовательности, за исключением установки кодов для блоков с содержимым.

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

Живой пример временно можно посмотреть на phpBB3 и на punBB
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

Без предупреждений

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения