Как встроить код HTML и CSS во фрейм

Вы когда-нибудь пользовались сервисом, подобным JSBin? На нем можно написать код HTML, CSS и JavaScript, и тут же увидеть результат своих действий на специальной панели. В данном уроке мы сделаем страницу с элементом iframe, которая будет выполнять почти такие же действия (за исключением реализации JavaScript кода).

Шаг 1. Создаем структуру HTML разметки
Разметка будет состоять из двух частей. Первая часть содержит форму с двумя полями, в которые будет вводиться непосредственно текст кода HTML и CSS. Во второй части содержится фрейм, в котором будет выводиться результат. Для частей используются собственные классы для визуального оформления и общий класс grid для формирования структуры страницы.

<!doctype html>
<html>
<head>
<title></title>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<div class="container grid">
    <form>
        <h2>HTML</h2>
        <textarea id="html"></textarea>
 
        <h2>CSS</h2>
        <textarea id="css"></textarea>
    </form>
</div>
 
<div class="output grid">
    <iframe></iframe>
</div>
 
</body>
</html>

Шаг 2. Задаем стили CSS для наших элементов
Выполняем простой сброс свойств CSS:
* {
  margin: 0;
  padding: 0; }

Задаем определенный шрифт, который будет использоваться на странице. Также выравниваем части страницы. Они будут располагаться рядом друг с другом. Для формирования лучшего внешнего вида установим отступы, а чтобы отступы не увеличивали ширину элементов воспользуемся режимом вывода элементов, устанавливаемым значением border-box:
body {
  font-family: sans-serif; }
 
