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

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

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

Теперь подробнее о скрипте. Он работает на основе 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 Добавил: Андрей Ковальчук

HTML5 Drag&amp;Drop

Перетаскивание файлов из рабочего стола в браузер одна из наиболее интересных возможностей HTML5. Я опишу как:

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

Поддержка браузеров
Прежде чем начать, нужно отметить что поддержка перетаскивания файлов браузерами будет неравномерной. Код работает в современных браузерах, но вполне возможно API будет меняться.

Последние версии Firefox и Chrome поддерживают все функции и превосходно работают с перетаскиванием.
Опера может парсить файлы в JavaScript, но не поддерживает перетаскивание файлов и загрузку с помощю XMLHttpRequuest2
IE и десктоповые версии Safari не поддерживают ничего из нужного API.
HTML и CSS
Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут “multiple” который позволяет пользователю выбирать любое количество файлов.

Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
        <fieldset>
                <legend>HTML Загрузка Файлов</legend>
                <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
                <div>
                        <label for="fileselect">Выберите файлы для загрузки:</label>
                        <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
                        <div id="filedrag" >Или перетащите их сюда</div>
                </div>
                <div id="submitbutton">
                        <button type="submit">Загрузить файлы</button>
                </div>
        </fieldset>
</form>

Элемент #filedrag будет использоваться как облясть в которую необходимо пренести файлы. Элемент в CSS стилях скрыт, но он будет отображаться средствами JavaScript если перетаскивание поддерживается браузером:
*{
     margin: 0px;
}
body{
     background: none repeat scroll 0% 0% #EFEFEF;
}
.wrapper{
     background: none repeat scroll 0% 0% #FFFFFF;
     margin: 150px auto;
     border: 2px solid #3DA8BA;
     padding: 10px;
     width: 500px;
}
fieldset{
        border:2px solid #efefef;
}
#filedrag{
        border-radius: 7px 7px 7px 7px;
        border: 2px dashed #3DA8BA;
        color: #555555;
        cursor: default;
        display: none;
        margin: 1em 0pt;
        padding: 1em 0pt;
        text-align: center;
        background:#f9f9f9;
}
#filedrag.hover {
        border-style: solid;
        box-shadow: 0pt 3px 4px #dbdbdb inset;
}
#messages{
        margin-top:10px;
        padding:5px;
        font-size:14px;
}
#messages p{
        border-bottom:1px solid #efefef;
        margin-bottom:5px;
}

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

File API
W3C File API предостовляет несколько объектов которые мы будем использовать:

FileList: предостовляет массив выбранных файлов.
File: предстовляет единственный файл.
FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.

JavaScript события
Пришло время писать JavaScript код. Мы не будем использовать JavaScript фреймфроков, поэтому напишем пару фуннкций для сохронения нашего времени. Это функция которая достает нужный элемент по ид и функция выводящая сообщения
/* getElementById */
function $id(id) {
        return document.getElementById(id);
}

/* вывод сообщений */
function Output(msg) {
        var m       = $id("messages");
        m.innerHTML = msg + m.innerHTML;
}

Далее проверим поддержку File API и вызовем функцию инициализации Init():
/* проверка поддержки API */
if (window.File && window.FileList && window.FileReader){
        Init();
}
/* инициализация */
function Init(){

        var fileselect   = $id("fileselect"),
                filedrag     = $id("filedrag"),
                submitbutton = $id("submitbutton");

        /* выбор файла */
        fileselect.addEventListener("change", FileSelectHandler, false);

        /* проверка поддержки XHR2 */
        var xhr = new XMLHttpRequest();
        if (xhr.upload){

                /* сброс файла */
                filedrag.addEventListener("dragover", FileDragHover, false);
                filedrag.addEventListener("dragleave", FileDragHover, false);
                filedrag.addEventListener("drop", FileSelectHandler, false);
                filedrag.style.display = "block";

                /* удаление кнопки сабмитта */
                submitbutton.style.display = "none";
        }

}

Функция Init():

