Проблема с динамичным div слоем

[krasafcheg08]

Добрый день ребят, делаю сайт подруге filigrana.ru, наткнулся на пример подгрузки из БД в динамичный слой, вот пример filigrana.ru/index_test.php.
Понравилось то что не грузится вся страница целиком а только текст - навигация (Раз, Два, Три).

Но как видно информация в div контейнер грузится в строго заданные заранее размеры, но так как текст в разных категориях разного объема, то требуется возможность рястягивания контейнера автоматически. Уже дня 4 бьюсь, перекопал множество литературы но так и не нашел рабочего способа.

рабочий пример есть на сайте aion.ru в новостном разделе, но как добились они этого понять не смог.

Кто сталкивался с данной проблемой или знает решение очень прошу помощи.

[membrilius]

не очень понятно.

Растягивание по вертикали или по горизонтали?

[krasafcheg08]

по вертикали естественно, по горизонтали проблем с растягиванием нет
пример где не растягивается див слой по высоте http://www.filigrana.ru/index_test.php

А так как должно
http://www.filigrana.ru/ - текст из бд выводится полностью и окуратно как нада

Т.е подгружаемый из БД блок данных должен полностью выводиться в контейнере, а не резаться по высоте на 300+px, самое интересное не нашел параметра где бы указывалась данная фиксированная высота.

Без изменений шаблон выглядит так http://osc4.template-help.com/wt_29124/index.html

[membrilius]

если кратко.
я бы считал размеры на JavaScript.

Вычисляйте высоту содержимого ... например "conteiner.offsetHeight".

Тоесть, у Вас есть один контейнер как экранчик с фиксированным размером (id=content) допустим height="300px" и overflow="hidden" (что бы кушалось всё что не влезло)

в нём эти странички которые сдвигаются, не знаю как у Вас, но что то вроде такого (id=conteiner_1, id=conteiner_2, и т.д)

И так:

При сдвиги, берём следующий контейнер (id=conteiner_2 например), смотрим его размер по высоте "document.getElementById("conteiner_2").offsetHeight" и просто заменяем его у окошка (id=content)

Получается, что при сдвиги на новые данные, у вас раздвигается окно... или сужается соответственно.

Вообще это сложно понятно описать, спрашивайте если что.

Добавлено через 1 минуту
Раздвигать и сужать окошко можно постепенно... вызывайте через setInterval функцию и по 2-3 пиксиля прибавляйте или убирайте..

[krasafcheg08]

Создать внешний контейнер можно, только это не помогает, так как где то в стилях заныкано позиционирование фиксированное около 300 пикселей, самое пародоксальное, я найти не смог.
Выкладываю стили
style.css

/* Fonts (including not standart fonts) */
@font-face {
font-family: 'Sochi2014';
src: url('regular.eot');
src: local('Sochi2014 Regular'), local('Sochi2014-Light'), url('regular.woff') format('woff'), url('regular.otf') format('opentype'), url('regular.svg#Sochi2014-Light') format('svg');
}

@font-face {
font-family: 'Sochi2014 Medium';
src: url('medium.eot');
src: local('Sochi2014 Regular'), local('Sochi2014-Medium'), url('medium.woff') format('woff'), url('medium.otf') format('opentype'), url('medium.svg#Sochi2014-Medium') format('svg');
}

@font-face {
font-family: 'Sochi2014';
font-weight: bold;
src: url('bold.eot');
src: local('Sochi2014 Regular'), local('Sochi2014-Bold'), url('bold.woff') format('woff'), url('bold.otf') format('opentype'), url('bold.svg#Sochi2014-Bold') format('svg');
}

.title {

font-family: "Sochi2014 Medium";
font-size: 2.36em;
color: #fff;
line-height: 110%;
background: ;
padding: 0px 0px 10px 0px;
}

.headup {

font-family: "Sochi2014 Medium";
font-size: 2.36em;
color: #fff;
line-height: 60%;
background: ;
padding: 3px 0px 10px 20px;
text-decoration: none;
}


* {
margin:0; padding:0;
font-size:100%;
}

body{
background:url(bg_content4.jpg) fixed 50% 0%;
text-decoration: none;
text-align:center;
height:100%;
}

img {vertical-align:top;}
a img { border:0;}

ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear { clear:both;}

html, input, textarea
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:15px;
color:#8c8c8c;
}

object {
vertical-align:top;
outline:none;
}




input, select { vertical-align:middle; font-weight:normal;}

