У меня есть совсем небольшое предложение по улучшению Хостобзора.

Вот посмотрите на страницу: http://www.hostobzor.ru/db/hosting.php?pid=41
Не подумайте, это я не хостера рекламирую, это я пример показываю

Как видите, список тарифов очень большой и просматривать его достаточно неудобно: появляется горизонтальная полоса прокрутки, а если пролистать немного вправо, то списка параметров (первый столбец) становится не видно, и ориентироваться вообще невозможно. Особенно когда пытаешься сравнивать поддерживаемые на тарифах технологии — всё время приходится отъезжать влево, чтобы посмотреть, к чему относится та или иная галочка.

Так вот, у меня уже возникала подобная проблема на одном из моих сайтов, я её с успехом решил и желаю предложить здесь тот же вариант решения.

Суть состоит в следующем:
При загрузке страницы посредством JavaScript-а скрывается часть столбцов, а остаётся только первые, например, 5. В заголовке таблицы есть две кнопки: одна сдвигает (перелистывает) столбцы вправо, другая — влево.

О том как это сделать я подробно написал вот здесь: http://webmastak.com/blog/2006/04/21/big-tables-sux/ (там же можно найти и рабочий пример)

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

Спасибо за внимание.

upd: а сейчас я ещё и думаю над тем, как бы зафиксировать некоторые столбцы, чтобы было удобнее сравнивать...

Спасибо большое за предложенную помощь и желание улучшить сайт. Штука действительно полезная и нужная. Вы подметили правильно. Я на досуге попробую её реализовать в том виде, как она описана в приведенной статье. Если не получится что-то, ждите вопросов . Просто, я не настолько свободно чувствую себя с JS, чтобы гарантированно утверждать, что обязательно сделаю.

Собственно, JS-код нужно скопировать как есть.

А давайте сделаем проще: я Вам отправлю вот ту страницу, которую привёл для примера, только в обработанном варианте.

Чтобы не откладывать в долгий ящик, сделал всё сразу.

Архивчик с изменённой страницей вот: http://flymovies.msk.ru/download/hostobzor.rar [44Kb]

В HTML-файле мои комментарии выглядят так:


Чтобы изменить количество выводимых столбцов нужно отредактировать файл tables.js (самая первая строка).

Если у пользователя JS отключён, то он увидит все столбцы открытыми. Также возможно «листание» с помощью Ctrl+вправо (влево).

Спасибо. Посмотрел Ваш вариант, вроде всё весьма прилично получается.

Странно, что кроме нас это никого не занимает . В связи с этим подумал, а не возмутятся ли владельцы мониторов с бОльшим, чем 1024 разрешением. С каждым днём их всё больше и больше.
Сегодня им ничего нажимать не надо, видят почти всё сразу, а так ведь вынудим щёлкать.

Народ, не безмолствуйте, пожалуйста. Пожалейте ленивого администратора сайта .

дейстивтельно у меня 1280 ;-) не хорошо как-то выходит, тогда уж в профиль параметр добавить новый надо.

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

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

А может стоит вычислять количество выводимых столбцов в зависимости от расширения экрана?
Думаю это будет наилучший вариант.

надо тогда делать лишнюю загрузку или использовать ajax.

Ну почему же, вычислить размеры монитора можно в том же JS без дополнительных загрузок.

А вот вариант с полосой прокрутки был бы вообще идеальным в нашем случае. Даже лучше моего варианта. Только тогда таблицу пришлось бы разделить на две.

Я имею в виду: сделать горизонтальную прокрутку только для содержимого таблицы, а не для всей страницы.

А я могу просто тупо после каждого, например, третьего столбца, вставлять столбец с названиями параметров. Немного некрасиво, зато удобнее. Как думаете?

Ну тогда сами посудите, как это всё жутко разростётся. Это не решение, это уход от решения

То есть я думаю как сделать так, чтобы всё содержимое не выходило по ширине за пределы страницы. Чтобы оно:
а) умещалось в странице при заданной ширине окна
б) оставалось столь же удобным для просмотра

А разве не получится так сделать, чтобы, скажем, первоначально отображалось 3 столбца - а сверху была настройка "ПОКАЗАТЬ СТОЛБЦОВ" с выпадающим списком от 1 до 99 - и чтобы настроенное пользователем количество столбцов фиксировалось в куках этого пользователя. А кто спрятался и куки у себя запретил, то никто не виноват - может, кто-то и джаваскрипт запрещает.

А еще лучше совместить этот вариант с определением разрешения экрана, как предлагалось выше HHost.ru (но только для нового посетителя без кук - типа 3 столбца для разрешения 800, 5 столбцов для разрешения 1024 и тп), подгадывая значение по умолчанию для нового незакукенного пользователя под разрешение экрана

antonioni, очень даже правильная мысль.

Ещё немного и мы "Windows XO" напишем . Согласен, должно быть удобно. Но всё-таки простыми методами.

Сегодня главная беда - при прокрутке теряются названия параметров. Значит, надо либо от прокрутки избавиться, либо сделать постоянно видимыми названия параметров.

