Боковой блок с инфой.

Список разделов phpBBex 1.x (поддерживается) Поддержка 1.x

Описание: У вас проблемы с phpBBex 1.x и вам необходима помощь? Спрашивайте здесь!
Правила раздела: Одна тема — один вопрос или группа связанных вопросов. Обязательно формируйте внятный заголовок, максимально отражающий суть вопроса. Подробно описывайте проблему. Не забудьте указать версию phpBBex и какие моды установлены, по возможности добавьте скриншоты проблемы или ссылку на страницу с проблемой.
Модератор: Поддержка

Сообщение #1 Леля » 24.02.2015, 10:06

Ребята, подскажите, пожалуйста, как сделатьвот такой блок как на http://konliga.biz/ , чтобы там разместить виджеты от социалок или рекламные блоки, например. Хорошо бы что бы он также сворачивался, но не закрывался. И еще было бы хорошо, чтобы и справа и слева такой висел.

Может кто подскажет, как это реализовать. Я понимаю что это с помощью скрипта делается, но я в этом вообще не бум-бум.

Добавлено спустя 3 минуты 55 секунд:
Я попробова с их сайта выдернуть скрипт, вот что получилось, он не сворачивается и не закрывается http://мамины-ручки.рф/test/index.php

вставляла в overall_footer перед /body вот этот код
Код: Выделить всё
<div class="sticky_social" style="right: 264px;">

   <div class="wrap_btn">
          <div class="close_btn"></div>
          <div class="hide_btn"></div>
       </div>

   <div class="wrap_social">

<div id="ok_group_widget"></div>
<script>
!function (d, id, did, st) {
  var js = d.createElement("script");
  js.src = "http://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertGroupWidget(id,did,st);
      }, 0);
    }
  }}
  d.documentElement.appendChild(js);
}(document,"ok_group_widget","52149176172696","{width:240,height:335}");
</script>

      </div>   
</div>

<script>

$(function(){

   if ($.cookie('_sticky_social_close')) return;
   
   var sticky = $( ".sticky_social" );
   var pr = $(window).width() - (sticky.offset().left + sticky.outerWidth());      
   var inDelay = false;

   if (!$.cookie('_sticky_social_hide') || $.cookie('_sticky_social_hide') == 0)
   {
      inDelay = true;
      if( getPr() <= 0 )
      {
         sticky.removeClass('hide');
         sticky.delay( 15000 ).animate({
            right: "+=264"
         }, 700, function() {
         });

      }
   }
   else {
      sticky.delay( 1000 ).animate({
         right: "+=26"
      }, 700, function() {
      });      
   }

   $('.hide_btn').click(function(event){
      if( getPr() < 0 ){ // hidden
         sticky.removeClass('hide');
         sticky.animate({
            right: "+=238"
         }, 700, function() {
            $.cookie('_sticky_social_hide', null,{expires: 365});
            $.cookie('_sticky_social_hide', 0,{expires: 365});
         });
         
       } else { // visible
         sticky.addClass('hide');
         sticky.animate({
            right: "-=238"
         }, 700, function() {
            $.cookie('_sticky_social_hide', 1,{expires: 365});
         });
      }
      return false;
   });
   

   function getPr() {
      return $(window).width() - (sticky.offset().left + sticky.outerWidth());
   }
   
   $('.sticky_social .close_btn').click(function(){
      $.cookie('_sticky_social_close', 1,{expires: 365});
      $('.sticky_social').fadeOut();
      return false;
   });

});
</script>

в стили добавила следущее (естесственно ссылки и цвета я потом на свои поменяю, пока пробую)

Код: Выделить всё
.sticky_social {
   width:262px;
   height:500px;
   position:fixed;
   right:0;
   top:50%;
   margin-top:-171px;
   z-index:100;
   margin-right:-264px;
   z-index:1000;
   background:#f6eebe;
   border:1px solid #a29d78;
   -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}
.sticky_social .like {
   padding: 10px;
   font-size: 18px;
   color:#000;
   font-weight:bold;
}
.sticky_social.hide {
}


.sticky_social .wrap_btn {
   position:absolute;
   left:0;
   height:240px;
   width:21px;   
}
.sticky_social .close_btn {
   width:18px;
   height:18px;
   background:url(btn-close.png);
   position: absolute;
   top: 5px;
   left: 5px;
   cursor: pointer;
}
.sticky_social .hide_btn {
   width:12px;
   height:56px;
   background:url(btn-minimize.png);
   position: absolute;
   top: 230px;
   left:5px;
   transform: rotate(0deg);
   cursor: pointer;
}
.sticky_social.hide .hide_btn {
   transform: rotate(180deg);
   transition: all 0.1s ease 0s;
   right:26px;
}

.sticky_social .wrap_social   {
   margin: 0 0 10px 30px;
}
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #2 Sumanai » 24.02.2015, 15:22