Устонавливает обработчик события к изменению инпута типа файл.
Отоброжает элемент #filedrag.
Устанавливает обработчики событий “dragover” и “dragleave” для динамического изменения стилей элемента #filedrag.
Устанавливает обработчик события “drop” для элемента #filedrag.
Скрывает кнопку сабмитта формы – он пока не требуется, так как мы будем просто анализировать файлы.
Также вы можете скрыть инпут типа файл, если перетаскивание поддерживается. Но я не буду этого делать чтобы пользователь мог воспользоваться удобным ему вариантом.

Проверка поддержки метода XMLHttpRequest.upload предотврощает проблемы с Оперой. Браузер поддерживает объекты File, FileList и FileReader, но не поддерживает перетаскивание файлов или XMLHttpRequest2. Поэтому мы отоброжаем информацию о файле, но оставляем скрытым элемент #filedrag.

Изменение стилей при переносе
Мало кто испытал перетаскивание файлов в браузер. На самом деле, многие опытные интернет пользователи считают это невозможным. Поэтому написали внутри элемента “перетащите сюда файлы”. А следующая функция будет добвлять класс к элементу, когда файл уже будет находится непосредственно над элементом, тем самым будут меняться стили.
// Файл над нужной областью
function FileDragHover(e){
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
}

Анализирование перетащенных или выбранных файлов
Будем использовать функцию FileSelectHandler() не зависимо от того обин или несколько файлов были выбранны или перетащенны на элемент #filedrag:
// выбор файла
function FileSelectHandler(e){

        FileDragHover(e);

        // проходимся по объекту FileList 
        var files = e.target.files || e.dataTransfer.files;

        // парсим все объекты типа File
        for (var i = 0, f; f = files[i]; i++){
                ParseFile(f);
        }

}

Функция:

Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл
Проходимся по объекту FileList.
Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile()
function ParseFile(file) {
        Output(
                "<p>File information: <strong>" + file.name +
                "</strong> type: <strong>" + file.type +
                "</strong> size: <strong>" + file.size +
                "</strong> bytes</p>"
        );
}

Функция выводит информация используя три основные свойства представленные объектом File только для чтения.

.name: имя файла (не включая путь к файлу)
.type: MIME тип, например: image/jpeg, text/plain, и т.д.
.size: размер файла в байтах

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

Структурированные теги HTML5

В HTML5 добавили несколько интересных и полезных тегов для структурирования вашей разметки. Многие из этих тегов заменят типичные элементы div которые мы часто используем. Начнем перечисление тегов:

<section></section>

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

Используется для указания заголовка для section (разделов), также для группировки заголовков, но может также содержать дополнительную информацию о разделе.
<footer></footer>

footer обычно содержит информацию о разделе, ссылки на похожие документы, копирайты и т.д.
<nav></nav>

Определяет область навигации, как правило список ссылок. nav как правило должен располагаться между section, header и footer
<article></article>

Независимая запись в блоге, журнале и т.д.
<aside></aside>

Указывает вторичную информацию о записи, пояснение что ли.

Использование
Давайте теперь попробуем использовать эти теги для построения обычной страницы блога:
<!DOCTYPE html>
<html>
  <head>
    <title>Стандартный блог</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Стандартный блог</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Архив</a></li>
        <li><a href="#">О блоге</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights<p>
    </footer>
  </body>
</html>

Этот пример достаточно многозначен но хорошо показывает места применения нужных тегов.

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

Как открывать перетащенные файлы с помощью 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 Добавил: Андрей Ковальчук

Предзагрузка изображения или файла в html5

Позволяет сделать предзагрузку какого-либо файла или целой страницы:

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

<!-- вся страница -->
<link rel="prefetch" href="http://kdg.htmlweb.ru/photo/" />

<!-- только картинка -->
<link rel="prefetch" href="http://kdg.htmlweb.ru/photo/s21.jpg" />

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

Предпросмотр картинки перед загрузкой на сервер на javascript

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

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script type="text/javascript">
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', theFile.name, '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

document.getElementById('files').addEventListener('change', handleFileSelect, false);

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

Модальные окна с красивыми эффектами

Сегодня мы хотим поделиться скриптами модальных окон с красивыми эффектами. Различных вариаций очень много, так что каждый сможет найти своё.

Идея в том, что модальное окошко нужно показать при клике на кнопку (элемент страницы); далее последует приятная анимация и собственно появляется окно.

На версиях iOS < 6 мобильной версии Safari, могут быть проблемы с отображением.