.grid {
  width: 50%;
  float: left;
  padding: 30px 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

Снимем вывод рамки для фрейма, растянем его на всю доступную ширину. Для элементов ввода текста наоборот установим рамки, а также добавим поля для лучшего визуального восприятия. С помощью рамки добавим разделитель между контейнерами формы и фрейма.
.container {
  background: #e3e3e3;
  border-right: 1px solid white; }
 
.output {
  border-left: 1px solid #e3e3e3; }
 
textarea {
  width: 100%;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 50px; }
 
iframe {
  border: none;
  width: 100%; }

Шаг 3. Добавляем функционал
С помощью jQuery очень просто реализовать функционал, который нам требуется. Организуем функцию, чтобы выполнять все операции в локальном контексте. определяем три локальных переменных. В первой хранится контекст фрейма, вторая предназначена для организации места вставка HTML кода, а третья - для CSS кода, который будет вставляться в разделе head страницы, выводимой во фрейме. А затем создаем обработчик события нажатия клавиши в области ввода текста. Так как их у нас две, то нужно производить определение, куда вводится текст, и добавлять введенный текст в соответствующий раздел страницы, выводимой во фрейме.
(function() {
 
    var contents = $('iframe').contents(),
        body = contents.find('body'),
        styleTag = $('<style></style>').appendTo(contents.find('head'));
 
    $('textarea').keyup(function() {
        var $this = $(this);
        if ( $this.attr('id') === 'html') {
            body.html( $this.val() );
        } else {
            // Наверно, вводится CSS код
            styleTag.text( $this.val() );
         
    });
 
})();

Кроме того, нужно добавить код, который будет выравнивать по высоте две части нашей страницы, чтобы она выглядела достойно.
$('.grid').height( $(window).height() );

Примечание: обязательно включите код jQuery в страницу, чтобы функционал действовал.

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

Проверка доступности имени пользователя на PHP и jQuery

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

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

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

Итак, давайте создадим таблицу, где будет храниться информация о пользователях:

CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`username` varchar(150) NOT NULL,
`email` varchar(100) NOT NULL,
`pass` varchar(100)  NOT NULL,
PRIMARY KEY (`id`)
)

В принципе тут всё довольно просто. Теперь создадим небольшую форму:
<form action="do_check.php" method="post">
    <input id="username_box" class="search_box" name="username" type="text" />
    <input id="sub" type="submit" value="Check" />
</form>

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

Добавим немного магии:
$(function() {
$("#sub").click(function() {
    // получаем то, что ввёл пользователь
    var checkString    = $("#username_box").val();
    // формируем строку запроса
    var data            = 'user='+ checkString;
 
    // если checkString не пуста
    if(checkString) {
        // делаем ajax запрос
        $.ajax({
            type: "POST",
            url: "do_check.php",
            data: data,
            beforeSend: function(html) { // перед отправкой
                $("#results").html('');
            },
            success: function(html){ // получаем результаты
                $("#results").show();
                $("#results").append(html);
            }
        });
}
return false;
});
});

Код jQuery отправляет AJAX запрос в файл PHP с именем do_check.php, который проверяет наличие пользователя и возвращает результат. Примерно вот так:
//если к нам идёт $_POST запрос
if (isset($_POST['user'])) {
    // подключаемся к базе
    include('db.php');
    $db = new db();
    // Никогда не доверяйте тому, что пишут ваши пользователи
    $username = mysql_real_escape_string($_POST['user']);
    // создаём строку запроса
    $sql = "SELECT count(*) as num FROM users WHERE username = '" . $username."'";
    // получаем результаты
    $row = $db->select_single($sql);
    if($row['num'] == 0) {
        echo 'Пользователя с логином <em>'.$username.'</em> нет!';
    } else {
        echo 'Пользователь с логином <em>'.$username.'</em> уже есть!';
    }
}

В данном фрагменте мы делаем запрос в БД и считаем количество строк, которые получим как результат. Если строк нет, то имя пользователя доступно для регистрации.

Вот и всё.

Добавлено: 01 Мая 2018 14:10:58 Добавил: Андрей Ковальчук

Эффект при прокрутке содержания

В данном уроке мы создадим эффект прокрутки содержания, который используется на новом сайте e-bay. Для примера построим одну адаптивную страницу для представления красоты и пользы лаванды (описания растения на английском языке). JavaScript не задействован - только CSS.

Шаг 1 – Подготовка
Нам нужно 3 фоновых изображения, которые будут растягиваться на всю страницу. Исходный размер - 1800px x 1200px.

Шаг 2 – HTML
Разметка чрезвычайно проста. Каждая часть содержания помещается в элемент div с классом “wrapper”.

<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Демострация</title>
...
</head>
<body>
<header class=" content">
    <div class="wrapper">
        <h1>From love for lavender</h1>
        <p><span>Lavender</span> (botanic name Lavandula) is a ....
        </p>
    </div>
</header>
 
<section class="content" id="oil">
    <div class="wrapper">
        <p><span>Lavender oil</span> is an ... </p>
    </div>
</section>
...
<footer>
    <div class=wrapper>
         "From love for lavender" has been built ...
    </div>
</footer>
</body>
</html>

Шаг 3 - Основной код CSS
Класс контейнера определяется следующим образом. Свойство box-sizing позволяет изменить модель определения размеров элемента для CSS. По умолчанию используется content-box, в которой высота и ширина включает только содержание. Если установить модель border-box ,то высота и ширина будут также включать отступы и рамку.
.wrapper {
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

Так как мы планируем сделать страницу адаптивной, то каждая секция и заголовок будут использовать единицы измерения в процентах. Например, фоновое изображение для первой секции имеет ширину 500px, которая представляет 500px/1200px x 100% = 41.66667%
#oil .wrapper {
  background: url(../images/lavender2.jpg) 4.16667% center no-repeat;
  padding: 10% 4.16667% 10% 50%;
  background-size: 41.66667% auto;}

Значение 4.16667% соответствует 50px, когда контейнер имеет максимальную ширину. Случаи использования больших мониторов будем обрабатывать с помощью медиа запросов:
@media only screen and (min-width: 1200px) {
.wrapper {
    width:1200px; }
........
#oil .wrapper {
    padding: 120px 50px 120px 600px; }

Полный набор стилей вы найдете в исходниках.

Шаг 4 - Эффект прокручивания
Для нашего эффекта не используется JavaScript. Все реализуется на CSS. Так как избыточная разметка является нежелательным фактором, то будем применять псевдо-элементы :after. Они будут располагаться под каждой секцией и содержать фоновое изображение. Для фиксации воспользуемся свойством background-attachment. Также добавим легкую внутреннюю тень для имитации глубины.
section:after, header:after {
  content: "";
  display: block;
  height: 400px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }

Для каждой секции назначаем свое фоновое изображение:
header:after {
  background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
  background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
  background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
  background-image: url(../images/lavenderbg4.jpg); }

Шаг 5 - Завершающие штрихи
Так как свойство background-attachment:fixed не поддерживается в мобильной версии Safari, добавляем следующий медиа запрос.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    section:after, header:after {
      background-attachment: scroll; }
}

Также уменьшим шрифт для маленьких мониторов:
@media only screen and (max-width: 600px) {
  body {
    font-size: .75em; }
}

Добавлено: 01 Мая 2018 13:59:53 Добавил: Андрей Ковальчук

Создание анимационного меню на jQuery

Сегодня мы будем строить меню с анимационным эффектом. Тут нам конечно же не обойтись без старого доброго jQuery.

HTML структура

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>
 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
 
<body>
 
<div id="container">
 <ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>
 
</body>
</html>

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

Теперь добавим CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
 margin: 0; padding: 0; border: 0;
}
 