Леля:он не сворачивается и не закрывается
Консоль как всегда намекает:
Код: Выделить всё
TypeError: $.cookie is not a function
То есть вам нужен плагин jquery.cookie.js, это яваскрипт библиотека, которую нужно подключить до вставляемого вами в шаблоны кода. Лучше сразу после jquery в шапке.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #3 Леля » 24.02.2015, 20:20

оттуда же выдернула эту библиотеку и библиотеку jquery, подключила их в overall_header перед

Код: Выделить всё
<!-- IF WP_HEADERINFO_LATE -->{WP_HEADERINFO_LATE}<!-- ENDIF -->
</head>

вставила

Код: Выделить всё
<script type="text/javascript" src="http://xn----7sbybjibj2a4a8b5b.xn--p1ai/test/styles/mr/template/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://xn----7sbybjibj2a4a8b5b.xn--p1ai/test/styles/mr/template/jquery.cookie.js"></script>

вроде что-то заработало, но коряво, сначала выезжает на середину, а затем при сворачивании, можно еще 2 раза свернуть. Посмотрите, пожалуйста, :pray: куда дальше копать...
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #4 HD321kbps » 24.02.2015, 23:24

есть мод подобный, если переделать, то самое то) тут
Изображение
Изображение
Как вариант!
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет

Сообщение #5 Sumanai » 25.02.2015, 05:21

Леля:библиотеку jquery

Это для чего? В phpBBex она уже есть. Удаляйте.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #6 Леля » 25.02.2015, 05:43

Sumanai, удалила :oops: Почему вместо того чтобы прятаться он выезжает на середину, в чём может быть причина?

HD321kbps, спасибо, посмотрю. :smile:

Добавлено спустя 44 минуты 53 секунды:
и ещё вопросик, может подскажите. Думала может просто сделать блок который при наложении будет прятаться за основной контент, но при наведении вылазить. Я так понимаю это делается с помощью слоев z-index:. Но я так понимаю всем элементам, по умолчанию стоит z-index:0, поэтому мой блок всё равно получается сверху (кроме строки меню). Если ставить z-index:-1, тогда :hover перестаёт работать.

Как сделать так чтобы блок был между фоном и остальными элементами, а при наведении мышки всплывал наверх (возможно ли это псделать просто стилями?)
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #7 Леля » 25.02.2015, 22:42

неужели никто не поможет :sad:
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #8 HD321kbps » 25.02.2015, 23:41

можно попробовать для :hover задать один z-index, для обычного состояния другой)
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет

Сообщение #9 Леля » 26.02.2015, 05:59

HD321kbps, ну я так и делала для blok:hover я задаю z-index:1000 , чтобы он наверняка был поверх всех слоев. Но при задании blok { z-index:-1} , перестаёт работать blok:hover. А при др. значаниях блок, на маленьком экране, перекрывает имеющиеся слои, а должен уходить за них, а при наведении мыши появляться сверху.
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #10 Sumanai » 26.02.2015, 16:10

Леля, тут проблема скорее в контекстах наложения. Он же у вас скорее всего абсолютно спозиционирован?
Леля:. Думала может просто сделать блок который при наложении будет прятаться за основной контент, но при наведении вылазить.
Может просто сдвигать за пределы страницы?
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #11 Леля » 26.02.2015, 17:28

Sumanai:Он же у вас скорее всего абсолютно спозиционирован?
да абсолютно.

Sumanai:Может просто сдвигать за пределы страницы?

А как? Имеете в виду, чтобы при нажатии на него он скрывался за пределы, т.е задать минусовое значение? Смысл в том, чобы эти блокин не мешались на маленьких экранах.
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #12 Sumanai » 27.02.2015, 21:36

Леля:Имеете в виду, чтобы при нажатии на него он скрывался за пределы, т.е задать минусовое значение?
Ага. Или наоборот, чтобы по умолчанию он был за пределами экрана.
Леля:Смысл в том, чобы эти блокин не мешались на маленьких экранах.
Может, просто скрыть медиазапросами?
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #13 Леля » 27.02.2015, 21:38

Sumanai:Может, просто скрыть медиазапросами?

может подскажете как :oops:
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #14 Sumanai » 27.02.2015, 21:41

Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #15 Леля » 27.02.2015, 21:42

Sumanai, спасибо поизучаю :smile:
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц

Сообщение #16 kuchnaii » 28.02.2015, 11:57

А при др. значаниях блок, на маленьком экране, перекрывает имеющиеся слои, а должен уходить за них, а при наведении мыши появляться сверху.??
kuchnaii
Репутация: 1
С нами: 9 лет 1 месяц

Сообщение #17 Леля » 28.02.2015, 12:01

kuchnaii, именно так
Леля F
Автор темы
Аватара
Откуда: Новосибирск
Репутация: 7
С нами: 10 лет 1 месяц


Вернуться в Поддержка 1.x