Структура модального окна делится на контейнер и контент:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
                <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>
 
...
 
<div class="md-overlay"></div>

Основной контейнер будет отображаться или скрываться (используя класс “md-show”), а внутренний контент будет анимироваться. Оформляем окна следующими селекторами:
.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}
 
.md-show {
    visibility: visible;
}
 
.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}
 
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

Для некоторых эффектов добавим класс html элементам. В особенности для применения 3D эффектов. Заметьте это, что мы применяем всё это к всей странице и контенту:
.md-perspective,
.md-perspective body {
    height: 100%;
    overflow: hidden;
}
 
.md-perspective body  {
    background: #222;
    perspective: 600px;
}
 
.container {
    background: #e74c3c;
    min-height: 100%;
}

Для контроля различных эффектов, создадим специальные классы, ответственные за специфический эффект и анимацию. Пример индивидуального эффекта:
/* Effect 5: newspaper */
.md-show.md-effect-5 ~ .md-overlay {
    background: rgba(0,127,108,0.8);
}
 
.md-effect-5 .md-content {
    transform: scale(0) rotate(720deg);
    opacity: 0;
    transition: all 0.5s;
}
 
.md-show.md-effect-5 .md-content {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

У кнопок воспользуемся атрибутом data-* для того чтобы задать источник контента модального окна:

<button class="md-trigger" data-modal="modal-5">Newspaper</button>

Добавлено: 01 Мая 2018 09:03:26 Добавил: Андрей Ковальчук

Индикатор прогресса HTML5

В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.

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

Начнем.

Основы
Индикатор прогресса добавляется с помощью элемента <progress>. Значение индикатора определяется атрибутами value, min и max:

<progress value="10" max="100"></progress>

Так как базовая реализация использует стандартные формы, то визуальное представление будет зависеть от платформы реализации. Ниже приводится пример того, как выглядит индикатор прогресса в Windows и OSX.

Теперь определим стили для индикатора прогресса, чтобы он выглядел одинаково на любых платформах.

Стили для индикатора прогресса
В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента <progress>. В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.
progress {
    background-color: #f3f3f3;
    border: 0;
    height: 18px;
    border-radius: 9px;
}

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

В Firefox стили влияют на полоску индикатора, а на текущее значение не оказывают воздействия.

В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).

Поэтому потребуется больше действий.

В Chrome и Safari элемент прогресса преобразуется следующим образом.

<progress>
    ? <div> ::-webkit-progress-bar
         ? <div>::-webkit-progress-value

Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:
progress::-webkit-progress-bar {
    /* стили */
}
progress::-webkit-progress-value {
    /* стили */
}

Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:
progress::-moz-progress-bar {
    /* стили */
}

В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.
progress {
    /* стили */
}
progress::-webkit-progress-bar {
    /* стили  */
}
progress::-webkit-progress-value {
    /* стили */
}
progress::-moz-progress-bar {
    /* стили */
}


Анимирование прогресса
Теперь рассмотрим, как анимировать индикатор прогресса. Обычно, полоска расширяется слева направо по мере выполнения задачи.

Идея заключается в том, что индикатор прогресса расширяется от 0 и останавливается в момент достижения максимального значения. Мы также будем выводить числовое значение прогресса. Ниже приводится структура HTML.

<progress id="progressbar" value="0" max="100"></progress>

В данном примере мы используем jQuery для анимации индикатора прогресса. Поэтому добавляем jQuery в документ:
<script src="js/jquery.js" type="text/javascript"></script>

Затем мы добавляем скрипт, который выполняет расширение полоски прогресса. Сначала сохраняем элемент индикатора прогресса, текущее и максимальное значения, а также и частоту кадров:
var progressbar = $('#progressbar'),
    max = progressbar.attr('max'),
    value = progressbar.val(),
    time = (1000/max)*5;

Затем мы создаем переменную, которая хранит функцию анимации. В нашем примере она называется loading.
var loading = function() {
 
}

Внутри выше приведенной функции устанавливаем интервал прогресса. Будем увеличивать данное значение на 1 за один кадр — можно увеличивать значение на большую величину, чтобы ускорить ход индикатора.
value += 1;

А затем мы добавляем результат к полоске прогресса.
addValue = progressbar.val(value); 

