Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Cтатичный хедер у очень широкой таблицы

Автор: zevgan 4.9.2009, 04:43

Сейчас встал перед на первый взгляд тривиальной задачей - статичный хедер у таблицы по ширине во много раз большей, чем ширина окна. Сложность в том, чтобы горизонтальный скроллбар крутил всю таблицу включая хедер, а вертикальный только строки без хедера и притом, чтобы вертикальный скролл находился всегда в поле зрения. Буду благодарен за любой совет (за сегодня перерыл кучу вариантов).

Автор: EmilRegis 4.9.2009, 07:20

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

Автор: brother79 4.9.2009, 08:20

Цитата(EmilRegis @ 4.9.2009, 07:20

)

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

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

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

Автор: EmilRegis 4.9.2009, 09:01

fixed во всех браузерах кроме IE6 и более ранних версий висит на том месте,которое указано позиционированием независимо от скроллинга...то есть улистаешь страницу вниз,а фикнутый элемент будет всё равно висеть в верхнем углу твоего экрана...
подозреваю,что все спамерские баннеры, которые вне зависимости от скроллинга висят в центре экрана имеют позицию fixed

Автор: brother79 4.9.2009, 09:50

Цитата(EmilRegis @ 4.9.2009, 09:01

)

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

Автор: zevgan 4.9.2009, 15:39

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

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

Добавлено через 10 минут и 36 секунд
Ещё прежде, чем делать задумался. Да, идея хорошая, но таким образом у нас вертикальный скролл таблицы получится в самом дальнем правом конце, т.е. далеко за пределами первого монитора. Есть ещё идеи? Я вот подумал, а можно на жабаскрипте написать свои скроллы, или может где-то есть уже написанные?

Автор: zevgan 4.9.2009, 16:01

И вот ещё. Как обзывается событие, которое вызывается при вертикальной прокрутке. Идея такая: По этому событию каждый раз изменять вертикальную позицию хедера (top). Пока не очень представляю, как это реализовать. Может кто-то бросить пример?

Автор: Amphiluke 4.9.2009, 17:17

Цитата(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>

Автор: zevgan 4.9.2009, 21:18

Amphiluke, большое спасибо. Сейчас посмотрим, насколько он будет дерганный...

Автор: zevgan 4.9.2009, 22:27

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

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

Код


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

Получается, что при скролле позиционируемый див уходит с каждым разом всё ниже и ниже от верхней границы, а при пересечении скроллбаром определённого порога вообще уходит за нижнюю границу экрана. В чем моя ошибка?

Автор: Amphiluke 4.9.2009, 22:43

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

Код


   <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 сверху стоит на месте, независимо от прокрутки.

Автор: zevgan 4.9.2009, 23:39

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

В случае же применения position:absolute к tr он всё-таки начинает двигаться вместе со скроллом, но как я писал выше, гораздо быстрее скорости с которой прокручиватся таблица и по прошествии какого-то расстояния по вертикали полностью уходит за пределы экрана. smile