Единый форум поддержки

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

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

Вы здесь » Единый форум поддержки » Корзина » Боковая всплывающая панель.

Боковая всплывающая панель.

Страница: 1

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

1

  • Автор: Домовой
  • Cтарожил
  • Домовой
  • Зарегистрирован: Пн, 22 Сен 2008
  • Сообщений: 5079
  • Уважение: +1498
  • Позитив: +854
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 09:05:01

Вот перекопал всё но ответа не нашёл.
Вот код на всплывающую панель нашёл здесь

Код:
<!-- JampPanel-->
<style>
#JampPanel:hover{
margin-right:-20px;
}
#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #FE2323;
background-color:#F0F0F0;
box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
}
#JampPanel {opacity:0.86;
position:fixed;z-index:1200;
height:190px;top:8px;right:0;margin-right:-202px;
background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 4px 2px no-repeat;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
width:230px;
}
#JampPanel .container{
padding:12px;
height:400px;
width:100%;margin:-1px 0 0 30px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#F0F0F0;
margin:-12px 0 0 -18px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
Ваш контент
  </div>
</div>
<!--End//JampPanel-->

Но эта панель расположена справа и выдвигается в левую сторону.
Обращаюсь к спецам.
Переделайте пожалуйста этот код что бы расположение было как бы зеркальное, то есть то же самое только с левой стороны.
И открытие было не наведением курсора а кликом.

0

2

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

Good

Код:
<!-- JampPanel-->
<style>
#JampPanel:hover{
margin-left:260px;
}
#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #FE2323;
background-color:#F0F0F0;
box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
}
#JampPanel {opacity:0.86;
position:fixed;
z-index:1200;
height:190px;
top:8px;
left:-200px;
margin-left: 0px;
background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 200px 2px no-repeat;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
width:230px;
}
#JampPanel .container{
padding:12px;
height:400px;
width:100%;
margin:-1px 0 0 -60px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#F0F0F0;
margin: -12px 0 0 234px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
Ваш контент
  </div>
</div>
<!--End//JampPanel-->

Про открытие кликом - нужно подумать.. Мож вечером попробую пошаманить что-то со старым скриптом от Deff'а с чатом сплывалкой.. там кажись было событие по клику.

Отредактировано Кофеман (Чт, 14 Фев 2013 19:08:51)

0

3

  • Автор: Домовой
  • Cтарожил
  • Домовой
  • Зарегистрирован: Пн, 22 Сен 2008
  • Сообщений: 5079
  • Уважение: +1498
  • Позитив: +854
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 09:05:01

Спасибо, подожду.
А где увидеть этот скрипт с чатом?
Може меня тот вариант вполне устроит.

0

4

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

Good
Один из вариантов вот тут - Общие вопросы по оформлению (28)
Только там нужно поиграться с оформлением.

+1

5

  • Автор: Домовой
  • Cтарожил
  • Домовой
  • Зарегистрирован: Пн, 22 Сен 2008
  • Сообщений: 5079
  • Уважение: +1498
  • Позитив: +854
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 09:05:01

Кофеман, нет, это совсем не то.
Надо такую же панель как та что я выложил выше, только слева.

0

6

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

Good
я понял... чуть освобожусь и попробую механизм клика прикрутить к коду, что я для Вас исправил под левую сторону.

+1

7

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51194
  • Уважение: +15227
  • Позитив: +11642
  • Последний визит:
    Сегодня 15:32:28

http://forumdts.org/viewtopic.php?id=30 … =2#p107832

+2

8

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

Deff
Так стилем я ему тоже выровнял по  левому краю. У тебя сделано с помощью стиля по "hover", а ему нужно по клику..
Чтоб оно выплавало по клику я сделал, а вот как его обратно засунуть по второму клику - не выходит у мну.

0

9

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51194
  • Уважение: +15227
  • Позитив: +11642
  • Последний визит:
    Сегодня 15:32:28
Кофеман написал(а):

Deff
Чтоб оно выплавало по клику я сделал, а вот как его обратно засунуть по второму клику - не выходит у мну.

А де код ?

0

10

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51194
  • Уважение: +15227
  • Позитив: +11642
  • Последний визит:
    Сегодня 15:32:28
Код:
<!-- JampPanel -Cлево -->
<style>

#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #FE2323;
background-color:#F0F0F0;
box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
}
#JampPanel {opacity:0.86;
 position:fixed;z-index:1200;
 height:190px;top:8px;left:0;margin-left:-202px;
 background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 202px 2px no-repeat;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
 width:230px;
}
#JampPanel .container{
 padding:12px;
 height:400px;
 width:100%;margin:-1px 0 0 -58px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
 position:absolute;
 height:190px;width:14px;
 background-color:#F0F0F0;
 margin:-12px 0 0 234px;
}
#Klicalka{ /*прикрывает "УХО"*/
 position:absolute;
 height:190px;width:44px;
 margin:-12px 0 0 234px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
    <div id=Klicalka></div>