Мы также показываем значение рядом с индикатором прогресса:
$('.progress-value').html(value + '%');

Затем мы создаем новую функцию для выполнения анимации:
setInterval(function() {
    loading();
}, time);

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

Сохраним выше приведенную функцию в переменной:
var animate = setInterval(function() {
    loading();
}, time);

В переменной loading добавляем условное выражение:
if (value == max) {
    clearInterval(animate);
}

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

Приведем полный код анимации индикатора прогресса:
$(document).ready(function() {
    var progressbar = $('#progressbar'),
        max = progressbar.attr('max'),
        time = (1000/max)*5,   
        value = progressbar.val();
 
    var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
         
        $('.progress-value').html(value + '%');
 
        if (value == max) {
            clearInterval(animate);                   
        }
    };
 
    var animate = setInterval(function() {
        loading();
    }, time);
};

Поддержка в браузерах
Элемент HTML5 для индикатора прогресса поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.

Добавлено: 28 Апреля 2018 15:44:43 Добавил: Андрей Ковальчук

Создаем модальное окно на HTML5 и CSS3

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

Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.

HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.

Разметка HTML
Первый шаг на пути к созданию модального окна - простая и эффективная разметка:

<a href="#openModal">Открыть модальное окно</a>
 
<div id="openModal" class="modalDialog">
     
</div>

Мы просто создаем ссылку “Открыть модальное окно”, которая указывает на элемент div openModal, который размещен ниже. Внешний вид формируется стилями в классе modalDialog.

Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
<a href="#openModal">Открыть модальное окно</a>
 
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Закрыть" class="close">X</a>
        <h2>Модальное окно</h2>
        <p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
        <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
    </div>
</div>


Стили
Создаем класс modalDialog и начинаем формировать внешний вид:
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}

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

Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index.

В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.

Может быть вы не знаете свойство pointer-events, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”.

Теперь добавляем псевдо класс :target и стили для модального окна.
.modalDialog:target {
    display: block;
    pointer-events: auto;
}
 
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events.

Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

Закрываем окно
Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
 
.close:hover { background: #00d9ff; }

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

Добавлено: 28 Апреля 2018 10:19:21 Добавил: Андрей Ковальчук

Прыгающий мячик на CSS3

В данном уроке представлен пример мощности CSS3. Мы сделаем 3D мяч, который будет выглядеть очень реалистично с помощью свойств CSS3 и добавим немного анимаций для формирования визуального эффекта.

Примечание: демонстрация будет работать в браузерах, которые поддерживают соответствующие свойства CSS3.
Разметка HTML
Начнем с разметки HTML

<div id="ballWrapper">
    <div id="ball"></div>
    <div id="ballShadow"></div>
</div>

У нас есть три простых элемента div. “#ballWrapper” - основной контейнер, который содержит наш мяч. Данный элемент div определяет положение мяча и высоту на экране. Элемент “#ball” формирует разметку для мяча, а “#ballShadow” содержит тень отдельно.

CSS
В текстах кода в уроке не используются префиксы для большей наглядности.

Сначала установим ширину и высоту основного контейнера. Он будет занимать положение по центру экрана:
#ballWrapper {
    width: 140px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -70px;
}

Координаты контейнера имеют значения ’50%’, а для полей используются отрицательные значения равные половине высоты и ширины. Так мяч центрируется на экране.

Теперь определим стили для мяча.
#ball {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
    box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
                inset -2px -1px 40px rgba(0,0,0,0.4),
                0 0 1px #000;
}

Мы устанавливаем для мяча равные ширину и высоту, а для свойства ‘border-radius’ значение ’70px’ (которое является половиной оригинальной высоты и шириной). В итоге получается круглая форма.

Другой интересный момент - фон. Элемент получает линейный фон и 3 разных уровня теней, чтобы сформировать 3D эффект. Первый уровень тени предназначен для формирования темной зоны внизу мяча. Второй уровень формирует рассеянное свечение также внизу мяча. А третий уровень формирует размытую тень позади контура мяча.

Уровни теней

Если взглянуть на мяч, то видна небольшая овальная светлая форма, которая формирует эффект отражения. Вот код, который его формирует:
#ball::after {
    content: "";
    width: 80px;
    height: 40px;
    position: absolute;
    left: 30px;
    top: 10px;
    background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
    border-radius: 40px / 20px;
}

