Добрый день.
Есть сайт на джумле. Верстал в сжатые сроки, получился большой карточный домик.
И под конец заказчик захотел поменять скролл для дива с контентом и тут я встрял.
В ручную писать мозгов (и если честно, желания) не хватило. Решил делать плагином jScrollPane. Сделал отдельно, "прикрутил" нужный заказчику скин. Но возникла проблема прилепить тестовую верстку в разработанный ранее шаблон:
HTML-шаблон + чуток php
<div id="content">
<div id="top_pos">
<!-- рюшечки -->
</div>
<div id="middle_pos">
<div id="leftcolumn">
<!-- меню слева, css -->
</div>
<div class="wb2<?php echo $pageview ?>"> </div> <!-- прозрачный фон для контента. $pageview = wb2category или wb2article -->
<div id="whitebox2">
<div class="scroll-wrap" style="z-index:10">
<div class="scroll-pane" style="z-index:15">
<!-- контент, который нужно прокручивать, обернутый в <table> -->
</div>
</div>
</div>
</div>
</div>
стили:
#content {
min-width: 1150px;
min-height:880px;
padding: 0 0;
position:absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
}
#top_pos {
height: 100px;
margin: 0 auto;
background: #000;
background-image: url(../images/top_bg.jpg);
padding:0;
}
#middle_pos {
background-color: #000;
margin: 0 auto 0;
background-image: url(../images/it2b_bg_orange.jpg);
background-repeat: no-repeat;
background-position: top right;
position: absolute;
left:0;
right:0;
top:100px;
bottom:100px;
}
#leftcolumn {
float:left;
}
#whitebox2,
div.wb2category,
div.wb2article,
div.frameborder {
margin: 20px;
position: absolute;
top: 20px;
left: 480px; /*260px*/
right: 20px;
height:480px;
}
#whitebox2 {
float:right;
border:0;
overflow:auto; /* scroll */
z-index:5;
}
div.wb2category {
background-color:#000;
background-image:url(../images/bg09a.jpg);
background-position:right -10px;
background-repeat:repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
-moz-opacity: 0.8; /* Netscape */
-khtml-opacity: 0.8; /* Safari 1.x */
opacity: 0.8; /* Good browsers */
z-index:1;
}
div.wb2article {
background-color:#000;
background-image:url(../images/bg09b.jpg);
background-position:right -10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
-moz-opacity: 0.8; /* Netscape */
-khtml-opacity: 0.8; /* Safari 1.x */
opacity: 0.8; /* Good browsers */
}
jquery.jscrollpane.css
.jspContainer
{
overflow: hidden;
position: relative;
}
/* content */
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 19px;
height: 100%;
background: #f00;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 19px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #5b5b5b;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
background:url(../images/scrollBtn.png) no-repeat left top;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspHorizontalBar .jspDrag
{
background:url(../images/scrollBtnH.png) no-repeat left top;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #5b5b5b;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Проблема в диве #whitebox2, т.к. у него позиция absolute ?
Просто панель jScrollPane не появляется, только системные скроллы.
Делаю overflow:hidden - контент просто обрезается, но jScrollPane не появляется.
Очень прошу помочь.