Ознакомьтесь с нашей политикой обработки персональных данных
17:33 

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

D Ash
Embrace your dreams and prove your honor...
Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог 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 прописан background. Либо замените его на какой-нибудь цвет, либо залейте изображение к себе в БИ и измените ссылку (если вам нужно то же, что у меня - оно тут). Иначе не получится, парсер CSS чистит ссылки на изображения из чужих БИ.

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

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

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

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

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

Комментарии
2011-07-15 в 18:21 

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

2011-07-15 в 18:33 

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

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

2011-07-15 в 18:39 

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

2011-08-14 в 17:34 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ну собственно вот, применение dushiromanticov.diary.ru/p163212485.htm

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

2011-08-14 в 23:51 

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

2011-08-15 в 18:27 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
D Ash, скрывать по клику (т.е. по "active")

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

2011-08-15 в 18:52 

D Ash
Embrace your dreams and prove your honor...
Тайя, которая душит романтиков
Окей. Допустим, .panelOut - внешний div, а .panelIn - вложенный. Код примерно такой:

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

2011-08-15 в 19:01 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
D Ash, спасиб, попробую :)

2011-08-15 в 19:33 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ну, в общем, результаты таковы:D

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

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

2011-08-16 в 01:16 

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

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

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

2011-08-16 в 12:51 

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

2011-08-19 в 06:43 

D Ash
Embrace your dreams and prove your honor...
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная