Закрытие элемента при клику за его пределами

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

О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы.

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт.
Выглядит скрипт так:
$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.

var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области.
#modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.

var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.

if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.

modalctr.hide();
- скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.

На этом все, спасибо за внимание.

Добавлено: 19 Июня 2019 14:04:48 Добавил: Андрей Ковальчук

Прижать футер к низу страницы

Наверное самый распространённый способ прижатия футера к низу страницы:

Необходимая разметка:

<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer {
    height: 100px;
    margin: 0;
    padding: 0;
}

Работает во всех браузерах.

Единственное момент — у body, врапера и футера нельзя указывать положительные верхний или нижний margin/padding. Сделать это можно для вложенных элементов.

Добавлено: 29 Июля 2018 20:18:00 Добавил: Андрей Ковальчук

Разделы и абзацы

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

Но, в отличие от большинства процессоров, HTML и XHTML явным образом применяют теги раздела <div>, абзаца <p> и конца строки
для управления выравниванием и потоком текста. Возврат каретки1, хотяи очень полезный для удобства чтения, обычно игнорируется броузером, и авторы должны применять тег
, чтобы явно указать конец
строки. Тег <p>, который также вызывает переход на следующую строку, несет в себе дополнительный смысл помимо возврата каретки.

Тег <div> несколько отличается от тегов <p> и
. Включенный впервые в стандарт HTML 3.2, он был задуман, чтобы служить простым средством организации текста и разбивать документ на отдельные куски. В силу смысловой неопределенности этого тега он оставался непопулярным. Но последние нововведения (атрибуты выравнивания и стилей, а также атрибут id для организации ссылок и автоматической обработки) позволяют теперь яснее помечать отдельные фрагменты документа, придавая им особый характер, равно как и управлять их внешним видом. Эти возможности придали тегу <div> новый смысл и стимулировали его использование.

Присваивая атрибутам id и class имена в разных секциях документа, разграниченных тегами <div id=name class=name> (так поступают и с другими тегами, например с <p>), вы не только помечаете их для последующего обращения к ним при помощи гиперссылок или для автоматической обработки и поддержки (в частности, составления списка библиографических данных по разделам), но можете также определить явно различающиеся стили для этих частей документа. К примеру, можно ввести класс разделов, содержащих аннотацию к документу (скажем, <div class=abstract>), другой класс – для основного текста, третий – для заключения и четвертый – для библиографии (<div class=biblio>).

Затем каждому классу может быть присвоен собственный способ отображения как на уровне документа, так и с помощью внешней присоединенной таблицы стилей: аннотация выводится с отступом и курсивом (скажем, div.abstract {left-margin: +0.5in; font-style: italic}); основной текст – выровненным по левому краю прямым шрифтом; заключение – так же, как аннотация; библиография – с применением автоматической нумерации и подходящим образом отформатированная.

Добавлено: 22 Июля 2018 19:23:47 Добавил: Андрей Ковальчук

Как открывать перетащенные файлы с помощью HTML5

В предыдущей статье было расказанно, как использовать HTML5 File API, как получать информацию о перетащенных файлах. Сегодня попытаемся загружать фалы со стороны клента, то есть выводить их, если это допустим картинка.

Зачем открывать локальные файлы через JavaScript?
Загрузка файлов через обычные HTML формы очень неудобна. Люди часто используют его допустим при передаче нескольких мегобайт фотографий со своей камеры на сервер. Если предположить что они знают местоположение фотографий, то загрузка может занять несколько минут, но это только если все будет хорошо и форматы и разамеры будут подходящими, а что если нет? До сих пор разработчикам приходилось пологаться на Flash или другие плагины для обеспечение удобства. Предварительная обработка с помощю Javascript‘a имеет ряд преимуществ:

Локальная обработка файлов происходит на много быстрей.
Файлы могут быть проанализированны, чтобы убедиться, что они в правильном формате и ниже, орпеделенного размера.
Такие файлы как картинки могут быть просмотренны перед загрузкой.
Можно обрезать или изменить размер изображения перед загрузкой с помощю canvas.
Объект FileReader.
FileReader является частью W3C File API и предостовляет четыре метода для асинхронной загрузки данных из ссылки к объекту File.

.readAsText(File f, [кодировка]) – считывает файл как строку. По умолчанию в кодировке UTF-8, но можно передать и другой формат.
.readAsDataURL(File f) – как закодированный URL.
.readAsBinaryString(File f) – как двоичный код.
.readAsArrayBuffer(File f) – как объект ArrayBuffer.

В следующем коде будем использовать превые два метода для загрузки и отображения текста и картинок.

Асинхронное открытие файлов с помощю Javascipt.
Вот наша исхлдная функция ParseFile() в который предаются выбранные или перетащенные на элемент #filedrag файлы.