body {
 background: #f5f0e0 url(images/noise.png);
}
 
#container {
 height: 800px;
 background: url(images/bg.jpg) center top no-repeat;
}
 
ul#nav {
 width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
 ul#nav li {
  float: left; list-style: none;
 }
  ul#nav li a {
   display: block; width: 97px; height: 77px;
   padding: 72px 0 0 0; margin: 0 32px 0 32px;
   font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
   color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;
 
   background: url(images/label.png) 0 -149px no-repeat;
  }
   ul#nav li a:hover {
    background: url(images/label.png) 0 0 no-repeat;
    color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
   }
 
   ul#nav li a.js:hover {
    background: url(images/label.png) 0 -149px no-repeat;
   }

Далее, CSS немного оживит наш дизайн. В самом начале CSS файла у нас идёт небольшой сброс настроек для того, чтобы во всех браузерах были одни и те же исходные значения. Далее мы добавляем фон, который будет реплицировать себя на всю страницу. Затем нашему меню ul выставим margin: auto; и text-align: center; а так же overflow: hidden;.

Далее применяем свойство float каждому элементу li и выставляем ему значение left, для того, чтобы элементы меню следовали друг за другом. Всё остальное оформление относится непосредственно к ссылкам. Размер каждой ссылки должен в точности соответствовать размерам соответствующего изображения. Далее мы применяем ещё несколько стилей и добавляем свойство CSS3 text-shadow для создания тени. И наконец, мы добавляем сам график в качестве фона и выставляем ему позицию -149px для того, чтобы он не был виден до тех пор, пока курсор мыши не появится над кнопкой.

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

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

Ну а теперь немного jQuery
Для того чтобы добавить эффект Javascript нам необходимо ещё раз обратиться к нашему HTML файлу и присоединить несколько JS. Нам понадобятся три файла: сама библиотека jQuery, специальный плагин для анимационной смены изображения и чистый scripts.js, где мы напишем следующий код.
$(document).ready(function() {
 $("ul#nav li a").addClass("js");
 $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);
 
      }
    );
});

Первое что мы делаем при помощи jQuery это сбиваем основные CSS настройки. Добавляем специальный класс ‘.js’ при помощи Javascript, что позволит нам манипулировать свойствами CSS. Благодаря всему этому мы можем добиться прикольного анимационного эффекта. Далее мы контролируем наведение мыши на ссылку. При наведении используем метод .animate() для смены позиции фона backgroundPosition на 0 0. Скорость у нас равна 200. Мне кажется, что это самое то! Далее мы применяем метод .stop(true,true) который предотвращает повторение анимации.

Все! Теперь вы можете просмотреть полученный эффект в браузере. Может быть, тут и можно что-то ещё добавить для эффекта (но я не стал).

Вот и всё.

Добавлено: 01 Мая 2018 12:14:54 Добавил: Андрей Ковальчук

Коллекция эффектов переходов для страниц

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

CSS анимация разделена на секции, в зависимости от эффекта.

Примерная структура страницы:

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1">
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
    </div>
    <div class="pt-page pt-page-2"><!-- ... --></div>
    <!-- ... -->
</div>

Размер контейнера рассчитан на 1200px. Для анимаций, нужно вставить следующие стили:
.pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    transform-style: preserve-3d;
}
 
.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
 
.pt-page-current,
.no-js .pt-page {
    visibility: visible;
}
 
.no-js body {
    overflow: auto;
}
 
.pt-page-ontop {
    z-index: 999;
}

Класс .pt-page-ontop используется для перехода между страницами, так чтобы одна страница оставалась поверх других.

Пример анимации:
/* scale and fade */
 
.pt-page-scaleDown {
    animation: scaleDown .7s ease both;
}
 
.pt-page-scaleUp {
    animation: scaleUp .7s ease both;
}
 
.pt-page-scaleUpDown {
    animation: scaleUpDown .5s ease both;
}
 
.pt-page-scaleDownUp {
    animation: scaleDownUp .5s ease both;
}
 
