Может кто подскажет, как это реализовать. Я понимаю что это с помощью скрипта делается, но я в этом вообще не бум-бум.
Добавлено спустя 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;
}
куда дальше копать...
Почему вместо того чтобы прятаться он выезжает на середину, в чём может быть причина?