Предложение deMone позволяет полностью решить вторую проблему, и частично первую (заменяя более удобную, ИМНО, прокрутку на щелчки по кнопке. Но остаются владельцы широких мониторов, которым эти щелчки навязываются без необходимости.

Считаю самым элегантным выходом - добавить, если это возможно, в предложенные JS скрипты механизм определения разрешения экрана и включать этот механизм прокрутки только в случае необходимости. Всё остальное - хорошие, но не необходимые вкусности.

Не так?

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

- например, некоторые дополнительные панели броузеров слева или справа
- например, масштабирование шрифтов либо масштабирование всего окна броузера - у некоторых может работать по-разному

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

Потому как, если не весь экран займет и придется лишний раз щелкать, то, конечно, неэстетично - но если у кого-то из-за не совсем стандартных настроек броузера, наоборот, в экран не поместится и еще и кнопки за экран уедут, еще хуже получится

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

antonioni, столь серьезный подход требует учесть и то, что сами столбцы разной ширины в зависимости от содержащихся в них данных .

Подождём, что скажет автор идеи.

Автор идеи знает выход Сейчас напишу и выложу архивчик.

Как вариант, можно просто положить параметры в div style overflow scroll, будет прокрутка и JS не надо.

Вот именно об этом я и подумал, но это потребует все данные заключить в отдельный <td style="overflow: scroll;" rowspan="кол-во строк"> и серьёзно переписать всю логику вывода таблицы. Я же хочу обойтись меньшими жертвами.

Не обязательно так усложнять, можно проще. 2 div-a, в левом таблица с характеристиками параметров, а правый overflow с самими параметрами.

А если данные запихать в iframe c width="100%"? И никакого JS не надо

Ребята, только не забывайте о максимальной совместимости со всем, что ползает по страниницам.

можно добавить через JS проверку поддерживания iframe, если не поддерживает iframe (если такие еще остались) или JS, то показывать как и раньше.

Собственно div overflow это и делает по смыслу, только он более совместим чем JS и лучше для поисковиков и компоновки страницы чем iframe.

А у обоих этих способов не будет ли проблемы состыковки
- левого столбца (с названиями параметров)
- и других столбцов (с соответствующими данными в тарифах)

Имею в виду то, что в таблице, в зависимости от количества данных, некоторые ячейки, видимо, могут занимать как 1 строку, так и 3 - или на самом деле это не так?

Да, это так. Правда, управляет процессом переноса сам броузер.

В принципе да, по идее может быть такое. Надо стандартизировать

Да, верно. Вот об этом следует подумать. Ведь в данных-то строка может быть больше по высоте, чем в параметрах...

Хм... Тогда <div> с overflow точно не пойдёт.

Предлагаю такой простой в использовании вариант - оставить то что есть, совместив это с предложением deMone следующим образом

- над списком тарифов две яркие кнопки типа
[<] прокрутка таблицы [>]

- при нажатии на кнопку [налево] скрывается первый столбец с данными, при повторном нажатии - скрывается второй столбец и тп
- при нажатии на кнопку [направо] отображается самый правый из скпытых столбцов, те второй, при следующем нажатии - первый

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

Вроде как все проблемы решаются и хуже никому не будет - или где?

Вроде, да. deMone, это реализуемо на JS?

То ли я туплю, то ли что... Что Вы имели в виду?


да


я думаю поставить кнопку отключения фичи

Но сейчас я делаю так, чтобы система как можно правильнее определяла свободное пространство страницы. И правильно выводило начальное количество столбцов.

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

Т.е. первоначальная последоватьность столбцов: 1, 2,3 ... 9, 10.

При нажатии на кнопку "<-" получаем последовательность: 2, 3 ... 9, 10, 1. Еще раз нажали: 3,... , 9, 10, 1, 2.

При нажатии на кнопку "->" сдвиг в обратную сторону.

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

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

Т.е. не передвигать столбец 1 в конец (в правую часть таблицы) - а просто его скрывать по щелчку на кнопке [<] - а по щелчку на кнопке [>] обратно отображать

Т.е. есть, все отображается, как сейчас,
(столбец с заголовками-названиями-для-ячеек назовем 0), получается таблица со столбцами
0 1 2 3 4 5 ... 9

Щелкаем по кнопке [<] - получаем
0 2 3 4 5 ... 9

Щелкаем по кнопке [<] еще раз - получаем
0 3 4 5 ... 9

Щелкаем по кнопке [>] - получаем
0 2 3 4 5 ... 9

Щелкаем по кнопке [>] еще раз - получаем
0 1 2 3 4 5 ... 9

Ничего не буду иметь против такой реализации, если она возможна. Функциональность нисколько не пострадает.

Давайте на этом варианте остановимся?

Теперь понял. Давайте

Прошу заранее извинить за возможную задержку — загрузили меня работой на работе.

А слона-то мы все и не заметили

Что колонки таблицы в экран не помещаются - это полбеды

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

Точно. Но это легко поправить без скриптов.
Спасибо за подсказку.

http://www.designologue.com/mint/

Мне нравится как тут сделано. Поизменяйте размеры браузера, увидите о чём я.