.pt-page-scaleDownCenter {
    animation: scaleDownCenter .4s ease-in both;
}
 
.pt-page-scaleUpCenter {
    animation: scaleUpCenter .4s ease-out both;
}
 
/************ keyframes ************/
 
/* scale and fade */
 
@keyframes scaleDown {
    to { opacity: 0; transform: scale(.8); }
}
 
@keyframes scaleUp {
    from { opacity: 0; transform: scale(.8); }
}
 
@keyframes scaleUpDown {
    from { opacity: 0; transform: scale(1.2); }
}
 
@keyframes scaleDownUp {
    to { opacity: 0; transform: scale(1.2); }
}
 
@keyframes scaleDownCenter {
    to { opacity: 0; transform: scale(.7); }
}
 
@keyframes scaleUpCenter {
    from { opacity: 0; transform: scale(.7); }
}

Для примера, применяем анимацию для текущих элементов страницы. К примеру:
//...
 
case 17:
    outClass = 'pt-page-scaleDown';
    inClass = 'pt-page-moveFromRight pt-page-ontop';
    break;
case 18:
    outClass = 'pt-page-scaleDown';
    inClass = 'pt-page-moveFromLeft pt-page-ontop';
    break;
case 19:
    outClass = 'pt-page-scaleDown';
    inClass = 'pt-page-moveFromBottom pt-page-ontop';
    break;
 
// ...

Взгляните на демо для большего эффекта. Надеюсь данная коллекция вам пригодится!

Добавлено: 01 Мая 2018 12:04:19 Добавил: Андрей Ковальчук

Изменение задержки появления подсказок при наведении курсора

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

Воспроизведем такой эффект с помощью задержек переходов CSS и небольшим кодом jQuery для изменения состояний.

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

Для мобильных устройств не будет события hover.

Атрибут title?
Одним из способов решения такой задачи используется атрибут title.

<a href="#" class="function button" title="три">Ссылка</a>

Вполне приличный способ.Будет выводиться стандартная подсказка:

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

Прелестно. Но... нет никакого контроля над дизайном и функционалом. Кроме того, в настоящий момент не допускается генерированное содержание.

Ручная работа
Подготовим другое решение для нашей задачи. Разместим команду прямо в разметке:
<nav>
  <a href="#">
    Вырезать
     <span class="command">
        <span class="screen-reader-text">Клавиатурная комбинация:</span>
        <span class="mod"> X</span>
     </span>
 </a>
 . . .
</nav>

Такое решение позволяет:

Ничего не показывать для кнопок на мобильных устройствах
На компьютерах будет выводиться подсказка при наведении курсора мыши на кнопку
Читалки с экрана смогут объявлять о клавиатурных командах
Использовать правильный модификатор для клавиш (PC, Mac) без изменения разметки
Сохранять разумную семантику кода

Задержка перехода
Теперь у нас есть разметка для работы. Всплывающую подсказку можно сделать такой, как нужно.
.button {
 
  /* Стили кнопки */
 
  position: relative;
}
.command {
   
  /* Стили подсказки */
 
  position: absolute;
  opacity: 0; /* Не выводим по умолчанию */
}


Мы установим задержку в одну секунду при наведении курсора мыши на ссылку (исключить навязчивые появления) и немедленное скрытие при потере фокуса ввода.
.command {
   transition: opacity 0.2s 0 ease;  /* Курсор мыши покинул кнопку: выключение немедленно */
}
.button:hover .command {
   transition: opacity 0.2s 1s ease; /* Курсор мыши зашел на кнопку: появление с задержкой */
}

Код приведен без префиксов браузеров.

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

С помощью jQuery мы используем классы для элементов навигации в зависимости от ситуации. При первом заходе в область навигации будет задержка на одну секунду, а затем применяется класс "immediate". А при потере фокуса ввода мы будем удалять данный класс.
$("nav").hover(function() {
   
  /* Курсор мыши зашел в область навигации */
  var nav = $(this);
  setTimeout(function() {
    nav.addClass("immediate");
  }, 1000);
   
}, function() {
   
  /* Потеря фокуса ввода */
  $(this).removeClass("immediate");
   
});
nav.immediate .command {
  transition-delay: 0s !important;
}

