Спрятанный виджет-2. МастерОК.

Часть 1    Часть 2

СПРЯТАННЫЙ ВИДЖЕТ

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

Продолжим тему, друзья. Итак, мы определились с местом размещения виджета. С его контентом (с тем, что будет внутри него).

Давайте теперь перейдём непосредственно к коду. Рассматривайте иллюстрацию (если нажать на неё, она откроется в увеличении). А я буду рассказывать, в чём тут суть и смысл.

нажать для увеличения

- Одинаковым цветом выделены элементы кода, имеющие один или сходные смыслы.

- КРАСНЫМ выделены теги кода, отвечающие за ОБЪЯВЛЕНИЯ начала какой-то части кода и её окончание. Так, здесь отмечены теги, означающие начало и завершение работы со СТИЛЕМ, а в нижней части - то же, но с РАЗДЕЛОМ.

- ФИОЛЕТОВЫМ выделена та часть кода, которая отвечает за ВИДИМЫЕ и НЕВИДИМЫЕ размеры (ВЫСОТЫ) виджета. ШИРИНА тут задана автоматическая - то есть ваш виджет по ширине займёт столько места, сколько вы ему отвели в шапке ли, в сайдбаре. Чуть подробнее:

• Предположим, виджет у вас состоит из картинки (высота её 100px и расположенной ниже таблицы высотой 200px);
• ВЫСОТА В СОСТОЯНИИ ПОКОЯ тогда должна быть НЕ МЕНЬШЕ  100px - в противном случае ваша заглавная картинка будет частично срезана! Значит, это значение нужно задавать более 100px. 110, а то и 120px;
• ВЫСОТА ПОЛНАЯ - прибавьте не менее 200px к первому значению (а лучше с запасом - 210-220px). Значит, ВЫСОТА ПОЛНАЯ у нас будет от 320 до 340px. И тому подобное.

- САЛАТОВЫМ выделен блок, отвечающий за настройки анимации (другими словами, это строки задают вариант "раскрытия - закрытия" содержимого виджета). Если вы при чтении предыдущей части статьи заходили на "Классики" и проверяли работу этого элемента, то представляете, о чём речь. Так вот: именно ТАК двигается виджет на "Классиках".

- НЕ МЕНЯЙТЕ в этих строках ничего. Но, если хотите, - зайдите >>>СЮДА <<<. Там об анимации всё подробно расписано. Дажеесть целый блок, в котором вы можете сравнить предлагаемые виды движения и выбрать понравившийся (в таком случае изменяйте код в соответствии с подходящими значениями).

- konsn - это имя стиля. У МЕНЯ ОШИБКА в скрине: в разделе div это имя тоже должно было быть залито этим цветом!

- ЖЁЛТЫМ - отмечена та часть кода, в которой будет содержаться контент вашего виджета, его части, элементы и так далее. На скрине в этой части кода есть ещё теги, которые ЦЕНТРУЮТ содержимое. Если это вам не нужно - УДАЛИТЕ теги centr. Со скобками, разумеется )

- строки  БЕЗ ЗАЛИВКИ  - оставьте как есть. Они описывают НЕВИДИМУЮ границу виджета и предписывают ему действовать при наведении курсора.

**********

Вот, собственно, и всё. ИСХОДНИК с кодом (таким же, как на скриншоте)

>>> СКАЧАЙТЕ ЗДЕСЬ <<<

ПРИМЕЧАНИЕ: если вы пользовались предыдущими статьями МастерКА при создании кодов, то, вероятно, хорошо помните, как РАЗМЕСТИТЬ ЭЛЕМЕНТ НА СТРАНИЦЕ ПОВЕРХ ДРУГИХ ЭЛЕМЕНТОВ в любом удобном месте.

- Положение элемента можно задать при помощи строк position:fixed (absolute) и top:***px и другими командами из этой "серии", задающими положение ЛЕВОГО ВЕРХНЕГО угла элемента на странице (как нам видно на экране) - или ПРАВОГО ВЕРХНЕГО УГЛА элемента, если говорить об этом с "его" позиции.

- Вспомнили? Топ, боттом, лефт, райт... )) Допишите позишн и координаты размещения в этот код - и вы сможете "навешивать" ваш виджет в любое место страницы )

- Где это дописать? А допишите ПОСЛЕ строк, которые выделены на скрине САЛАТОВЫМ )

Доброй работы, друзья!