В гостях у Домового

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » В гостях у Домового » Архив » Всплывающие блоки справа и слева


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

Сообщений 1 страница 8 из 8

1

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

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

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

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

http://s7.uploads.ru/t/Tadj3.jpg

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

http://s7.uploads.ru/t/MHTRb.jpg

Инструкция по установке для версий форума [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; /*размер шрифта*/
}

Живой пример временно можно посмотреть ЗДЕСЬ и ЗДЕСЬ

+1

2

Юра, а два "подряд" как-бы, можно ставить? (одна лупа-поиск в гугл, ниже-поиск по сайту) http://s4.uploads.ru/Th9Pt.gif


Домовой написал(а):

При желании можно поставить несколько, предварительно изменив селекторы в скриптах и в CSS.

Точнее, на чтокак изменить селекторы? http://s5.uploads.ru/ehoTu.gif

Отредактировано Тру-Katja (04.05.2014 15:12)

0

3

Тру-Katja написал(а):

Точнее, на чтокак изменить селекторы?

$(document).ready(function(){
    $('.splLinkR').click(function(){
      $(this).parent().children('div.splContR').toggle('normal');
      return false;
    });
  });

<!--Блок с содержимым правой панели-->
<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>

/*Правая панель*/
.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; /*размер шрифта*/
}

красное надо сменить на своё название

+1

4

Домовой написал(а):

красное надо сменить на своё название


Юра, тоесть всё это дополнять по второму кругу (и в шаблон), только сменив название дивкласса? (помню, что читала ваше объяснение про смену наименования див/к., в какой-то теме, и вродь даже поняла :idea: но не факт :insane: )
Ок, я сейчас попробую (и отпишусь), спасибооо! http://s4.uploads.ru/9bP5B.gif  http://s3.uploads.ru/4JeN5.gif  http://s2.uploads.ru/9ap75.gif

0

5

Юра, всё получилось, спасибоооооо большое!!! http://s4.uploads.ru/Sp7o0.gif  http://s4.uploads.ru/9bP5B.gif  http://s0.uploads.ru/Dd8ca.gif  http://s3.uploads.ru/4JeN5.gif  http://s3.uploads.ru/cEP0b.gif  http://s5.uploads.ru/EeBF9.gif  http://s4.uploads.ru/WRmSi.gif


П.С. а нет возможности, что-бы окошки сами сворачивались, после открытия страницы с найденым?

(я сейчас оба поиска на пользовательский гугл поставила (просто что-бы проверить, потом просто заменю содержимое), оба работают, но даже после закрытия найденного, они оба "висят" на стартовой странице...  http://s5.uploads.ru/gRqh6.gif может это исправимо?)

Отредактировано Тру-Katja (06.05.2014 20:46)

0

6

Тру-Katja написал(а):

П.С. а нет возможности, что-бы окошки сами сворачивались, после открытия страницы с найденым?

Может и есть если как тот изменить скрипт.
Но я не умею писать скрипты.
Так что наслаждайте тем что есть

0

7

Тру-Katja, я бы опустил чуток ниже.
Панель ререкрывает

http://i64.fastpic.ru/big/2014/0506/83/c7cdbf4fbe0226467bbb73a6a3e74183.jpg

и ещё эта панель перекрывает меню навигации.
Фиксированое меню не канает если активирована панель

0

8

Домовой написал(а):

Может и есть если как тот изменить скрипт.
Но я не умею писать скрипты.
Так что наслаждайте тем что есть


Есть! http://s4.uploads.ru/Sp7o0.gif  http://s4.uploads.ru/Sp7o0.gif  http://s4.uploads.ru/Sp7o0.gif

Ещё раз спасибо Юр! http://s4.uploads.ru/pRdKf.gif  http://s4.uploads.ru/WRmSi.gif

0


Вы здесь » В гостях у Домового » Архив » Всплывающие блоки справа и слева