[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Динамическое позиционирование
Stasonix
Тему даже уже как назвать в голове не укладывается, вопрос наболевший, в общем суть его в том что есть сайт с резиновым дизайном, скажем так обзор продукции производителя, снизу превьюшки, а в центре продукт с описанием. Так вот эти самые превьюшки выводятся снизу горизонтальным блоком, который выравнивается по центру в зависимости от того сколько превьюшек (т.е. берется ширина каждой, складывается и потом от этого центрируется блок), но иногда происходит сбой, может какая-то задержка при загрузке сайта и выводиться либо 1-на превьюшка, либо еще какой-то казус, весь фокус в том что все это должно быть резиновое, но у меня не получается это сделать без этого глюка, всю эту картину можно наблюдать здесь http://elegatec.500mb.net/2, там много всего, но то что пока не нужно я скрыл, превьюшки анимированы, на это не обращайте внимания, анимация здесь точно не виновата (хотя пока что и сбивает резину), вот модули, которые отвечают за происходящее:
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:

// панель превьюшек
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:

.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-й строки (у меня так), возможно в ней вся загвоздка, что в ней может быть не так?
в итоге должно получиться без глюка и резиновое
П.С. Если вы не видите глюк, попробуйте обновить несколько раз.



Спустя 6 часов, 3 секунды (22.10.2011 - 08:53) redreem написал(а):
сделай таблицей и не парься. я ужо через такие заморочки прошел и твердо решил для себя что не стоит оно того, чтобы только ради ДИВной верстки тратить время на скрипт.

Спустя 8 часов, 27 минут, 26 секунд (22.10.2011 - 17:20) imbalance_hero написал(а):
redreem
Я соглашусь с тобой, я не парюсь между блок-таблица, и не пытаюсь делать блоками те участки, которые в 1000 раз проще реализуются обычной таблицей.

Спустя 1 день, 19 часов, 21 минута, 2 секунды (24.10.2011 - 12:42) Stasonix написал(а):
и в 2000 раз оно легче делается на javascript, таблица там не прокатит, я уже сам нашел выход, если кто-то столкнется с подобным, в личку пишите я выложу на форуме, сейчас время нет.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.