Альтернатива MORE

[D Ash]

Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог MORE, которые оставался бы свёрнутым при просмотре одиночного поста (комментариев). Для реализации (этим путём, во всяком случае) нужен платный сервис CSS и (желательно) базовое (даже если самое поверхностное) знание самого CSS.

Объяснение того, как работает. Для тех, кто хочет понять.

Объяснение того, как работает. Для тех, кто хочет понять.

So. Как? Есть в CSS такие штуки, как селекторы. Они позволяют применять стиль не просто к классам, тэгам или элементам по ID, но к ним же с выполнением особых условий. В частности, :hover отвечает за элемент, когда на него наводится курсор, a :active применяется к элементу в момент нажатия по нему клавишей мыши (любой) и снимается, когда она отпускается. С их помощью можно имитировать кнопку.

Для начала, нам нужно 2 вложенных блока (с привязанными к ним классами). Во внешний мы вписываем название ссылки (скажем, стандартное "читать дальше"). Во внутренний уходит содержимое нашего не_more. В классах мы описываем следующие вещи.

1. Класс внешнего блока (дальше - .panelOut). Он должен выглядеть также, как тэг a, так что стоит добавить color, text-decoration и вообще сделать всё то, что вы делали с ссылками в вашем дизайне. Кроме того, пропишите position:relative; display:inline !important; - это обязательно.
2. .panelOut:hover. Так оно будет выглядеть при наведении, так что, опять же, опишите то же, что описывали для a:hover (если у вас ссылки по умолчанию - то это text-decoration:none; cursor:pointer;).
3. Класс внутреннего блока (дальше - .panelIn). Здесь вы описываете, как будет выглядеть то, что появится при нажатии. Дальше важные моменты. position:absolute; При этом, left, top, width и height (все 4 также обязаны быть заданы) должны быть подобраны так, чтобы блок всегда оказывался поверх ссылки, нажатие по которой его открывает (иначе он сразу же исчезнет). display:none; overflow:auto; - это тоже обязательно. Я в своём варианте помимо прочего навесил ещё background из полупрозрачного png - для того, чтобы, если я вдруг захочу убрать в такую штуку изображение, оно не стало полупрозрачным (как это произошло бы, пропиши я opacity меньше 1).
4. Последнее. Просто скопируйте строку. .panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

Как оно работает? В тот момент, когда вы нажимаете на кнопку, panelIn появляется, ровно на то время, пока кнопка зажата. Но, как бы быстро это ни было, срабатывает hover на panelIn (и держится до тех пор, пока вы не уберёте курсор с блока).

Готовый код и инструкции к применению.

Готовый код и инструкции к применению.

.panelIn {width:300px; height:300px; padding:20px; border-radius: 30px 15px; -moz-border-radius: 30px 15px; box-shadow: 0 0 15px #222; -webkit-box-shadow:box-shadow: 0 0 15px #222; -moz-box-shadow: 0 0 15px #222; background: url('/userdir/1/9/2/4/1924297/70496636.png'); display:none; position:absolute; overflow:auto; left:-170px; top:-170px; border:1px solid #111; color:#ccc; text-shadow: 0 0 1px #ccc; z-index:200 !important;}
.panelOut {position:relative; display:inline !important; text-shadow: 0 0 3px #93a3da; color:#93a3da;}
.panelOut:hover {cursor:pointer; text-shadow: 0 0 9px #93a3da;}
.panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

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

Это вставляйте в пост:

<div class="panelOut">название ссылки<div class="panelIn">содержимое вложения</div></div>

Один важный момент. Название ссылки не должно быть слишком длинным, иначе при нажатии в неправильном месте курсор может не оказаться поверх блока, и тот сразу же исчезнет. И ещё лучше бы не делать .panelIn слишком большим, иначе он может залезть за край экрана, и тогда контент потеряется, что не есть хорошо.

Пример 1. "Предисловие" и "первая глава".
Пример 2. Любой пост дневника.

@темы: Платные сервисы, Оформление дневника, Теги оформления записи

Comments

[Тайя.]

Аняня, у меня получилось) Только я не понимаю, зачем в коде z-index?
И еще, это видно только при заходе в дневник, а еcли просматривать такой пост через избранное, он будет полностью открыт

[D Ash]

Тайя, которая душит романтиков
Избранное - да. В pda-режиме и при просмотре через rss тоже. Но тут ничего не сделаешь, полагаю - там user.css не подключается. Можно, конечно, наколдовать посерьёзнее (через hidden more'ы и double hidden more'ы) (см. тут) (т.е. показывать для ленты обычный more, а на входе в днев эту штуку), но тогда код станет слегка перегруженным. Хотя, why not? )

А z-index я прописал для своего днева. У меня там bar внизу с высоким индексом висит, он перекрывал окошко.

[D Ash]

А, нет, не получится. Тогда придётся запаковывать more в more, а это запрещено. Кья... Ну, можно другое оформление для ленты прописать (style'ами в тэгах).

[Тайя.]

Ну собственно вот, применение dushiromanticov.diary.ru/p163212485.htm

Я применила несколько классов (.panelIn, .panelIn1, .panelIn2, .panelIn3), вместо active сделала hover, там, гда рамка и тень, размеры выставлены просто auto.
А без z-индекса действительно не обойдешься, иначе то, что рядом, будет поверх наползать)

[D Ash]

Тайя, которая душит романтиков
Хм... Думаю, в этом случае имело бы смысл ещё менять курсор на hover'е (на "pointer") и скрывать по клику (т.е. по "active"). Но это вам решать, да. А вообще, удобно, кажется. )

[Тайя.]

D Ash,

скрывать по клику (т.е. по "active")

Как, как это сделать? Я сделала active, но скрывается только если увести мышку. Можно сделать, чтобы закрывалось по клику, просветите, плиииз! И можно ли сделать, чтобы открывалось при наведении, а скрывалось по щелчку?

[D Ash]

Тайя, которая душит романтиков
Окей. Допустим, .panelOut - внешний div, а .panelIn - вложенный. Код примерно такой:

.panelIn {display:none;}
.panelOut:hover .panelIn {display:block !important; cursor:pointer;}
.panelOut:hover .panelIn:active {display:none !important; cursor:default;}

[Тайя.]

D Ash, спасиб, попробую

[Тайя.]

Ну, в общем, результаты таковы

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

Я вас еще не задолбала?

[D Ash]

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

А иначе получится, что кликаете по крестику в углу - и мышь оказывается на другой картинке, соответственно, раскрывается сразу она. Или просто по щелчку, как в первоначальном варианте, описанном мной в этом посте.

Нет, всё окей. )

[Тайя.]

D Ash, если открытие делать по щелчку, то тогда нужно держать картинку мышкой. Но, в общем варианты всякие, спасибо!

[D Ash]

Тайя, которая душит романтиков
You're welcome. )