VPF::Как предусмотерть, чтобы высота ячейки табл. была

neokoder

Дата 26.2.2011, 14:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 14.4.2010

Репутация: нет
Всего: -3

Как предусмотерть, чтобы высота ячейки была всегда кратна ВЫСОТЕ (ошибся в заголовке) фонового изображения, которое повторяется по y (repeat-y)? Чтобы это изображение не обрезалось а повторялось всегда целое число раз.
Картинка и html-страница в аттаче.

Это сообщение отредактировал(а) neokoder - 26.2.2011, 14:28

Присоединённый файл ( Кол-во скачиваний: 4 )

repeat_background.zip 1,02 Kb

Onis

Дата 26.2.2011, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 241
Регистрация: 18.6.2005
Где: Украина, Николаев

Репутация: 2
Всего: 3

Насколько я понял вашу задачу, у вас есть ячейка с динамическим контентом, и вам нужно подгонять ее высоту под фон.
По моему решение очевидно:

Код


var addEvent = function(elem, type, handler){try{elem.addEventListener(type, handler, true);}catch(e){elem.attachEvent("on"+type, handler);}} // тут вы можете свой метод использовать.
var backgroundImage = new Image();
var checkSize = function(){
    addEvent(window, 'load', function(){
    var cell = document.getElementById('resizeCell'); //Ячейка которую будем ресайзить.
        cell.style.height = backgroundImage.height * Math.ceil( cell.offsetHeight / backgroundImage.height )
    });
}
backgroundImage.onload = checkSize; //обязательно присваиваем событие до src
backgroundImage.src = 'background/image/url.png';

Правда если поразмышлять, можно придумать более изящное решение.

Это сообщение отредактировал(а) Onis - 26.2.2011, 16:56

Onis

Дата 26.2.2011, 17:14 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 241
Регистрация: 18.6.2005
Где: Украина, Николаев

Репутация: 2
Всего: 3

Пример с вашим кодом:

Код


<html>
<head>
<style>
.td1 {margin: 0; padding: 0; width:160px; min-width:160px; max-width:160px; height:150px; border:1px solid black; text-align:center; vertical-align:middle; background-image: url("rus_flag.png"); background-repeat: repeat-y; }
.td2 {margin: 0; padding: 0; width:100%; max-width: 1250px; height:150px; border:1px solid black; text-align:center; vertical-align:middle; overflow: hidden; clip: rect(0px, 0px, 0px, 0px);}
</style>

<script type="text/javascript">
<!--

var backgroundImage = new Image();
var addEvent = function(elem, type, handler){try{elem.addEventListener(type, handler, true);}catch(e){elem.attachEvent("on"+type, handler);}}
var checkSize = function(){
    addEvent(window, 'load', function(){
    var cell = document.getElementById('resizeCell'); //Ячейка которую будем ресайзить.
        cell.style.height = backgroundImage.height * Math.ceil( cell.offsetHeight / backgroundImage.height );
    });
}
backgroundImage.onload = checkSize;
backgroundImage.src = 'rus_flag.png';

function AfterLoad()
{
}
//-->
</script>

</head>
<body onload="AfterLoad();" style="margin: 0; padding:0">
<table id="main_table" cellspacing=0 cellpadding=0 style="width: 100%; height: 100%; background-color: transparent; border: 1px solid black">
<tr>
<td class="td1">Первая ячейка</td>
<td class="td2" id="resizeCell">Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br>Вторая ячейка<br></td>
<td class="td1">Третья ячейка</td>
</tr>
</body>
</html>

Это сообщение отредактировал(а) Onis - 26.2.2011, 17:15

neokoder

Дата 27.2.2011, 09:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 14.4.2010

Репутация: нет
Всего: -3

Спасибо. Работает. Только вот у меня задача более сложная - не только по событию window.onload корректировать, но и во множестве других случаев, когда будет изменяться текст в центральной ячейке, левая и правая будут также изменяться по высоте.

Как я уже понял универсального события для изменения элемента <td> не существует, поэтому мне придётся каждый раз когда изменяется контент вызывать дополнительно функцию checkSize.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »