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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Cтатичный хедер у очень широкой таблицы, Cтатичный хедер у очень широкой таблицы 
:(
    Опции темы
zevgan
Дата 4.9.2009, 04:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Сейчас встал перед на первый взгляд тривиальной задачей - статичный хедер у таблицы по ширине во много раз большей, чем ширина окна. Сложность в том, чтобы горизонтальный скроллбар крутил всю таблицу включая хедер, а вертикальный только строки без хедера и притом, чтобы вертикальный скролл находился всегда в поле зрения.  Буду благодарен за любой совет (за сегодня перерыл кучу вариантов).
PM MAIL   Вверх
EmilRegis
Дата 4.9.2009, 07:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 4



может попробовать хедер сделать дивом с position:fixed, а на body onload повесить функцию,которая доставала бы width таблицы и присваивать этот width хедеру?
конечно довольно дурацкое решение)))
PM MAIL   Вверх
brother79
Дата 4.9.2009, 08:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Цитата(EmilRegis @  4.9.2009,  07:20 Найти цитируемый пост)
может попробовать хедер сделать дивом с position:fixed, а на body onload повесить функцию,которая доставала бы width таблицы и присваивать этот width хедеру?
конечно довольно дурацкое решение))) 


Я сначала хотел тоже нечто подобное предложить, но я сомневаюсь, что этот хедер будет скролироваться, он же fixed, станет в том положении в каком есть и всё.

ИМХО единственно что можно - верстать как обычно, но скролинги свои делать, т.е. див, в нём хедер широкий без скролинга и див под таблицу широкий и скролинг у внешнего дива по горизонтали
а в диве под таблицу который - таблицу и скролинг вертикальный на диве, а таблица - как есть без скролингов.

Вот только там какие-то отличия со скролингами были в ie чувствую, что это вылезет в процессе.


--------------------
PM MAIL WWW   Вверх
EmilRegis
Дата 4.9.2009, 09:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 4



fixed во всех браузерах кроме IE6 и более ранних версий висит на том месте,которое указано позиционированием независимо от скроллинга...то есть улистаешь страницу вниз,а фикнутый элемент будет всё равно висеть в верхнем углу твоего экрана...
подозреваю,что все спамерские баннеры, которые вне зависимости от скроллинга висят в центре экрана имеют позицию fixed
PM MAIL   Вверх
brother79
Дата 4.9.2009, 09:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 6



Цитата(EmilRegis @  4.9.2009,  09:01 Найти цитируемый пост)
fixed во всех браузерах кроме IE6 и более ранних версий висит на том месте,которое указано позиционированием независимо от скроллинга...то есть улистаешь страницу вниз,а фикнутый элемент будет всё равно висеть в верхнем углу твоего экрана...
подозреваю,что все спамерские баннеры, которые вне зависимости от скроллинга висят в центре экрана имеют позицию fixed 


Ну да, именно так, я так и смотрел как такое сделать по этим банерам. Только ИМХО проблема будет не в вертикальном скролинге, а в горизонтальном, т.к. там как раз не надо, чтобы он висел в одном месте.


--------------------
PM MAIL WWW   Вверх
zevgan
Дата 4.9.2009, 15:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



fixed в самом деле не скроллится, ещё вчера пробовал. Пробовал и другое - хедер сделать отдельной таблицей и javascript'ом раздать ему ширину ячеек исходя из основной таблицы, затем основную таблицу пихануть в див с overflow:auto - тогда появляются два горизонтальных скроллбара: один крутит хедер, другой таблицу.

А вот то, что предложил brother79 сейчас попробую и отпишусь. Кстати, задача упрощается тем, что работать сие чудо должно только в ФФ. Значит можно заюзать -moz-scrollbars-vertical -moz-scrollbars-horizontal

Добавлено через 10 минут и 36 секунд
Ещё прежде, чем делать задумался. Да, идея хорошая, но таким образом у нас вертикальный скролл таблицы получится в самом дальнем правом конце, т.е. далеко за пределами первого монитора. Есть ещё идеи? Я вот подумал, а можно на жабаскрипте написать свои скроллы, или может где-то есть уже написанные?
PM MAIL   Вверх
zevgan
Дата 4.9.2009, 16:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



И вот ещё. Как обзывается событие, которое вызывается при вертикальной прокрутке. Идея такая: По этому событию каждый раз изменять вертикальную позицию хедера (top). Пока не очень представляю, как это реализовать. Может кто-то бросить пример?
PM MAIL   Вверх
Amphiluke
Дата 4.9.2009, 17:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



Цитата(zevgan @  4.9.2009,  16:01 Найти цитируемый пост)
Как обзывается событие, которое вызывается при вертикальной прокрутке.

Очевидно, «scroll».


Цитата(zevgan @  4.9.2009,  16:01 Найти цитируемый пост)
По этому событию каждый раз изменять вертикальную позицию хедера (top).

Подозреваю, что движение будет неприятно дерганным.


Цитата(zevgan @  4.9.2009,  16:01 Найти цитируемый пост)
Может кто-то бросить пример?

Код

   <p id="st">&nbsp;</p>
   <div style="border: 1px solid black; height: 100px; overflow: auto; width: 100px;" id="scrolldiv">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan adipiscing magna. Sed et nulla. Curabitur massa diam, fermentum eget, vehicula sagittis, volutpat sed, lectus. Cras elementum convallis metus. Morbi pulvinar. Integer nibh erat, fermentum vel, rhoncus quis, consectetur vel, dolor. Nulla hendrerit odio id arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec libero nulla, luctus eu, ornare quis, dignissim in, ipsum. Donec tincidunt faucibus diam. Donec accumsan pulvinar lacus. Cras blandit urna. Sed quis tortor. Donec elit erat, luctus nec, vulputate eu, pretium ac, leo. Aliquam egestas dignissim ipsum. Mauris sed orci quis mauris tincidunt tempus. Suspendisse dictum mattis elit.
   </div>
   
   <script type="text/javascript">
      function divscroll(e) {
         document.getElementById("st").firstChild.nodeValue = sd.scrollTop.toString();
      }
      
      var sd = document.getElementById("scrolldiv");
      if (sd.addEventListener) {
         sd.addEventListener("scroll", divscroll, false);
      } else {
         sd.attachEvent("onscroll", divscroll);
      }
   </script>


PM   Вверх
zevgan
Дата 4.9.2009, 21:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Amphiluke, большое спасибо. Сейчас посмотрим, насколько он будет дерганный...
PM MAIL   Вверх
zevgan
Дата 4.9.2009, 22:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Чегой-та тут не так... 

Видоизменил конструкцию на 

Код

document.getElementById("st").style.top = sd.scrollTop.toString()+'px';


Получается, что при скролле позиционируемый див уходит с каждым разом всё ниже и ниже от верхней границы, а при пересечении скроллбаром определённого порога вообще уходит за нижнюю границу экрана. В чем моя ошибка?
PM MAIL   Вверх
Amphiluke
Дата 4.9.2009, 22:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



Я не знаю, как вы делаете, но у меня такой вариант проходит. Ничего не улетает за границы экрана...
Код

   <div style="border: 1px solid black; height: 100px; overflow: auto; width: 100px;" id="scrolldiv">
      <div id="st" style="background: #008000; height: 25px; position: relative; width: 100px; z-index: 1000;">&nbsp;</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan adipiscing magna. Sed et nulla. Curabitur massa diam, fermentum eget, vehicula sagittis, volutpat sed, lectus. Cras elementum convallis metus. Morbi pulvinar. Integer nibh erat, fermentum vel, rhoncus quis, consectetur vel, dolor. Nulla hendrerit odio id arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec libero nulla, luctus eu, ornare quis, dignissim in, ipsum. Donec tincidunt faucibus diam. Donec accumsan pulvinar lacus. Cras blandit urna. Sed quis tortor. Donec elit erat, luctus nec, vulputate eu, pretium ac, leo. Aliquam egestas dignissim ipsum. Mauris sed orci quis mauris tincidunt tempus. Suspendisse dictum mattis elit.
   </div>
   
   <script type="text/javascript">
      function divscroll(e) {
         document.getElementById("st").style.top = sd.scrollTop.toString() + "px";
      }
      
      var sd = document.getElementById("scrolldiv");
      if (sd.addEventListener) {
         sd.addEventListener("scroll", divscroll, false);
      } else {
         sd.attachEvent("onscroll", divscroll);
      }
   </script>

Зеленый div сверху стоит на месте, независимо от прокрутки.
PM   Вверх
zevgan
Дата 4.9.2009, 23:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Да, ваш пример отлично работает. Моя ошибка была в том, что я использовал position:absolute вместо relative. К сожалению, relative срабатывает только в случае фиксирования div'а. Мне же нужно зафиксировать tr. Обернуть tr в div пробовал, не помогло (знаю, что извращение). 

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


 




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


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

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