function ParseFile(file) {

        Output(
                "<p>Информация о файле: <strong>" + file.name +
                "</strong> тип: <strong>" + file.type +
                "</strong> размер: <strong>" + file.size +
                "</strong> байт</p>"
        );

}

После обновления статуса, мы проверяем является ли переданный файл текстовым (text/plain, text/html, text/css, и т.д.), загружаем его используя метод FileReader.readAsText() и выводим результат:
// выводим текст
if (file.type.indexOf("text") == 0) {
        var reader = new FileReader();
        reader.onload = function(e) {
                Output(
                        "<p><strong>" + file.name + ":</strong></p><pre>" +
                        e.target.result.replace(/</g, "<").replace(/>/g, ">") +
                        "</pre>"
                );
        }
        reader.readAsText(file);
}

Точно также мы можем проверить, если у нас файл является картинкой (image/jpeg, image/gif, image/png и т.д.) загрузить его как data URL используя метод FileReader.readAsDataURL() и передать это все дело как src атрибут для элемента img:
// выводим картинку
if (file.type.indexOf("image") == 0) {
        var reader = new FileReader();
        reader.onload = function(e) {
                Output(
                        "<p><strong>" + file.name + ":</strong><br />" +
                        '<img src="' + e.target.result + '" /></p>'
                );
        }
        reader.readAsDataURL(file);
}

Добавлено: 13 Июля 2018 07:44:47 Добавил: Андрей Ковальчук

Выделение заглавных букв

Выделение первых букв используют очень многие дизайнеры, они могут иметь другой шрифт, другой цвет, или даже быть картинкой вместо буквы. В этом уроке мы попытаемся выделить первые буквы параграфов использую HTML разметку, CSS стили, а затем попробуем автоматизировать процесс с помощью PHP функции.

HTML

Для того чтобы выделить первую букву параграфа, мы должны обернуть его в специальный HTML элемент к которому мы затем сможем применять некоторые CSS стили. Для этого я собираюсь использовать простой span элемент с классом initialcap.

Только не повторяйте букву после span‘a

CSS

Пришло время для написания CSS стилей, но для начала условимся что наш параграф имеет размер шрифта 14 пикселей, и высоту строки в 18 пикселей.
1.Сдвинем нашу первую букву влево, что бы весь текст параграфа обтекал его

span.initialcap{
    float: left;
}

2. Применим к нему размер шрифта 40 пикселей и высоту строки в 35 пикселей, чтобы буква отличалась от остального текста.
span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px;
}

3. Ну и применим к нашей букве шрифт Serif, синий цвет и добавим маленькое пространство справа.
span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; 
 
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* синий */
    padding-right: 5px;
}

Автоматизация

Ну а теперь последний этап урока автоматизация всего того что мы делали с помощью конечно же PHP. Вы же не будете каждый раз вручную прописывать span с классом. Эта функция поможет этого не делать:
function wpguy_initial_cap($content){
 
    $searchfor = '/>(<a [^>]+>)?([^<s])/';
 
    $replacewith = '>$1<span class="initialcap">$2</span>';
 
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    return $content;
}

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

Добавлено: 13 Июля 2018 07:35:02 Добавил: Андрей Ковальчук

Теги <ins> и <del>

Теги <ins> и <del> позволяют авторам выделять те части содержимого тела документа, которые они намереваются в него вставить или удалить из текущей редакции. HTML 4/XHTML-совместимые браузеры отображают содержимое тегов <ins> или <del> специальным образом,
чтобы читатели могли быстро обнаруживать изменения в документе.

Функция: Определяют вставленное и удаленное содержимое документа
Атрибуты: cite, class, datetime, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title
Закрывающий тег: </ins> и </del>; присутствуют обязательно
Содержит: body_content (содержимое тела)
Может содержаться в: body_content (содержимое тела)

Добавлено: 12 Июля 2018 08:29:11 Добавил: Андрей Ковальчук

Тег <body>

В HTML 4 и XHTML тег располагает множеством атрибутов, управляющих цветом и фоном документа. Различные броузеры имеют расширения этого тега для достижения еще большего контроля над внешним видом отображения.

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

Поскольку положение тегов и легко прогнозируется браузером, они могут быть безболезненно опущены в HTML-документе, но не в XHTML-документе. Однако так же, как теги <html> и <head>, теги и облегчают чтение и удобны для поддержки исходного документа, поэтому мы рекомендуем их применять.

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

Функция: Определяет тело документа
Атрибуты: alink, background, bgcolor, bgproperties, class, dir, id, lang, leftmargin, link, onBlur, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onUnload, style, text, title, topmargin, vlink
Закрывающий тег: ; в HTML может опускаться
Содержит: body_content (содержимое тела)
Может содержаться в: html_tag (тег <html>)

