Вывод материалов в вертикальном скроллинге
ДЕМО
Приступим.
1. Главная » Управление дизайном » Таблица стилей (CSS)
в CSS пишем:
Code
body {
background: #ffffff; /*это цвет фона*/
padding: 0px 0 0 0px;
}
div.sc_menu_wrapper {
position: relative;
height: 234px; /*высота панели*/
margin-top: 5px;
overflow: auto;
width: 156px; (ширина панели*/
-webkit-border-radius: 4px; /*это */
-moz-border-radius: 4px; /*и это - округления краёв*/
text-align: center;
color: #ffffff;
border: 1px solid rgb(79, 79, 79);
background: #ffffff;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 150px;
border: 3px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px; /*обводка округлённых краев*/
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 10px;
left: 0px;
margin: 0 auto;
padding: 10px;
width: 150px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D; /*цвет обводки*/
}
#back {
margin-left: 10px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
2. На странице где хотите видеть этот скрипт, нужно между <head></head>,добавить следующий код. если хотите использовать данный скроллинг в блоке, а то есть на каждой странице, то необходимо написать код в шапке сайта
Главная » Управление дизайном » Верхняя часть сайта:
Внимание! можно использовать css, который лежит в архиве, чтобы не прописывать всё выше описанное, а просто указать на него ссылку.
Code
<script src="/css/scroll.css" rel="StyleSheet" type="text/css"></script>
Сразу под ним же >>
Code
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
var wrapper = $(wrapper), scrollable = $(scrollable);
scrollable.hide();
var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
setTimeout(function(){
loading.hide();
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
var inactiveMargin = 100;
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
wrapper.mousemove(function(e){
var wrapperOffset = wrapper.offset();
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>
3. Туда где хотим видеть сам скрипт ставим вот это:
Code
<div align="center"><div class="sc_menu_wrapper">
<div class="sc_menu">
$MYINF_2$ /*Номер вашего иформера*/
</div>
</div></div>
4. Последний шаг, создание информера. Главная » Информеры » Создать информер:
Раздел: Каталог файлов
Тип данных: Материалы
Способ сортировки: (в данном случае) Рейтинг материала A
Количество материалов: 10 (Количество выводимых в информере материалов.)
Количество колонок: 1
Ссылка на источник материала.
