не корректно работает свойство style.left

FreeWanderer · №1

Всем привет.
Столкнулся с необходимостью создать таблицу с закрепленноей верхней строкой и левым столбцом (т.е. при скроллинге они остаются там где были)
Есть удобное решение с использованием expression в css, но в FireFox оно не работает.
Всвязи с этим решил делать тоже самое вручную в обработчике onscroll.
Посмотрите пожалуйста что не так. В IE все работает...

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>

<script>

function fixCells(div)
{
    var i;    
    var table;
    var top = div.scrollTop-3;
    var left = div.scrollLeft-3;
    
    for (i = 0; i < div.childNodes.length; i++)
        if(div.childNodes[i].tagName == "TABLE")
            break;
    
    table = div.childNodes[i];
    
    for(i=0; i<table.rows.length; i++)
	{
        table.rows[i].cells[0].style.left = String(left)+"px";
	  table.rows[i].cells[0].style.right="auto";
	}
    for(i=0; i<table.rows[0].cells.length; i++)
	{
        table.rows[0].cells[i].style.top = String(top)+"px";         
	  table.rows[0].cells[i].style.bottom="auto";
	}
}
</script>

<div onscroll="fixCells(this)" style="width: 750px; height: 200px; overflow:auto;">
<table border="1">
<thead>
    <tr>
        <th style="z-index:30; position:relative; background-color: rgb(214, 220, 232);"> 
           dfdsfsdfsdfsdf
        </th>	
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	<th style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sfsdsdsdsdsdsd</th> 
	
    </tr>
</thead>


<tbody>
    <tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
<tr>
	<td style="z-index:10; position:relative; background-color: rgb(214, 220, 232);">sdsd</td>
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
</tbody>

</table>
</div>
</body>
</html>

Заранее большое спасибо

FreeWanderer · №2

вот упрощенный вариант. Проблема таже. Не двигает собака. В IE все ок.

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>

<script>
var i=40;
function func(btn)
{
	var cell=document.getElementById("main");
	cell=cell.rows[0].cells[0];
	cell.style.left=++i;

	btn.style.left=++i;
}
</script>
<div style="width:400px; height:100px; back-color:0xFF0000;">
<input type="button" onclick="func(this)" style="position:relative; left:20px;"/>
</div>
<table border="1" id="main">
<tr>
<td style="position:relative;">dfdf</td>
<td>dfdf</td>
<td>dfdf</td>
<td>dfdf</td>
</tr>
</table>

</body>
</html>

Lynn · №3

Во-первых, в CSS единицы измерения обязательны.
Во-вторых, работа position: relative с ячейками таблиц не регламентирована.

PS. back-color:0xFF0000; — это что? Может всё-таки background-color:#FF0000;?

FreeWanderer · №4

Спасибо за замечания. Правда они не приблизили меня к решению проблемы. Вот что сделать удалось:

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body onload="init()">

<script>

function init()
{
	var div=document.getElementById("mainDiv");
	//div.innerHTML = window.navigator.appName;
	//alert(window.navigator.appName);	
	//if(window.navigator.appName != "Microsoft Internet Explorer") 
		CreateScrollHeader(div,true,true);	
}

//создает из любого дива, в котором находятся правильная (с thead и tbody) таблица 
//таблицу с фиксированной верхней строкой
//и левым столбцом
//При этом если второй параметр истина, то фиксируется левый стоблец, если третий истина, то верхняя строка.
//Т.е. возможна независимая фиксация.