a {color:#fff; outline:none;}
a:hover{text-decoration:none; color:#0084ff;}
p {padding-bottom:15px;}

h1 {font-size:24px; color:#fff; line-height:1.2em; text-transform:uppercase; padding:0 0 12px; margin-left:-3px;}
h2 {font-size:12px; color:#fff; padding:0 0 18px; font-weight:normal;}
h3 {font-size:12px; color:#fff; padding:0 0 18px; font-weight:normal; text-align:right;}
h3 span {color:#0084ff;}

/* ============================= main layout ====================== */*
html, body {
height: 100%;
}
.footer_wrapper
background:url(bg_content3.jpg) fixed 50% 0%;
min-height: 100%;
height: 100%;
margin: 0 auto -80px; /* the bottom margin is the negative value of the footer's height */
}
.push {
height: 80px; /* .push must be the same height as .footer */
}

.imgindent {margin:0 20px 0 0; float:left; padding:6px 0 0;}
.fright {text-align:right;}
#main .last {padding-bottom:18px;}

/* ============================= header ====================== */
#header {background:url("bg.png"/*tpa=bg.png*/) no-repeat center 39px; padding:48px 12px 0 7px;}
#header .menu li{display:inline; margin-right:11px;}
#header .menu a {text-decoration:none; font-size:14px; line-height:24px; color:#fff;display:inline-block;
margin:0 7px 0 8px; }
#header .menu a:hover {color:#0084ff;}
#header .menu a.active span {display:inline-block;}
#header .menu a.active {background:#232323; margin:0;}
#header .menu a.active span {background:url("btn_left.gif"/*tpa=btn_left.gif*/) no-repeat left top;}
#header .menu a.active span span{
background:url("btn_right.gif"/*tpa=btn_right.gif*/) no-repeat right top;
padding:0 7px 1px 8px;
}
/* ============================= content ====================== */
.content ul {margin:-3px 0 -1px;}
.content li { background:url("marker.gif"/*tpa=marker.gif*/) no-repeat 0 4px; padding-left:28px; line-height:22px;}
.content li a {color:#009cff;}

.block1 {background:url("block_bg.gif"/*tpa=block_bg.gif*/) no-repeat -2px 31px;}
.block1 h1 {letter-spacing:-1px;}
.block1 p {padding:19px 0 26px;}
/*buttons*/
a.btn{
background:#232323;
display:inline-block;
font-size:12px;
line-height:25px;
color:#fff;
text-decoration:none;
}
a.btn span{
background:url("btn_left.gif"/*tpa=btn_left.gif*/) no-repeat left top;
display:inline-block;
}
a.btn span span{
background:url("btn_right.gif"/*tpa=btn_right.gif*/) no-repeat right top;
padding:0 9px 0 10px;
}
a.btn span span span {background:none; padding:0;}
a.btn:hover {background:#0084ff;}
a.btn:hover span {background:url("btn_left.gif"/*tpa=btn_left.gif*/) no-repeat left bottom;}
a.btn:hover span span {background:url("btn_right.gif"/*tpa=btn_right.gif*/) no-repeat right bottom;}

/*phone*/
.phone span {display:inline-block; width:85px; font-weight:normal;}

/* ============================= footer ====================== */
#footer {background:url("bg.png"/*tpa=bg.png*/) no-repeat top center;}
.footer span {margin:0 3px;}
#footer a {color:#fff; text-decoration:none;}
#footer a:hover {color:#009cff;}
#footer li {color:#8c8c8c; float:left;}
#footer li a {color:#8c8c8c; margin:0 6px 0 5px;}
#footer a.active,#footer a.active:hover {color:#fffefe; cursor:default;}

/* ============================= forms ============================= */
#ContactForm label {display:block; background:url("input_bg.gif"/*tpa=input_bg.gif*/) no-repeat left 17px; height:52px;}
#ContactForm .col4 {background:url("textarea_bg.gif"/*tpa=textarea_bg.gif*/) no-repeat left 17px;}
#ContactForm input, #ContactForm textarea {
background:none;
width:224px;
border:0;
padding:6px 5px;
color:#fff;
}
#ContactForm p {padding-bottom:3px;}
#ContactForm a {margin-left:9px;}
#ContactForm input {font-size:1em;}
#ContactForm textarea {height:121px; overflow:auto; margin-bottom:20px; width:203px;}
#page5 .content {padding-left:5px;}
/*================ carousel ==========================*/
.carousel { height:400px;}
#pane5 {height:400px;}

.jScrollPaneContainer {
z-index: 1;
overflow: hidden;
position: relative;
height:400px !important;
}
.jScrollPaneTrack {
background: url("slider-bg.gif"/*tpa=slider-bg.gif*/) no-repeat 0% 3px;
left: 0px;
width: 999px;
cursor: pointer;
top: 344px;
position: absolute;

}
.jScrollIntervalTrack {
position: absolute;
display:none
}
.jScrollPaneDrag {
background: url("handle.png"/*tpa=handle.png*/) no-repeat 0% 0%;
overflow: hidden;
cursor: pointer;
position: absolute;
margin:3px 0;
width:200px!important;
}
.jScrollPaneDragLeft {
left: 0px;
overflow: hidden;
bottom: 0px;
position: absolute
}
.jScrollPaneDragRight {
right: 0px;
overflow: hidden;
bottom: 0px;
position: absolute
}

ul.blocks {
display: block;
padding: 0px;
width: 4995px;
height: 308px;
overflow:hidden
}
ul.blocks li.scroll-interval {
display: block;
float: left;
margin: 0px !important;
width: 999px;
height: 290px;
overflow:hidden;
}
.holder {
display: block;
}
.scroll-pane {
padding-right:0px;
padding-left: 0px;
float: left;
padding-bottom: 0px;
width: 999px;
padding-top: 0px
}
#pane5 {
padding-right: 0px;
display: block;
padding-left: 0px;
padding-bottom: 0px;
overflow: hidden;
width: 999px;
padding-top: 0px;
height: 315px;
}
.block_ind {
float:left;
width:91px;
}
.left95 {
margin-left:95px
}
.white {
color:#fff !important
}
.grey {
color:#706b64
}
.pt10 {
font-size:10px;
text-transform:uppercase
}
.list {
margin-bottom:17px;
position:relative;
}
.list li {
background:url("mark.png"/*tpa=mark.png*/) no-repeat 0% 6px ;

float:none !important;
display:block !important;
width:auto !important;
height: auto !important;
}
.list li a {
font-size:10px;
text-transform:uppercase;
color:#f03806;
text-decoration:none
}
.list li a:hover {
text-decoration:underline
}
.list2 {
margin-bottom:17px;
position:relative;
}
.list2 li {
background:url("mark2.png"/*tpa=mark2.png*/) no-repeat 0% 6px ;
padding:0 0 0 18px;
float:none !important;
display:block !important;
width:auto !important;
height: auto !important;
}
.list2 li a {
font-size:10px;
text-transform:uppercase;
color:#fff;
text-decoration:none
}
.list2 li a:hover {
text-decoration:underline
}
.width165 {
width:165px
}

layout.css - контейнер который скролируется

#main { width:1024px; margin:0 auto; text-align:left;}
.footer { color:#fff; width:1024px; margin:0 auto; text-align:right; padding:14px 25px 0 14px;}

#header {height:162px;}

#footer { height:80px; padding: 3px 17px 0px 20px;}

.col1, .col2, .col3, .col4, .colspan {float:left;}
.wrapper {width:1024px; overflow:hidden;}

/* ============================= page1 ===========================*/
#page1 .col1 { width:100%;padding:0 3px;}

/* ============================= page2 ===========================*/
#page2 .col1 { width:100%;height:100%;padding:0 3px;}

/* ============================= page3 ===========================*/
#page3 .col1 { width:100%;padding:0 3px;}

/* ============================= page4 ===========================*/
#page4 .col1 { width:100%;padding:0 3px;}

/* ============================= page5 ===========================*/


/* ============================= page6 ===========================*/

[membrilius]

мне лень искать ))

задайте размер через атрибут style ... он перекроет значения заданное через "id" и "class"

Добавлено через 5 минут
вообще посмотрите HTML код и найдите все дивы которые относятся к окошку..

и проверяйте.. задавайте красный background например...

[studmar]

Проблема кроется в верстке и применении jquery.
Шаблон построен так, что все содержимое должно умещаться в заданные контейнеры.
Вообще смысл всей верстки и плагина в том, что у вас есть список состоящий из пяти <li>
которые находящиеся в контейнере определенных размеров с class="jScrollPaneContainer"
я попытался его исправить, но он не хочет понимать height:auto не height:100%.
index.rar
Конечно можно и дальше копаться в этом шаблоне, но мне кажется что намного проще все переверстать, предварительно поискав другие примеры подобного плагина.
Вот кстати и они, которые впринципе делают тоже самое http://webkev.com/2010/01/18/karusel...uery-mootools/

[membrilius]

да вообще лучше всё делать самому ))

[krasafcheg08]

С проблемой разобрался благодаря забугорному челу =)
Всем спасибо за ответы, рабочий пример тут кому интересно что я хотел сделать
http://filigrana.ru/index2.php

[studmar]

позвольте поинтересоваться в чем был секрет? в настройках плагина jquery?