Используется псевдо-элемент CSS ::after, который получает линейный градиент с непрозрачностью. В дополнение устанавливаем скругленные углы рамки ’40px / 20px’ формируя овальную форму.

Теперь установим тень мяча:
#ballShadow {
    width: 60px;
    height: 75px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px;
}

Здесь снова используются свойства для центрирования тени. Но она смещается вниз элемента ‘#ballWrapper’. Также добавляет полупрозрачный фон, тень и скругленная рамка.

Анимация
Теперь сформируем эффект.

Начнем с добавления свойства анимации для всего мяча:
#ball {
    animation: jump 1s infinite;
}

Здесь определяется имя анимации (jump), ее длительность (1 секунда) и количество раз выполнения ( в нашем случае значение ‘infinite’ определяет бесконечное выполнение анимации).

А вот код анимации:
@keyframes jump {
    0% {
        top: 0;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px;
        height: 120px;
        border-radius: 70px / 60px;
    }
    65% {
        top: 120px;
        height: 140px;
        border-radius: 70px;
    }
    95% {
        top: 0;
    }
    100% {
        top: 0;
    }
}

Здесь происходит работа со свойством ‘top’ мяча. Начиная с 0 до 160 и назад до 0. В середине анимации также также изменяется свойство ‘border-radius’ - так формируется "удар" мяча о фон.

А затем определяем анимацию тени:
#ballShadow {
    animation: shrink 1s infinite;
}

Здесь используются те же значения, что и для мяча, только с другой анимацией, которая называется shrink:
@-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
}

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

В завершении добавим эффект для нажатия кнопки мыши. Мяч будет удаляться от нас. Для достижения эффекта используем псевдо-класс ‘:active‘, добавляется трансформация и изменение свойства ‘scale’:
#ballWrapper {
    transform: scale(1);
    transition: all 5s linear 0s;
}
  
#ballWrapper:active {
    transform: scale(0);
}

Трансформация значения свойства ‘scale’ (от 1 до 0)формирует иллюзию удаления мяча от зрителя.

Добавлено: 27 Апреля 2018 17:26:52 Добавил: Андрей Ковальчук

Создание крутого поля для поиска на CSS3

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

Структура
Элемент form используется как контейнер, а 2 остальных элемента как поле для ввода информации и кнопки.

HTML

<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Введите текст">
    <input id="submit" type="submit" value="Search">
</form>

Вы наверное заметили, что мы используем атрибут placeholder, но это сейчас не важно т.к. мы затронем эту тему позже.

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

CSS
#searchbox
{
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
 
        -moz-border-radius: 35px;
        border-radius: 35px;
 
        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 100px auto 50px;
        overflow: hidden; /* Clear floats */
}


Отметьте: когда вы добавляете элементу float: left, то вам не обязательно приписывать display:
block.

#search, #submit
{
        float: left;
}
 