Ваш контент
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
(function() { 
var NumClick = 0;
$('#Klicalka').click(function() { 
 NumClick=(NumClick+1)%2;
 if(NumClick){
   $('#JampPanel').animate({'margin-left':'45px'},200,'swing');
 } else $('#JampPanel').animate({'margin-left':'-202px'},200,'swing');
});
}());
});
</script>
<!--End//JampPanel-->

+3

11

  • Автор: Домовой
  • Cтарожил
  • Домовой
  • Зарегистрирован: Пн, 22 Сен 2008
  • Сообщений: 5079
  • Уважение: +1498
  • Позитив: +854
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 09:05:01

Спасибо ребята, то что нужно.++++
Остальное я уже сам подработаю.

0

12

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

Deff
Спасибо! Ларчик просто открывался.. а мну понесло в сторону ".toggle"..

0

13

  • Автор: maxshow
  • Заслуженный
  • maxshow
  • Зарегистрирован: Чт, 7 Фев 2013
  • Сообщений: 44
  • Уважение: 0
  • Позитив: +2
  • Последний визит:
    Чт, 12 Мар 2015 12:27:58
Deff написал(а):

http://forumdts.org/viewtopic.php?id=30 … =2#p107832

А можете выложить  такой скрипт панели как  по этой ссылке ссылке?))))

0

14

  • Автор: Домовой
  • Cтарожил
  • Домовой
  • Зарегистрирован: Пн, 22 Сен 2008
  • Сообщений: 5079
  • Уважение: +1498
  • Позитив: +854
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 09:05:01
maxshow написал(а):

А можете выложить  такой скрипт панели как  по этой ссылке ссылке?))))

А вы сами не можете скопировать по этой ссылке?

0

15

  • Автор: maxshow
  • Заслуженный
  • maxshow
  • Зарегистрирован: Чт, 7 Фев 2013
  • Сообщений: 44
  • Уважение: 0
  • Позитив: +2
  • Последний визит:
    Чт, 12 Мар 2015 12:27:58
Good написал(а):

А вы сами не можете скопировать по этой ссылке?

Меня не этот скрипт интересует, а выпадающая панель сверху, как на этом форуме.Вот такая ,как на скриншоте)))
http://s3.uploads.ru/9u46Z.png

Она прячется вверху вот так.Может это не панель, а объявление?

открыть/закрыть

http://s2.uploads.ru/HwIkL.png

Помогите пожалуйста найти такой скрипт...

Отредактировано maxshow (Пн, 25 Мар 2013 13:28:32)

0

16

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51194
  • Уважение: +15227
  • Позитив: +11642
  • Последний визит:
    Сегодня 15:32:28

maxshow
Там на форуме тож есть её код - поищите и спросите там жа

0

17

  • Автор: kleo3333
  • Заслуженный
  • kleo3333
  • Зарегистрирован: Ср, 6 Фев 2013
  • Сообщений: 640
  • Уважение: +65
  • Позитив: +322
  • Последний визит:
    Вс, 19 Мар 2023 13:08:59
кликабельная панель слева от Deff
Deff написал(а):

Код:

<!-- JampPanel -Cлево -->
<style>

#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #FE2323;
background-color:#F0F0F0;
box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
}
#JampPanel {opacity:0.86;
position:fixed;z-index:1200;
height:190px;top:8px;left:0;margin-left:-202px;
background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 202px 2px no-repeat;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
width:230px;
}
#JampPanel .container{
padding:12px;
height:400px;
width:100%;margin:-1px 0 0 -58px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#F0F0F0;
margin:-12px 0 0 234px;
}
#Klicalka{ /*прикрывает "УХО"*/
position:absolute;
height:190px;width:44px;
margin:-12px 0 0 234px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
    <div id=Klicalka></div>
Ваш контент
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
(function() {
var NumClick = 0;
$('#Klicalka').click(function() {
NumClick=(NumClick+1)%2;
if(NumClick){
   $('#JampPanel').animate({'margin-left':'45px'},200,'swing');
} else $('#JampPanel').animate({'margin-left':'-202px'},200,'swing');
});
}());
});
</script>
<!--End//JampPanel-->

Можно тоже самое,но справа.И выделите пожалуйста ту строчку,которая отвечает за серую тень,без нее более лучше.
http://mybb.ru/f/collection/0213.gif  http://mybb.ru/f/collection/0226.gif
спасибо.

0

18

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51194
  • Уважение: +15227
  • Позитив: +11642
  • Последний визит:
    Сегодня 15:32:28

kleo3333, Вот есть Вариант -> Скрипты от пользователей 3

0

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » Боковая всплывающая панель.