Нужно подправить функционал с помощью добавления/удаления класса "out". Если пользователь подержит курсор мыши пол-секунды и уведёт его прочь, то таймер все-равно подключит класс "immediate". Но класс "out" исправит ситуацию. Вот полный код JavaScript:
$("nav").hover(function() {
   
  /* Курсор мыши зашел в область навигации */
  var nav = $(this).removeClass("out");
  setTimeout(function() {
    nav.addClass("immediate");
  }, 1000);
   
}, function() {
   
  /* Потеря фокуса ввода */
  $(this)
    .addClass("out")
    .removeClass("immediate");
   
});

С классом "out" восстанавливается задержка:
nav.out .command {
  transition-delay: 1s !important;
}

Добавлено: 01 Мая 2018 11:59:47 Добавил: Андрей Ковальчук

Вкладки с помощью jQuery

Этот урок расскажем и покажет нам как сделать вкладки, которые меняются при наведении мышки.

Подобные элементы особены полезны при демонстрации какого-либо продукта или сервиса на странице.

С самого начала документа подключаем фреймворк и функцию::

<script src="jquery.tools.min.js"></script>
      <script>
      $(function() {
   
$("#products").tabs("div.description", {event:'mouseover'});
      });
</script>

Далее подключаем стили оформления.
<link rel="stylesheet" type="text/css" href="tabs-mouseover.css"/>

HTML код должен выглядеть так:
<!-- tabs -->
      <div id="products">
  <img src="free.png" alt="Free version" />
  <img src="commercial.png" alt="Commercial version" />
  <img src="multidomain.png" alt="Multidomain version" />
  </div>
 <!-- panes -->
      <div class="description" id="free">
  <div class="arrow"></div>
  
  <h3>Lorem ipsum dolor</h3>
  <p>
      Consectetur adipiscing elit. Curabitur tempus, massa at facilisis aliquet, urna metus interdum felis, sit amet adipiscing justo neque eget risus. 
  </p>
  <p>

  <strong>Nullam ut ligula id dolor dapibus aliquam.</strong>
  </p>
  </div>
 <div class="description" id="commercial">
  <div class="arrow"></div>
  <h3>Maecenas molestie</h3>
  <p>
      Lacus ut blandit malesuada, sem magna varius enim, eu mattis elit justo in quam. Curabitur in magna. Nam luctus aliquet ante. Nam ut nunc. Quisque ligula nunc, molestie non, gravida sit amet, consequat eu, lectus. Proin aliquet nulla eget massa. Vestibulum ac dolor a tortor porta commodo.
  </p>
  </div>
  <div class="description" id="multidomain">
  <div class="arrow"></div>
  <h3>In hac habitasse platea dictumst</h3>
  <p>
      Quisque mattis gravida est. Vestibulum orci nisl, egestas vel, pharetra quis, auctor nec, lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales massa quis nunc. Sed velit risus, feugiat ut, pharetra a, venenatis et, arcu.
  </p>
  </div>

Очень хорошее решение! До следующих уроков!!!

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

Вертикальный jQuery слайдер

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

HTML

<div id="wrapper-content">
		<div class="row-54">
		
		</div>
		<div id="side-nav" class="mobile-remove">
		
			<div class="row-24 section-1 nav">
				<a id="section-1" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-2 nav remove-right-border">
				<a id="section-2" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-3 nav remove-right-border">
				<a id="section-3" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-4 nav remove-right-border">
				<a id="section-4" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-5 nav remove-right-border">
				<a id="section-5" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-6 nav remove-right-border">
				<a id="section-6" class="section"><span>BUTTON</span></a>
			</div>
			<div class="row-24 section-7">
			<span class="smaller-9">Просто информационная строка.</span>
			</div>
			
		</div>
		<div id="main-container">
		
			<div class="overlay">Выберите урок в меню слева!</div>
		<div id="main-container-background">
			
			
			<div class="row-273 s1 mobile-public">
				<noscript style="color:#000">     Ваш браузер не поддерживает JavaScript!</noscript>
								
				
			</div>
			
			<div class="row-273 s2 mobile-public">
				
				IMAGE
			</div>
			
			<div class="row-273 s3 mobile-public">
				
				IMAGE
			</div>
			
			<div class="row-273 s4 mobile-public">
				
				IMAGE
			</div>
			
			<div class="row-273 s5 mobile-public">
				
				IMAGE
			</div>
			
			<div class="row-273 s6 mobile-public">
				
				IMAGE
			</div>
		</div>	
		</div>
	</div>

JavaScript
В HTML нужно вставить функцию перед телом документа:

<script type="text/javascript">
$(document).ready(function() {
			  $("#side-nav a").vertSlider(
								{
								text : new Array("ruseller.com: Главная",
								"Визуальный редактор",
								"Триггеры MySQL",
								"Использование PDO",
								"Особенности jQuery",  
								"Текст урока"),
								
								color : new Array("#ff0d4c",
								"#0d13ff",
								"#0dff18",
								"#fff10d",
								"#000",  
								"#ff0deb"),
								
								button : new Array("Главная",
								"Урок №1",
								"Урок №2",
								"Урок №3",
								"Урок №4",   
								"Урок №5"),
								
								image : new Array("images/009_article_screenshot.png",
									"images/010_article_screenshot.png",
									"images/011_article_screenshot.png",
									"images/012_article_screenshot.png",
									"images/013_article_screenshot.png",
									"images/014_article_screenshot.png"),
								
								title : new Array("Переход на главную страницу сайта ruseler.com",
									"Переход к видеоуроку про визуальный редактор",
									"Переход к уроку про триггеры MySQL",
									"Переход к уроку про использование PDO для доступа к базам данных",
									"Перехеод к описанию особенностей jQuery",
									"Переход обратно к тексту урока"),

								link : new Array("http://ruseller.com/index.php",
									"http://ruseller.com/adds.php?rub=12&id=1687",
									"http://ruseller.com/lessons.php?rub=28&id=630",
									"http://ruseller.com/lessons.php?rub=28&id=610",
									"http://ruseller.com/lessons.php?rub=32&id=632",
									"http://ruseller.com/lessons.php?rub=32&id=636")
								});
	  
							});
</script>

jQuery плагин
jQuery.fn.vertSlider = function(options) {

$('#main-container-background a[name]').removeAttr("name");
	$('#main-container').css('overflow', 'hidden');
	$('#side-nav').css('visibility', 'visible');
	

var overlay = {	//Здесь задается текст поумолчанию для строки состояния поверх избражения
				text : new Array(null,
					null,
					null,
					null,
					null,
					null)
			  };

var color = {   //Здесь задается цвет фона по умлочанию для строки состояния поверх изображения
				color : new Array(null,
					null,
					null,
					null,
					null,
					null)
			};

var button = {   //Здесь задается текст кнопок по умолчанию для строки состояния поверх изображения
				button : new Array(null,
					null,
					null,
					null,
					null,
					null)
			};
			
var image = {//Здесь задаются изображения по умолчанию
				image : new Array(null,
					null,
					null,
					null,
					null,
					null)
			
			};

var title = {//Заголовки ссылок по умолчанию
									
				title : new Array(null,
					null,
					null,
					null,
					null,
					null)
			
			};

var link = {//Изображения для ссылок по умолчанию
									
				link : new Array(null,
					null,
					null,
					null,
					null,
					null)
			
			};
	
var options = $.extend(overlay, color, button, image, title, link, options);
    return this.each(function() {
	
	$("a#section-1 span").html(options.button[0]);
	$("a#section-2 span").html(options.button[1]);
	$("a#section-3 span").html(options.button[2]);
	$("a#section-4 span").html(options.button[3]);
	$("a#section-5 span").html(options.button[4]);
	$("a#section-6 span").html(options.button[5]);
	
	
	
	$('.s1').html('<a href="' + options.link[0] + '" title= "' + options.title[0] + '"><img src="' + options.image[0] + '" /></a>');
	$('.s2').html('<a href="' + options.link[1] + '" title= "' + options.title[1] + '"><img src="' + options.image[1] + '" /></a>');
	$('.s3').html('<a href="' + options.link[2] + '" title= "' + options.title[2] + '"><img src="' + options.image[2] + '" /></a>');
	$('.s4').html('<a href="' + options.link[3] + '" title= "' + options.title[3] + '"><img src="' + options.image[3] + '" /></a>');
	$('.s5').html('<a href="' + options.link[4] + '" title= "' + options.title[4] + '"><img src="' + options.image[4] + '" /></a>');
	$('.s6').html('<a href="' + options.link[5] + '" title= "' + options.title[5] + '"><img src="' + options.image[5] + '" /></a>');
	
	   $(this).click(function() {
	   var index = $('#side-nav a').index(this);
	   $(this).parent().removeClass('remove-right-border').css("border-right-color", options.color[index]);
	   
		$(this).parent().siblings().addClass('remove-right-border');
		
		
		
		
		
		
		$("#main-container-background").animate({ top: index * -307 }, 'slow');
	   
	   $(".overlay").hide().css("background-color",  options.color[index]).text(options.text[index]).fadeIn(1500);
	   
								});
								});
};