#search
{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;
 
        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 50px 3px 3px 50px;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
 
/* ----------------------- */
 
#submit
{
        background: #6cbb6b;
        background-image: -moz-linear-gradient(#95d788, #6cbb6b);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
 
        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;
 
        border-width: 1px;
        border-style: solid;
        border-color: #7eba7c #578e57 #447d43;
 
         -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;               
 
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
 
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
 
#submit:hover
{
        background: #95d788;
        background-image: -moz-linear-gradient(#6cbb6b, #95d788);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}      
 
#submit:active
{
        background: #95d788;
        outline: none;
 
         -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
 
#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}


HTML5 атрибут placeholder
Атрибут placeholder предназначен для отображения текста в поле для текста до тех пор, пока на него не нажали. После клика, текст исчезнет, и пользователь может набирать то, что он хочет. Теперь для этих целей нам не нужен JavaScript!

Браузеры, которые поддерживают данный атрибут:

Firefox 3.7+
Safari 4.0+
Chrome 4.0+
Opera 11+

Для тех браузеров, которые поддерживают данную фичу, напишем следующий CSS код:

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
 
#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}


Поддержка
Для тех браузеров, которые ещё или уже не поддерживают атрибут placeholder, мы создаём специальный CSS и Javascript код, который спасёт ситуацию.

Я использую Modernizr для того, чтобы определить поддерживает ли браузер HTML5 атрибут placeholder или нет. Всё что нам понадобится так это написать небольшой фрагмент кода на JavaScript, а Modernizr уже решит в какой момент его задействовать.

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

$(document).ready(function() {
        if (!Modernizr.input.placeholder)
        {
                var placeholderText = $('#search').attr('placeholder');
 
                $('#search').attr('value',placeholderText);
                $('#search').addClass('placeholder');
 
                $('#search').focus(function() {
                        if( ($('#search').val() == placeholderText) )
                        {
                                $('#search').attr('value','');
                                $('#search').removeClass('placeholder');
                        }
                });
 
                $('#search').blur(function() {
                        if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )
                        {
                                $('#search').addClass('placeholder');
                                $('#search').attr('value',placeholderText);
                        }
                });
        }
});

Вывод
Что касается HTML5 атрибута placeholder, то если браузер его не поддерживает, то Javascript вступит в игру и сделает своё дело.

Добавлено: 26 Апреля 2018 07:12:33 Добавил: Андрей Ковальчук

Выдвигающееся сверху меню с 3D-эффектом

В данном уроке мы создадим анимированное 3D навигационное меню (с иконками) с использованием только CSS3 (без JavaScript). Задействуем мощные эффекты CSS3, такие как перспектива, трансформации, градиенты и переходы. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы.

Разметка HTML
Сначала определим структуру HTML.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>3D меню, сдвигающееся сверху | Матреиалы сайта RUSELLER.COM</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/menu.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="menu_body">
 
        <!-- Элемент основного меню -->
        <div class="menu">
            <ul>
                <li><a href="#"><img src="images/1.png" /></a></li>
                <li><a href="#"><img src="images/2.png" /></a></li>
                <li><a href="#"><img src="images/3.png" /></a></li>
                <li><a href="#"><img src="images/4.png" /></a></li>
                <li><a href="#"><img src="images/5.png" /></a></li>
                <li><a href="#"><img src="images/6.png" /></a></li>
                <li><a href="#"><img src="images/7.png" /></a></li>
            </ul>
        </div>
        <div class="page_content">
            <div class="shade"></div>
 
            <div class="box">
                <div class="header">Заголовок</div>
                <div class="body">
            ...
        </div>
                <div class="footer">Нижний колонтитул</div>
            </div>
 
            <div class="box">
                <div class="header">Заголовок</div>
                <div class="body">
            ...
        </div>
                <div class="footer">Нижний колонтитул</div>
            </div>
 
        </div>
    </body>
</html>

В теле документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.

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

CSS
Меню работает почти во всех современных браузерах (кроме IE). Лучший результат получается в Firefox и Chrome.

Сначала определим правила для элемента body:

.menu_body {
    /* Перспектива */
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    -o-perspective: 1500px;
    perspective: 1500px;
}

Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:

.menu, .page_content {
    /* Схема вывода, трансформация и переход */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
 
    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}
 
/* Элемент основного меню (которое появляется сверху) */
.menu {
    background-color: #002edb;
    display: block;
    position: fixed;
    width: 100%;
    height: 148px;
    z-index: 1;
 
    /* Трансформация */
    -webkit-transform: rotateX(-45deg) translateY(-95%);
    -moz-transform: rotateX(-45deg) translateY(-95%);
    -ms-transform: rotateX(-45deg) translateY(-95%);
    -o-transform: rotateX(-45deg) translateY(-95%);
    transform: rotateX(-45deg) translateY(-95%);
}
 
/* Изменяем цвет фона и вращаем элемент основного меню при наведении курсора мыши */
.menu:hover {
    background-color: #4169ff;
 
    /* CSS3 transform */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
 
/* Остальное содержание страницы */
.page_content {
    padding: 20px 0 0;
}

Обратите внимание, что мы используем свойства rotateX и translateY для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:

/* Основное меню - свойства UL-LI */
.menu ul {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1036px;
}
.menu ul li {
    float: left;
    list-style: none outside none;
    margin: 10px;
 
    /* Переход */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu ul li:hover {
    background-color: #7e00d6;
 
    /* Скругление углов */
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
}

Используем переход для наших изображений - будет меняться цвет и радиус. Когда курсор мыши находится в меню, страница будет становиться немного темнее (будем использовать затеняющий элемент с градиентом):

/* Затеняющий элемент страницы (невидим по умолчанию) */
.page_content .shade {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
 
    /* Линейный градиент */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
 
    /* Трансформация */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

В завершение нужно вывести затеняющий элемент и повернуть page_content при наведении курсора мыши на меню:

/* Когда курсор мыши находится над меню, поворачиваем page_content вниз */
.menu:hover ~ .page_content {
    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(80px);
    -moz-transform: rotateX(-45deg) translateY(80px);
    -ms-transform: rotateX(-45deg) translateY(80px);
    -o-transform: rotateX(-45deg) translateY(80px);
    transform: rotateX(-45deg) translateY(80px);
}
 
/* Когда курсор мыши находится над меню, выводим тень */
.menu:hover ~ .page_content .shade {
    opacity: 1;
    visibility: visible;
}

Добавлено: 26 Апреля 2018 07:05:49 Добавил: Андрей Ковальчук

Сортировка альбома с помощью HTML5

Все современные браузеры имеют поддержку функций "перетащи и брось". Значит мы можем использовать их в своих проектах и код будет достаточно простым. А в качестве практической реализации сделаем фотоальбом с возможностью раскладки фотографий по разным разделам.Такая функция достаточно часто используется на различных сайтах с набором изображений.

Разметка HTML

<div class="albums">
     <div class="album" id="drop_1" droppable="true"><h2>Альбом 1</h2></div>
     <div class="album" id="drop_2" droppable="true"><h2>Альбом 2</h2></div>
     <div class="album" id="drop_3" droppable="true"><h2>Альбом 3</h2></div>
 </div>
 <div style="clear:both"></div>
 <div class="gallery">
     <a id="1" draggable="true"><img src="images/1.jpg"></a>
     <a id="2" draggable="true"><img src="images/2.jpg"></a>
     <a id="3" draggable="true"><img src="images/3.jpg"></a>
     <a id="4" draggable="true"><img src="images/4.jpg"></a>
     <a id="5" draggable="true"><img src="images/5.jpg"></a>
     <a id="6" draggable="true"><img src="images/6.jpg"></a>
     <a id="7" draggable="true"><img src="images/7.jpg"></a>
     <a id="8" draggable="true"><img src="images/8.jpg"></a>
     <a id="9" draggable="true"><img src="images/9.jpg"></a>
     <a id="10" draggable="true"><img src="images/10.jpg"></a>
     <a id="11" draggable="true"><img src="images/11.jpg"></a>
     <a id="12" draggable="true"><img src="images/12.jpg"></a>
 </div>

Здесь определяются три объекта (виртуальные альбомы) и 12 изображений. Альбомы для сброса изображений имеют атрибут ‘droppable’ и перетаскиваемые объекты - атрибут ‘draggable’.

CSS
/* Стили фотогалереи */
.gallery {
    margin: 50px auto 0;
    width: 840px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    margin: 10px;
    opacity: 1;
    position: relative;
    width: 180px;
 
    -khtml-user-drag: element;
 
    /* Предотвращаем выделение */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
 
    /* Правила переходов */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
 
    /* Свойства рамки */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Правила переходов */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
 
    /* Тени*/
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
 
/* Вращение */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.gallery a:hover img {
    z-index: 5;
 
    /* Правила переходов */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
 
    /* Правила трансформации */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a.hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 0;
}
.albums {
    margin: 40px auto 0;
    overflow: hidden;
    width: 840px;
}
.album {
    border: 3px dashed #ccc;
    float: left;
    margin: 10px;
    min-height: 100px;
    padding: 10px;
    width: 220px;
 
    /* Правила переходов */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}
.album a {
    display: inline-block;
    height: 56px;
    margin: 15px;
    opacity: 1;
    position: relative;
    width: 75px;
 
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /* Предотвращаем выделение */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
 
    /* Правила переходов */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.album a img {
    border: 4px solid #fff;
    border-bottom: 10px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
 
    /* Свойства рамки */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Правила переходов */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
 
    /* Тени */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}


JavaScript
Код достаточно простой. Сначала скрипт выбирает все перетаскиваемые объекты и элементы для сброса изображений. Событие ‘dragstart’ привязывается ко всем перетаскиваемым объектам. А ко всем объектам для сброса изображений привязываются события ‘dragover’, ‘dragleave’ и ‘drop’. Для первых двух событий скрипт выполняет небольшие настройки CSS для активной области сброса. Когда объект сбрасывается в области, скрипт делает его копию и размещает ее в области, и исходный объект удаляется, а затем обновляются обработчики событий (для новых объектов).

// Добавляем обработчики событий
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();
 
// Внутренние переменные
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
 
// preventDefault (останавливаем браузер при перенаправлении на текст)
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}
 
// Обновляем обработчики событий
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}
 
// Обработчик события dragover
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();
 
    // Небольшая настройка
    this.style.borderColor = "#000";
    return false;
});
 
// Обработчик события dragleave
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();
 
    // Небольшая настройка
    this.style.borderColor = "#ccc";
    return false;
});
 
// Обработчик события dragenter
addEvent(dropAreas, 'dragenter', cancel);
 
// Обработчик события drop
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();
 
    // Получаем сбрасываемый объект
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
 
    // Получаем источник изображения
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';
 
    var oldThis = this;
 
    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // Удаляем объект из DOM
 
        // Добавялем похожий объект в другое место
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';
 
        // и обновляем обработчики событий
        updateDataTransfer();
 
        // Небольшая настройка
        oldThis.style.borderColor = "#ccc";
    }, 500);
 
    return false;
});