Добавлено: 12 Июля 2018 08:28:47 Добавил: Андрей Ковальчук

Теги, относящиеся к заголовку

Другие теги, которые вы можете включать в тег <head>, относятся к отдельным аспектам создания документа, управления им, связывания его с другими документами, автоматизированной обработки и разметки.

Вот, вкратце, специальные теги заголовка:

<link>
Они определяют базовый адрес (который будет использоваться для относительных ссылок) текущего документа и ссылки на другие документы (например, другие версии данного документа или внешние таблицы стилей).

<isindex>
Нежелательный в HTML 4 тег <isindex> раньше применяли для создания автоматизированных форм поиска, позволявших искать в базах данных нужную информацию, используя текущий документ как средство осуществления запросов.

<nextid>
Не поддерживается в HTML 4 и XHTML. Тег <nextid> облегчает создание уникальных меток при использовании автоматической обработки.

<meta>
Содержит дополнительные данные о документе, которые нельзя поместить в другие теги заголовка.

<object>
Определяет методы, которыми броузер может обрабатывать нестандартные объекты.

<script>
Определяет один или несколько сценариев, которые могут быть вызваны элементами документа.

<style>
Позволяет определять свойства каскадных таблиц стилей (CSS) для управления характеристиками отображения документа в целом.

Добавлено: 12 Июля 2018 08:28:23 Добавил: Андрей Ковальчук

Что следует помещать в теге <title>?

Выбор правильного названия категорически важен для определения характера документа и гарантии того, что он сможет эффективно функционировать в Интернете.

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

Простые названия – «Глава 2», «Часть 6» – не помогают пользователю догадаться, о чем пойдет речь. Более описательная манера изложения, например «Глава 2: Мастерство бального танца» или «Часть 6: Юность и зрелость Черчилля», дает сведения о положении документа в некотором собрании и о его особенном содержании, приглашающем читателя ознакомиться с ним. Ничего не дает ссылка на самое себя. Наименование «Моя домашняя страница» полностью лишено содержания; тем же отличаются «Страница отзывов» или «Популярные ссылки». Вам нужно название, несущее сведения о содержании и назначении документа, чтобы пользователи могли, основываясь только на нем, решить, посетить вашу страницу или нет. «Домашняя страница любителей кумкватов» что-то описывает и, вероятно, привлечет любителей этого горького фрукта так же, как «Книга отзывов любителей кумкватов» или «Популярные среди любителей кумкватов ссылки».

Люди проводят много времени, создавая документы для Сети, часто лишь затем, чтобы блеклым непривлекательным названием перечеркнуть свой труд. В связи с возрастающей популярностью программ, автоматически собирающих ссылки для пользователей, единственной фразой, описывающей содержание ваших страниц в огромной базе данных, могут оказаться их названия, выбранные вами. Нельзя переборщить, повторяя снова и снова: позаботьтесь о том, чтобы выбрать содержательное, полезное, описывающее отличия от других название для каждого из ваших документов.

Добавлено: 12 Июля 2018 08:27:13 Добавил: Андрей Ковальчук

Тег <title>

Тег <title> делает в точности то, что вы ожидали: слова, помещенные в нем, определяют название документа. (Предмет обсуждения в большой степени сам себя объясняет проще, чем можно было бы подумать.) Название используется браузером специальным образом и чаще всего размещается в заголовке окна или в строке состояния. Кроме того, название обычно становится именем по умолчанию для ссылок на документ, когда он добавляется в коллекцию избранных ссылок или в пользовательский список предпочтений. Тег <title>является единственным обязательным объектом в заголовке документа.

Поскольку <head> и даже <html> бывают опущены, тег <title> может оказаться первой строкой в действительном1 (valid) HTML-документе. Более того, большинство броузеров даже дадут вашему документу какое-либо родовое имя, если в нем отсутствует тег <title>, назвав его, например, по имени файла, в котором он содержится. Следовательно, вовсе не обязательно указывать наименования, но это уже слишком, даже для нашего низменного вкуса. Никакой уважающий себя автор не выпустит документ без тега <title> и без названия. Когда указываете тег <title>, не забывайте закрывать его тегом </title>. В противном случае текст названия будет выведен в теле документа, даже если он предшествует тегу .

Браузеры никак не форматируют текст названия документа и игнорируют в теге <title> все, кроме текста. В частности, они пропустят все изображения и любые ссылки.
А вот еще более жалкий пример действительного HTML-документа, в который включены только теги заголовка и названия.

<html> 
<head>
<title>HTML & XHTML: The Definitive Guide</title>
</head>
</html>