//FYI алгоритм удобнее всего рассматривать в FireBug(плагин -отладчик для FireFox)
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
var divContent = null; //слой урезанный до размеров table body именно на нем стоят скролл бары
var divHeaderRow = null; //Слой со строкой заголовка (возможно несколько строк)
var divHeaderColumn = null; //Слой с крайней левой колонкой
var divHeaderRowColumn = null;//
var headerRowFirstColumn = null;//Угловая ячейка
var x;
var y;
var horizontal = false;
var vertical = false;
var childElement = 0;
horizontal = scrollHorizontal;
vertical = scrollVertical;
 
   if (content != null)
    {
		var left=0;
		var top=0;		
		var currentNode = content;
		while(currentNode)//Ищем координаты нашего слоя, для дальнейшего репозиционирования
		{				
			left += currentNode.offsetLeft;
			top += currentNode.offsetTop;	

			currentNode = currentNode.offsetParent;
		}

	    divContent = content;

	    if (divContent.childNodes[childElement].tagName == null)
	    {
		    childElement = 1;
        }

        var headerRow = divContent.childNodes[childElement].childNodes[childElement];
        x = divContent.childNodes[childElement].offsetWidth;
        y = divContent.childNodes[childElement].offsetHeight;

        divHeaderRow = divContent.cloneNode(true);
        if (horizontal)
        {		
            divHeaderRow.style.height = headerRow.offsetHeight + 1 + 'px';
            divHeaderRow.style.overflow = "hidden";

		//Вставляем заголовок, и поднимаем контент наверх, пряча его заголовк за нашим новым.
            divContent.parentNode.insertBefore(divHeaderRow, divContent);
            divContent.childNodes[childElement].style.position = "relative";
            divContent.childNodes[childElement].style.top = "-" + String(headerRow.offsetHeight + 1) + 'px';
		
            y = y - headerRow.offsetHeight;
        }

        divHeaderRowColumn = divHeaderRow.cloneNode(true);
        headerRowFirstColumn = headerRow.childNodes[childElement].childNodes[childElement];
        divHeaderColumn = divContent.cloneNode(true);
        divContent.style.position = "relative";

        if (vertical)
        {
            //Создаем левый столбец.		
		divContent.parentNode.insertBefore(divHeaderColumn, divContent);
		
		divHeaderColumn.style.position = "absolute";
		divHeaderColumn.style.left = left + 'px';
            
		Позиционируем наш контент правее фиксированного столбца, и ниже заголовка
		divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';
		divContent.style.top = -divContent.style.top + 'px';
		
            divContent.childNodes[childElement].style.position = "absolute";
            divContent.childNodes[childElement].style.left = -headerRowFirstColumn.offsetWidth + 'px';
		
        }
        else
        {
            divContent.style.left = "0px";
        }

        if (vertical)
        {
            //урезаем слой до размеров столбца и прячем скролы
		divHeaderColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
            divHeaderColumn.style.overflow = "hidden";
            divHeaderColumn.style.zIndex = "99";
           
		//Добавляем синхнонизацию на скролирование. 
            addScrollSynchronization(divHeaderColumn, divContent, "vertical");
            x = x - headerRowFirstColumn.offsetWidth;
        }

        if (horizontal)
        {
            if (vertical)
            {
			//Создаем верхнюю угловую ячейку
                divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
			//Выравниваем наш контент, делаем так чтобы скролбары были вне таблицы.
		    divContent.style.width = String(divContent.offsetWidth - headerRowFirstColumn.offsetWidth + 17) + 'px';
		    divContent.style.position = "absolute";
                divContent.style.top = String(top + divHeaderRow.offsetHeight) + 'px';
                divContent.style.left = String(left + divHeaderColumn.offsetWidth -1) + 'px';
		    divContent.style.height = String(divContent.offsetHeight + 17) + 'px';			
            }
		//Позиционируем верхнюю угловую ячейку
            divHeaderRowColumn.style.position = "absolute";
            divHeaderRowColumn.style.left = left+ 'px';
            divHeaderRowColumn.style.top = top + 'px';
            divHeaderRowColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
            divHeaderRowColumn.overflow = "hidden";
            divHeaderRowColumn.style.zIndex = "100";
            divHeaderRowColumn.style.backgroundColor = "#ffffff";
        }

        if (horizontal)
        {
		//Добавляем синхроницацию по скролированию.
            addScrollSynchronization(divHeaderRow, divContent, "horizontal");
        }

        if (horizontal || vertical)
        {
            
        }
    }
}

// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};

}

// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}

fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}

</script>
<br/>
<br/>
<div style="width:500; height:500;" align="center">
<div id="mainDiv" style="height:300px; width:300px; overflow:auto;">
<table border="1" style="border-collapse:collapse;">
<thead>
    <tr>
        <th>sdasfasdfasdfds</th>

        <th>sasdfasdsdfdds</th>
        <th>sdasdfasdfds</th>
        <th>sdasdfasdfasdfasdfds</th>
        <th>sdasdfasdfds</th>
        <th>sdasadfasdfds</th>
        <th>sdasdfasdfds</th>

        <th>sdasadfasdfds</th>
    </tr>
</thead>
<tbody>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
</tbody>

</table>
</div>
</div>
</body>
</html>

Вроде бы везде работает.

Полезная информация

№116-04-2007 15:55:05