Добавлено: 01 Мая 2018 11:32:29 Добавил: Андрей Ковальчук

Валидация формы с помощью jQuery

Задача — проверить форму, на заполнение обязательных полей.

Вот наша форма:

<form action="<?php echo $this->self_url(); ?>&action=update-sidebar" method="post" id="add-edit-sidebar">
	<table class="form-table">
		<tbody>
			<tr class="">
				<th scope="row" valign="top">
					<?php _e('Title', 'framework') ?>
					<p class="description required"><?php _e('Required', 'framework') ?></p>
				</th>
				<td>
					<input class="input-text " type="text" name="sidebar-title" id="sidebar-title" value="<?php echo isset($sidebar) ? $sidebar['title'] : ''; ?>">
				</td>
			</tr>
			<tr class="">
				<th scope="row" valign="top">
					Alias
					<p class="description required"><?php _e('Required', 'framework') ?></p>
				</th>
				<td>
					<input class="input-text " type="text" name="sidebar-alias" id="sidebar-alias" <?php echo isset($sidebar) ? 'readonly="readonly"' : ''; ?> value="<?php echo isset($sidebar) ? $sidebar['alias'] : ''; ?>">
				</td>
			</tr>
			<tr class="">
				<th scope="row" valign="top">
					<?php _e('Description', 'framework') ?>
				</th>
				<td>
					<textarea class="input-textarea " name="sidebar-description"><?php echo isset($sidebar) ? $sidebar['description'] : ''; ?></textarea>
				</td>
			</tr>
		</tbody>
	</table>
	<input class="button-primary" id="submit-button" type="button" value="Save Settings">
</form>

И собственно код для валидации:
(function($){

	$('#submit-button').click(function(e){
		var sidebarTitle = $('#sidebar-title').val().trim();
		var sidebarAlias = $('#sidebar-alias').val().trim();
		if(sidebarTitle == ''){
			$('#sidebar-title').css('border-color', 'Red');
		}

		if(sidebarAlias == ''){
			$('#sidebar-alias').css('border-color', 'Red');	
		}

		if(sidebarTitle != '' && sidebarAlias != ''){
			$('#add-edit-sidebar').submit();
		}
	});

})(jQuery);

Добавлено: 01 Мая 2018 11:21:30 Добавил: Андрей Ковальчук

Блок с меняющимися элементами

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

Шаг 1.

Прежде всего подключим нужные скрипты (фреймворк jQuery, скрипт strip.js), а также файл css-стилей. Для этого между тегами <head> пропишем следующий код:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="strip.js"></script>
<link type="text/css" rel="stylesheet" href="strip.css" >

Шаг 2.

Далее пропишем такой скрипт:

<script type="text/javascript">
          var mystrip;
          $(document).ready(function() {
mystrip = new ImageStrip('#stripdiv',100,0);
});
</script>

Шаг 3.

Подготовим изображение высотой 100px и по 100px в ширину для каждого элемента. В данном случае у нас 4 цветовых элемента, поэтому размер изображения равен 400px х 100px.

При желании Вы можете сделать еще больше цветовых вариантов.

Шаг 4.

В нужном месте вставляем блок с меняющимися элементами таким образом:
<div class="strip" id="stripdiv"><img src="shirts.png"></div>
  <select onchange="mystrip.move(this.value)">
<option value="1">Green</option>
<option value="2">Yellow</option>
<option value="3">Blue</option>
<option value="4">Red</option>
</select>
</div>

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

Все готово! Надеюсь, этот урок Вам пригодится!

Добавлено: 01 Мая 2018 11:12:20 Добавил: Андрей Ковальчук

Бесконечный подгружаемый список

Этот простой урок на первый взгляд не несет практической ценности. Однако он покажет технологию, которую уже используют некоторые западные сайты (например Live Image Search). И, возможно, эта технология будет все больше и больше распространятся. Суть ее в том, что Вам не нужно традиционно листать страницы сайта, чтобы посмотреть следующую, а нужно просто промотать страницу вниз, и новое содержание подгрузится автоматически.

Шаг 1.

Подключим фреймворк jQuery и плагин endless-scroll к нашему документу, прописав следующий код между тегами <head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.endless-scroll-1.3.js.txt"></script>

Шаг 2.