Функция: Определяет название документа
Атрибуты: dir, lang
Закрывающий тег: </title>; присутствует обязательно
Содержит: plain_text (простой текст)
Может содержаться в: head_content (содержимое заголовка)

Добавлено: 12 Июля 2018 08:26:47 Добавил: Андрей Ковальчук

Тег head

Тег <head> служит для того, чтобы заключать в себя другие теги заголовка. Ставьте его в начале документа, сразу за тегом <html> и перед тегом или <frameset>. И тег <head> и его закрывающий тег </head> могут быть недвусмысленно «предсказаны» броузером, и поэтому ни что не мешает их опустить. Однако мы советуем включать их в документ, поскольку они облегчают чтение и автоматическую обработку
документа.

Тег <head> может содержать много других тегов, которые помогают определить содержимое документа и управлять им. К ним относятся: base, isindex, link, meta, nextid, object, script, style и title. Все они могут появляться в любой очередности.

Функция: Определяет заголовок документа
Атрибуты: dir, lang, profile
Закрывающий тег: </head>; редко опускается в HTML
Содержит: head_content (содержимое заголовка)
Может содержаться в: html_tag (тег <html>)

Добавлено: 12 Июля 2018 08:26:26 Добавил: Андрей Ковальчук

Атрибут version

Атрибут version определяет версию стандарта HTML, использованного при составлении документа. Его значение для HTML версии 4.01 выглядит в точности так:

version="-//W3C//DTD HTML 4.01//EN"


В целом, от указания версии в теге <html> толку мало, и этот атрибут признан нежелательным в стандарте HTML 4. Серьезным авторам следует вместо него использовать SGML-тег <!DOCTYPE>, например:1

!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3c.org/TR/ html4/strict.dtd"

Добавлено: 12 Июля 2018 08:26:04 Добавил: Андрей Ковальчук

Атрибут lang

Включенный в тег <html>, атрибут lang определяет язык, который, главным образом, употребляется в документе. Использованный с другим тегом, атрибут lang назначает язык содержимого тега. В идеале браузер в конечном счете применяет lang, чтобы лучше отображать текст.

Вводимые значения атрибута lang соответствуют двухбуквенным кодам языков, определенным в стандарте ISO-639. Вы также можете обозначить диалект, поставив за кодом языка тире и код диалекта. Например, «en» – это ISO-код для английского языка; «en-US» – полный код для американского диалекта английского языка. Другие основные коды включают: «fr» (французский), «de» (немецкий), «it» (итальянский), «ul» (голландский), «el» (греческий), «es» (испанский), «pt» (португальский), «ar» (арабский), «he» (иврит), «ru» (русский), «zh» (китайский), «hi» (хинди).

Добавлено: 12 Июля 2018 08:25:31 Добавил: Андрей Ковальчук

Редирект на другую страницу

window.location = "http://vsetaksi.ru/";

Если вы хотите, чтобы другая страница загрузилась через некоторое время вы можете воспользоваться следующим приемом:
<Meta Http-equiv="Refresh" Content="{число секунд задержки}; Url={URL файла }">

Добавлено: 12 Июля 2018 07:55:31 Добавил: Андрей Ковальчук

Информационные блоки предупреждений

Исходный код этого примера:

<style type="text/css">
DIV.warn_red {
	background:transparent url(/pic/icon/warn_red.gif) no-repeat scroll 14px 13px;
	padding:2px 0 0 27px;
	color:#CC0000;
	font-size:14px;
	font-weight:bold;
	padding-bottom:7px;
	border:1px solid #D3D5C3;
	border-radius:5px 5px 5px 5px;
	margin-bottom:5px;
	padding:14px 20px 6px 48px;
	min-height:30px;
	max-width:600px;
}
DIV.info {
	background:url("/pic/icon_i.png") no-repeat scroll 14px 13px #FFFBCF;
	border:1px solid #D3D5C3;
	border-radius:5px 5px 5px 5px;
	margin-bottom:5px;
	padding:14px 20px 6px 48px;
	min-height:30px;
	max-width:600px;
}
DIV.warn_yellow {
	border:1px solid #D3D5C3;
	border-radius:5px 5px 5px 5px;
	margin-bottom:5px;
	padding:14px 20px 6px 48px;
	min-height:30px;
	max-width:600px;
	color:#E9A708;
	font-size:14px;
	font-weight:bold;
	background:transparent url(/pic/icon/warn_yellow.gif) no-repeat scroll  14px 13px;
}
</style>

<h1>Информационные блоки предупреждений</h1>
<div class="warn_red">Это блок предупреждения!</div>
<div class="warn_yellow">Это блок предупреждения!</div>
<div class="info">Это блок предупреждения!</div>

Добавлено: 11 Июля 2018 08:30:56 Добавил: Андрей Ковальчук