Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.10.2011, 03:55   #1
AlienNation
Пользователь
 
Регистрация: 22.08.2010
Сообщений: 85
По умолчанию Позиционирование блока по центру с динамическими элементами и их гибкостью *сложно

Тему даже уже как назвать в голове не укладывается, вопрос наболевший, в общем суть его в том что есть сайт с резиновым дизайном, скажем так обзор продукции производителя, снизу превьюшки, а в центре продукт с описанием. Так вот эти самые превьюшки выводятся снизу горизонтальным блоком, который выравнивается по центру в зависимости от того сколько превьюшек (т.е. берется ширина каждой, складывается и потом от этого центрируется блок), но иногда происходит сбой, может какая-то задержка при загрузке сайта и выводиться либо 1-на превьюшка, либо еще какой-то казус, весь фокус в том что все это должно быть резиновое, но у меня не получается это сделать без этого глюка, всю эту картину можно наблюдать здесь http://elegatec.500mb.net/2, там много всего, но то что пока не нужно я скрыл, превьюшки анимированы, на это не обращайте внимания, анимация здесь точно не виновата (хотя пока что и сбивает резину), вот модули, которые отвечают за происходящее:
HTML:
Код HTML:
<div class="pxs_thumbnails">
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
<div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div>
</div>
JS:
Код HTML:
// панель превьюшек
var thumb_width_px = $pxs_thumbnails.width(); // длинна в пикселях превью
var centrum = Math.floor((w_w - thumb_width_px)/2); // позиционирование к центру в пикселях
thumb_width_percent = Math.floor((thumb_width_px/w_w)*100); // длинна в процентах превью
center_percent = Math.floor((centrum/w_w)*100); // позиционирование к центру превью
// применяем стиль,выставляем длинну и отступ в %
$pxs_thumbnails.css({
'width': Math.round(thumb_width_percent+1)+'%',
'left': Math.round(center_percent)+'%'
});
var thumb_img_percent = Math.round(($thumbs.width()/thumb_width_px)*100); // длинна 1-й превьюшки в %
$thumbs.css({
'width': thumb_img_percent+'%'
});
var spaces = one_image_w/(total_elems+1);
CSS:
Код HTML:
.pxs_thumbnails {
height: 11%;
position: absolute;
top: 87%;
left: 0px;
overflow: visible;
border: 1px solid violet;
display: inline;
}

.pxs_thumbnails div {
cursor:pointer;
display: inline;
border: 1px solid #CCCCCC;
bottom: 0;
height: 97%;
float: left;
top: 5%;
overflow: visible;
width: 6%;
}

.pxs_thumbnails .thumbdiv img.previmg {
border: 1px solid red;
display: inline;
position: relative;
overflow: visible;
}

сама функция ЯС находится в файле http://elegatec.500mb.net/2/driver.js с 68-й строки (у меня так), возможно в ней вся загвоздка, что в ней может быть не так?
в итоге должно получиться без глюка и резиновое
П.С. Если вы не видите глюк, попробуйте обновить несколько раз.
AlienNation вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Относительное позиционирование melkortheshadow HTML и CSS 6 13.04.2011 23:10
Относительное позиционирование Vinnipux HTML и CSS 1 25.02.2011 07:49
Позиционирование Syltan HTML и CSS 0 25.03.2010 19:15
Позиционирование serg_sk HTML и CSS 0 18.03.2010 20:42
Позиционирование каретки Spice Win Api 1 25.03.2009 04:51