Далее пропишем следующий скрипт:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(document).endlessScroll({
fireOnce: false,
fireDelay: false,
insertAfter: "ul li:last",
callback: function(p){
$("ul li:last").after("<li>Added text " + p + "</li>");
}
});
});

</script>

Шаг 3.

В тело документа вставим список такой длины, чтобы вызвать полосу прокрутки в браузере. В нашем случае этот список состоит из 50 элементов.
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>

Здесь Вам нужно вставить
недостающие элементы списка.
<li>Text 48</li>
<li>Text 49</li>
<li>Text 50</li>
</ul>

Готово! Теперь при перемотке страницы вниз автоматически подгружается новые элементы списка.

Добавлено: 01 Мая 2018 11:00:15 Добавил: Андрей Ковальчук

Анимация с помощью animo.js

Сегодня рассмотрим как работать с jQuery плагином animo.js для анимации веб контента.

Прежде всего, нужно отметить, что данный плагин использует более 60 видов анимации, список которых доступен на сайте animate.css.

Так же стоит сказать что данный плагин работает на jQuery. Для использования, вам необходимо подключить и js и css файл.

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">

Настройки
Анимация
$(element).animo({
    // [string]/[array] имена классов элементов,
    animation: "name", // ["name1", "name2", "name3"]
    // [float] время (в секундах) на одну итерацию
    duration: 0.8,
    // [int] количество итераций
    iterate: 1,
    // [string] тип анимации
    timing: "linear",
    // [boolean] убрать элемент со страницы после завершения анимации
    keep: false
} [,function]);

Размытие
$(element).animo("blur", {
    // [int] радиус размытия
    amount: 3,
    // [float] время (в секундах)
    duration: 0.6,
    // [float] время (в секундах) для автоматического фокуса
    focusAfter: 3.5,
} [,function]);
 
// использование по умолчанию
$(element).animo("blur" [,function]);

Поворот
$(element).animo("rotate", {
    // [int] количество градусов
    degrees: 15,
    // [float] время (в секундах)
    duration: 0.6
} [,function]);
 
// использование по умолчанию
$(element).animo("rotate" [,function]);

Фокус
// Убирает эффект размытия
$(element).animo("focus");
Очистка
// Удаляем все эффекты от animo
$(element).animo("cleanse");

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

Альтернативные картинки для отсутствующих изображений

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

Альтернативный контент для изображений

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

Альтернативное изображение

Создайте изображение, подключите фреймворк и добавьте следующий код:

$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'missing.png',
        style:'border:3px solid #999;width:144px;height:144px;'
        });
    });
});

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

Адаптивное анимированное меню на CSS и jQuery

В данном уроке мы сделаем простое навигационное меню с анимационным эффектом при наведении курсора мыши.

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

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

Для решение проблемы воспользуемся функцией jQuery hover, которая будет добавлять и убирать класс CSS.

HTML

<nav id="withjquery">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Портфолио</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">Контакт</a></li>
    </ul>
</nav>


CSS
nav#nojquery li a:hover, .rotate {
    -moz-animation: animrotate 2s;
    -webkit-animation: animrotate 2s;
    background: #222;
}
@-moz-keyframes animrotate {
    100% {background: green;-moz-transform: perspective( 200px ) rotateY( 360deg );}
}
 
@-webkit-keyframes animrotate {
    100% {background: green;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
}

jQuery
$(function() {
    $("#withjquery li a").hover(function() {
        var el = this;
        $(this).addClass('rotate');
        setTimeout(function() {
            $(el).removeClass('rotate');
        }, 2000);
    });
});

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

Автоматическое добавления favicon на исходящие ссылки

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

Кто не знает, что такое favicon, ниже представлена картинка с его демонстрацией:

Для осуществления поставленной задачи нам понадобиться следующий код:

<script type="text/javascript" src="jquery.js"></script>
    <script src="jquery.favicons.js" type="text/javascript"></script> 

Этот код необходимо поместить между тегами <head></head>. Как Вы видите, мы просто подключаем два внешних javascript файла, которые и делают всю работу. Первый файл - это непосредственно сам фреймворк jQuery. Второй - функция, которая делает всю работу.

Все файлы можно скачать тут.

Еще, для того, чтобы результат выглядел более красиво, я добавил стиль, который убирает рамку вокруг favicon:
<style type="text/css">
    a img {
border: none;
}
</style>

Favicon добавляется только на внешние ссылки. На внутренние и на сайты без favicon ничего не добавляется.

Чтобы данная функция работала, ссылки необходимо оформлять как обычно через тег <a>.

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