CabinetAdmin
03 ноя 2012, 22:09
Блок выскальзывающий при прокрутке страницы
Блок выскальзывающий справа при просмотре определённого, в нашем случае, текста. Блок можно использовать как предложение к прочтению следующей статьи, когда вы уже находитесь внизу страницы. Либо как какую-то поясняющую информацию.
Первым делом подключаем скрипты, перед закрывающим тегом
Если у вас уже подключена библиотека jQuery, то
Элемент при котором будет выскальзывать блок, это может быть
Далее ставим html структуру нашего блока:
Последний шаг, подключаем CSS, в конец темы стиля ставим:
Первым делом подключаем скрипты, перед закрывающим тегом
</body> ставим:
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> можно удалить.Элемент при котором будет выскальзывать блок, это может быть
<div>, <p>, любой блочный элемент:
Код: Выделить всё
<p id="last">
Текст при прокрутке до которого будет выскальзывать блок
</p>Код: Выделить всё
<div id="slidebox">
<a href="#" class="close"></a>
<p>Заголовок выскальзывающего блока</p>
<h2>Выводимая информация</h2>
<a href="#" class="more">Читайте также »</a>
</div>Код: Выделить всё
#slidebox{
width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top: 3px solid #323232;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
#slidebox p, a.more{
font-size: 11px;
text-transform: uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing: 1px;
color: #555;
margin: 0;
}
a.more{
cursor: pointer;
color: #323232;
float: right;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color: #536482;
font-size: 16px;
margin: 10px 20px 5px 0px;
font-style: normal;
font-weight: normal;
}
a.close{
background: transparent url("http://cabinetadmina.ru/storage/up_4admins_ru/images/close.gif") no-repeat top left;
width: 13px;
height: 13px;
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
}Комментарии: 4
Если поставить в
overall_header.html или в overall_footer.html, то на всех. Если в viewtopic_body.html, то только нс странице отображения сообщений.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Можно в разных форумах организовать, используя конструкции типа:
В разных темах будет чуть сложнее, надо будет делать bbcode под каждый вариант.
Код: Выделить всё
<!-- IF FORUM_ID == "1" --> тут код <!-- ENDIF -->Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!