Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> не работает style.left в FireFox, не работает style.left в FireFox 
V
    Опции темы
FreeWanderer
Дата 16.4.2007, 16:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Всем привет. Возникла необходимость создать таблицу с закрепленной во время скролла верхней строкой и левым столбцом.
Причем она должна валидно отображаться и в ИЕ и в лисе.

на данный момент бьюсь вот с этим
Код

<!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>


Если кому лень запускать: в ИЕ кнопочка и ячейка таблицы перемещаются, в  Лисе только кнопочка. 
Помогите пожалуйста, народ. Или предложите какой-нибудь другой вариант реализации такой таблицы.
Заранее спасибо.
PM MAIL   Вверх
butionok
Дата 16.4.2007, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 3
FreeWanderer, 

Свойства left у ячейки таблицы, насколько мне известно нет. Почему это работает в IE.... наверное глюк.

Как этот приведённый код связан с задачей?

Вот посмотри эту ссылку: Таблицы. Немного доработать и будет то что ты хочешь.
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
SelenIT
Дата 16.4.2007, 17:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401
FreeWanderer, попробуйте добавить ячейке display:block, а то её "родной" display:table-cell "не пускает". И обязательно дописывайте 'px' к размерностям, во избежание...

Цитата(butionok @  16.4.2007,  16:59 Найти цитируемый пост)
Почему это работает в IE.... наверное глюк.

Ага... в IE как раз у ячейки display:block по умолчанию, а никаких стандартных table-cell и т.п. он попросту "не знает".

Это сообщение отредактировал(а) SelenIT - 16.4.2007, 17:03


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
FreeWanderer
Дата 23.4.2007, 17:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Спасибо за помощь. Собственно вот что мне удалось накодить, позаимствовав идею с привязкой к ивентам он скрулл.
Вот:
Код

<!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>
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0762 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.