Как в CSS добавить ссылку вместо скролла списка?

Question

[softshape]

Наш дизайнер - большой затейник. Он хочет, чтобы длинный список с ограниченной высотой не скролировался, а обрезался, а под ним появлялась бы ссылка типа View All. Ссылка уже показывает полную версию списка.



Проблема в том, что заранее неизвестно, войдут ли все элементы в заданную высоту или нет. Поэтому сразу в HTML прописать ссылку не получится. Можно это сделать на JavaScript. Но, возможно, существует решение на чистом CSS?

Answer 1

[Максим Тимофеев]

Много способов. Самый правильный, грузить 3 элемента, а по клику ajax-ом подтягивать остальные.
Еще можно сделать фиксированную высоту и overflow:hidden; по клику или наведению менять height на auto.
Можно написать аккордион на jquery или взять готовый, подобрать.

Comments

[softshape]

Проблема в том, что я заранее не знаю высоту этого списка - она определяется его окружением. Поэтому войдет туда 3 или 10 элементов, заранее неизвестно. А по условиям задачи показывать View all надо только если в полном списке больше элементов, чем входит на страницу. Например на скриншоте вошло 3 элемента, а всего их 10 - показываем View all. Входит 3 и всего их 3 - не показываем.

[Максим Тимофеев]

softshape: Ну а в чем проблема использовать if else на сервере при формировании страницы?

[softshape]

Чорт, вы издеваетесь. Повторяю - сервер не знает высоты этого блока. И никто не знает, это вообще responsive design и высота блока может меняться при ресайзе страницы.

[Максим Тимофеев]

softshape: Тогда тоже самое в js

[Максим Тимофеев]

softshape: Или через медиа запросы в css

[Михаил Шведков]

Так в чем проблема-то? действительно хорошее решение - подгружать ajax'ом до тех пор, пока высота списка не приблизится максимально к высоте страницы. Рассчитать количество элементов для подгрузки можно исходя из размера элемента и размера страницы, на ходу

[Максим Тимофеев]

Михаил Шведков: думаю автор хочет, то что умеет, а умеет мало

[softshape]

Зачем подгружать аяксом? На JS/jQuery решение занимает одну строку, что-то вроде $('#link').toggle($('#innerDiv').height() > $('#outerDiv').height()), где список внутри #innerDiv, #innerDiv внутри #outerDiv, а у #outerDiv включен overflow:hidden. Просто если есть выбор между CSS и JS решением, я предпочитаю CSS.

[Максим Тимофеев]

softshape: "Зачем подгружать аяксом?" Что бы страница грузилась быстрее, что бы не брать лишние записи из базы. Но и без него, на JS/jQuery вполне себе норм, только Вот автор не знает js и видимо не собирается осваивать.

[softshape]

Максим Тимофеев: Да нет, автор в курсе js, просто вы не знаете CSS.

Answer 2

[Михаил Шведков]

На чистом CSS - можно, но будет весьма и весьма нехорошо. JS-ом аккуратнее получится