Добавлено: 23 Апреля 2018 20:26:23 Добавил: Андрей Ковальчук

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML

<details>
<summary>W Group Site Navigation</summary>
<a href=#>Aeronautics</a>
<a href=#>Pharma</a>
<a href=#>Railways</a>
<a href=#>Shipping</a>
</details>

Добавляем стили
Применяем стили к элементам summary и details. Для более общего представления для разных браузером начнём с следующих стилей:

summary, details { display: block; }
details { visibility: hidden; }
details > summary { visibility:  visible; }
summary.no-det:before { content: "?"; padding-right: 5px; font-size: 1.2em; }
details[open] summary.no-det:before { content:"?"; }
details[open] { visibility: visible; }

Добавляем стили при доступности элементов
Следующий код написан на jQuery и обычно распологается у закрывающего тега body. Для начала, мы проверяем доступность атрибута open элемента details. Если тест провалится, то к элементу будет прикреплён класс no-det. При клике по элементу summery, будет добавляться атрибут open:

<script>
function supports_details() {
    if (!('open' in document.createElement('details'))) {
return "no-details"; }
}
 
if (supports_details() == "no-details" ) {
    $("details").addClass("no-det");
}
$('details.no-det summary').click(function() {
$details = $(this).parent();
    if ($details.attr('open')) {
    $details.removeAttr('open');
    } else {
    $details.attr('open', 'open');
    }
});
</script>

Добавлено: 23 Апреля 2018 16:54:17 Добавил: Андрей Ковальчук

Как использовать атрибут download

HTML5 очень сильно отличается от предыдущих версий: в нём появилось множество новых элементов и атрибутов. Сегодня мы поговорим об атрибуте download.

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

Использование атрибута download
Поскольку для нужного нам эффекта не нужно писать никаких скриптов, просто добавляем к элементу ещё один атрибут:

<a href="myFolder/myImage.png" download>Download image</a>

Что действительно круто, так это то, что мы можем задать имя скачиваемому файлу. Это очень удобно, особенно если это нужно делать динамически. Для этого просто в атрибут download нужно прописать какое-то значение:

<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

Кстати говоря, в названии нам не обязательно указывать формат файла, он выставится автоматом.

Поддержка браузеров
К сожалению, пока что данный атрибут работает только в Chrome 14+ и Firefox 20+, так что нам всё-таки нужно предусмотреть и это. К примеру, таким образом:

var a = document.createElement('a');
 
if(typeof a.download != "undefined")
{
   // атрибут поддерживается браузером
}
else
{
  // атрибут не поддерживается браузером
}

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

Добавлено: 23 Апреля 2018 16:52:43 Добавил: Андрей Ковальчук