| ksa | 30.08.2010 11:33 |
Цитата:
|
Сообщение от yngwie19
почему в IE дивы уезжают вправо?
|
Хотя размер текста (см.картинку) вроде одинаков... Отсюда и "смещение" ДИВов.
Помогите с resize-ом столбцов таблыцы
Здравствуйте. У есть вот такая таблица
<html>
<head>
<style>
.tableview{
border-collapse: collapse;
}
.cellview{
border: 1px solid rgb(0,0,0);
}
.cellview-inner{
height: 34px;
}
.kix-boxview{
left: px;
top: 9px;
}
.boxview-content{
width: 141px;
padding: 7px;
}
.lineview{
height: 20px;
direction: ltr;
text-align: left;
}
.lineview-content{
margin-left: 0px;
padding-top: 0px;
}
.lineview-content SPAN{
font-size: 11pt;
font-family: Arial;
color: rgb(0,0,0);
background-color: transparent;
font-weight: normal;
font-style: normal;
text-decoration: none;
vertical-align: baseline;
}
div.cDrag div {
background: repeat scroll 0 0 transparent;
cursor:col-resize;
display:block;
float:left;
height:24px;
position:absolute;
width:5px;
border: 1px solid rgb(0,0,0);
}
</style>
</head>
<body>
<div class="cDrag" style="top: 27px;">
<div style="height: 110px; left: 163px;"></div>
<div style="height: 110px; left: 321px;"></div>
<div style="height: 110px; left: 479px;"></div>
</div>
<table class="tableview">
<tbody>
<tr>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content">
<span>текст</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="cellview">
<div class="cellview-inner">
<div class="kix-boxview">
<div class="boxview-content">
<div class="lineview">
<div class="lineview-content"></div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
моя задача сделать столбцы этой таблицы перемещаемыми. Я вставил 3 вертикальных DIV-a, мне нужно написать код на JS, с помощью которого я мог бы мышкой схватить за этот DIV и таким образом изменить ширину столбца таблицы. Помогите мне пожалуйста написать такой обработчик. P.S: кстати почему-то в IE эти DIV-ы съезжают вправо, в остальных браузерах все ровно. |
Надеюсь вот это поможет ;)
|
inGray,
спасибо вам большое, я видел эту статью, пожалуйста помогите мне написать обработчик, буду Вам очень признателен. Или это очень сложно, то что я задумал? |
Нет, не очень сложно. Я с удовольствием помогу, если Вы приложите усилия и начнете писать обработчик. Если вопросы будут - задавайте :)
|
inGray,
хорошо, спасибо Вам, я тогда через пару деньков к Вам в личку напишу можно? |
inGray,
извините, подскажите пожалуйста почему в IE дивы уезжают вправо? а в других браузерах все нормально. |
ИЕ - выдающийся браузер :yes: В нем все через
|
inGray,
вот посмотрите пожалуйста пример покороче
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.cDrag div {
cursor:col-resize;
display:block;
height:24px;
position:absolute;
width:5px;
border: 1px solid rgb(0,0,0);
}
</style>
<script type="text/javascript">
var inDrag = false;
var splitter = null;
function registerHandler(obj, evntDOM, handler) {
if (obj.addEventListener) {
obj.addEventListener(evntDOM, handler, false);
} else {
obj.attachEvent("on" + evntDOM, handler);
}
}
function getTruthPos(obj) {
var x = 0;
while (obj) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return x;
}
function moveSplitters() {
var divs = document.getElementById("splitters").getElementsByTagName("div");
var tds = document.getElementById("resizeTbl").rows[0].cells;
for (var i = 0; i < divs.length; i++) {
divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
}
}
function downHandler(e) {
inDrag = true;
splitter = (e.target) ? e.target : e.srcElement;
}
function upHandler(e) {
if (!inDrag) return true;
inDrag = false;
var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
var tdLeft = getTruthPos(td);
var newWidth = getTruthPos(splitter) - tdLeft;
if (newWidth > 0) {
td.style.width = newWidth.toString() + "px";
}
moveSplitters();
}
function moveHandler(e) {
if (!inDrag) return true;
splitter.style.left = (e.clientX - 2).toString() + "px";
}
function setResizeHandlers(e) {
var divs = document.getElementById("splitters").getElementsByTagName("div");
registerHandler(document, "mouseup", upHandler);
registerHandler(document, "mousemove", moveHandler);
for (var i = 0; i < divs.length; i++) {
registerHandler(divs[i], "mousedown", downHandler);
}
moveSplitters();
}
registerHandler(window, "load", setResizeHandlers);
</script>
</head>
<body>
<div class="cDrag" style="top: 27px;" id="splitters">
<div style="height: 70px; left: 109px;" id="_0"></div>
<div style="height: 70px; left: 212px;" id="_1"></div>
<div style="height: 70px; left: 315px;" id="_2"></div>
<div style="height: 70px; left: 418px;" id="_3"></div>
</div>
<table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;" onselectstart="return false"
>
<tr>
<td>_____1.1_____</td>
<td>_____1.2_____</td>
<td>_____1.3_____</td>
<td>_____1.4_____</td>
<td>_____1.5_____</td>
</tr>
<tr>
<td>_____2.1_____</td>
<td>_____2.2_____</td>
<td>_____2.3_____</td>
<td>_____2.4_____</td>
<td>_____2.5_____</td>
</tr>
<tr>
<td>_____3.1_____</td>
<td>_____3.2_____</td>
<td>_____3.3_____</td>
<td>_____3.4_____</td>
<td>_____3.5_____</td>
</tr>
</table>
</body>
</html>
Единственное, что мне нужно сделать так, чтобы при изменении размера столбцов текст, в ячейке переносился по вертикали вниз. Можно ли так сделать? |
Цитата:
Хотя размер текста (см.картинку) вроде одинаков... Отсюда и "смещение" ДИВов. |
Цитата:
http://www.htmlbook.ru/css/white-space.html |
я применяю этот стиль white-space к ячейке td, но ничего не происходит. Помогите пожалуйста
|
| Часовой пояс GMT +3, время: 07:11. |