Самый простой jQuery rollover

Что такое Rollover?

Это когда наводишь на изображение, и на его месте появляется другое. Это элементарнейший трюк с заменой атрибута src у элемента img, и на самом деле написать подобную функцию даже на javascript не составляет особого труда.

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

Потому, я буду искать самый просто способ реализовать это на jQuery/

В интернете в принципе немало материалов на тему, но хочется найти что-нибудь ультрапростое.

Нашел я простой jquery-плагин rollover

Хорош он тем, что очень прост и понятен

Что мы делаем

1 Подключаем jQuery
2 Подключаем плагин
3 инициализируем его всего одной строчкой (!)

<script type="text/javascript">
jQuery('img').rollover(true);
</script>

4 и создаем рядом с заменямым изображением img_src_h.png

На примере:
Есть
<img src="img_src.png" alt="" />

Нужен

ролловер на img_src_h.png

1 создаем img_src_h.png, заливаем в ту же директорию что и исходное

2 Вставляем скрипт выше

Теперь при наведении, src нашего изображения будет меняться.

Просто? Предельно.Есть проще? Ищем =)

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

Изменение состояния текстового поля с помощью jQuery

Иногда необходимо в ходе выполнения JavaScript изменять состояние input-text на disabled и обратно. Вот как это можно сделать:

// в jQuery версии 1.6+
$("input").prop('disabled', true);
$("input").prop('disabled', false);

// в jQuery версии 1.5 и ниже
$("input").attr('disabled','disabled');
$("input").removeAttr('disabled');

// этот вариант работает во всех версиях jQuery
this.disabled = true; // в обработчике события input'a

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

Живой поиск

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

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

<form action="search.php" method="post" name="form" onsubmit="return false;">
  <p>
    Живой поиск:<br> 
    <input name="search" type="text" id="search">
    <small>Вводите на английском языке</small>
  </p>
</form>

Сразу за формой разместим блок, в котором будут отображаться результаты поиска
<div id="resSearch">Начните вводить запрос</div>

Теперь посмотрим основную часть кода. Как ни странно, но она очень простая и представляет всего несколько строк кода:
<script type="text/javascript">
$(function(){
  $("#search").keyup(function(){
     var search = $("#search").val();
     $.ajax({
       type: "POST",
       url: "search.php",
       data: {"search": search},
       cache: false,                                 
       success: function(response){
          $("#resSearch").html(response);
       }
     });
     return false;
   });
});
</script>

Как видите все довольно просто. Мы просто отслеживаем любое изменение содержимого в поле сid=search, получаем это значение и отправляем нашему обработчику search.php, производящий собственно сам поиск. Далее любой результат, который мы получили от обработчика мы просто выводим в блок с id=research.

Теперь поговорим, как устроен обработчик. Как правило, поиск производится по базе данных, но в примере мы будем искать в массиве название стран (в исходниках приведен код для поиска по базе данных). Не забывайте о том, что когда поиск производится по базе данных, то у поля, по которому мы ищем должен быть режим «полный текст».
<?php
header("Content-type: text/html; charset=windows-1251");
$search = $_POST['search'];
$search = addslashes($search);
$search = htmlspecialchars($search);
$search = stripslashes($search);
   if($search == ''){
      exit("Начните вводить запрос");
   }
$db = mysql_connect("localhost","user","password");
mysql_select_db("basa",$db);
mysql_query("SET NAMES cp1251");
                
$query = mysql_query("SELECT * FROM table WHERE MATCH(text) AGAINST('$search')",$db);
if(mysql_num_rows($query) > 0){
   $sql = mysql_fetch_array($query);
   do{
     echo "<div>".$sql['text']."</div>";
   }while($sql = mysql_fetch_array($query));
}else{
   echo "Нет результатов";
}
?>

После поиска в нем формируется результаты поиска уже с готовой html разметкой именно это и возвращаются в качестве ответа и выводятся в блок research.

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

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

Выделение элементов формы

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

Шаг 1.

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

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

Шаг 2.

Затем вставим следующий код скрипта:
<script>
$(document).ready(function()
{
$('.content .left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.content').addClass("over");
}).blur(function(){
$(this).parents('.content').removeClass("over");
});
$('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});
</script>

Шаг 3.

Между тегами head или в отдельном CSS файле напишем следующие стили:
 body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content, .contentA{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}

td{
vertical-align:top;
}
.over{
background-color:#e6e2af;
}
.out{
background-color:none;
}

Здесь очень важен стиль .over. Именно он отвечает за фон выделения формы. Изменяя этот стиль, вы можете сделать нужный вам цвет выделения.

Шаг 4.

Непосредственно сама форма представляет собой следующий код:
<div class="content">
  <div class="row">
  <div class="left">First name</div>
  <div class="right"><input name="Text1" type="text" class="text" /></div>
  <div class="clear"></div>
  </div>
</div>

Если Вы хотите, чтобы элементы формы выделялись по отдельности, то блоку нужно придать класс contentA вместо content.

Добавлено: 17 Мая 2018 17:25:18 Добавил: Андрей Ковальчук

Вставка изображения из буфера обмена в редактор TinyMCE

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

Для решения проблемы мы использовали ява-аплет Supa.

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

Код для вставки аплета

<applet id="SupaApplet" archive="supa/Supa.jar" code="de.christophlinder.supa.SupaApplet" width="0" height="0">
  <param name="imagecodec" value="png"> </param>
  <param name="encoding" value="base64"> </param>
  <param name="previewscaler" value="fit to canvas"> </param>
  <param name="trace" value="true"> </param>
</applet>

Устанавливаем размер аплета 0х0 px, так как по-умолчанию аплет отображает изображение из буфера обмена без аплоуда на сервер, а нам нужно чтобы аплоуд происходил по нажатию кнопки в редакторе.

Интеграция в TinyMCE

Немного упростив код из примера для аплета получаем управляющую обертку на JS, состоящую из двух функций.
        function paste() 
        {
                var s = new supa();
                try 
                {
                var applet = document.getElementById( "SupaApplet" );
        
                if (!s.ping(applet)) throw "SupaApplet is not loaded (yet)";
                
                        var err = applet.pasteFromClipboard(); 
                        switch (err) 
                        {
                        case 0:
                        break;
                        case 1: 
                        case 2:
                        case 3:
                        case 4:
                        default:
                                return false;
                        }
                }
                catch (e) 
                {
                alert(e);
                throw e;
                }
                return upload();
        }       
        function upload() 
        {
                var s = new supa();
                var applet = document.getElementById("SupaApplet");
        
                try 
                { 
                        var result = s.ajax_post(applet, "supa/upload.php", "screenshot", "screenshot.jpg", 
                        { 
                                form: document.forms["form"] 
                        });
                        if (result.match("^OK")) 
                        {
                                var url = result.substr(3);
                                return url;
                        } 
                        else return false;
                } 
                catch (ex) { return false; }            
                return false;
        }

Добавление кнопки в TinyMCE
$(document).ready(function()
{
        $('#editor').tinymce(
        {
                script_url : '../js/tiny_mce/tiny_mce.js',
                theme : "advanced",
                plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
                theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2 : "search,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor",
                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup",
                theme_advanced_buttons4 : "insert_image",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom",
                theme_advanced_resizing : false,
                setup : function(ed) 
                {
                        ed.addButton('insert_image',
                        {
                                title: 'Insert Image',
                                image: 'images/add.png',
                                onclick: function()
                                {
                                        tmp = paste();
                                        if (tmp !== false)                                      
                                                ed.selection.setContent('img src="upload/' + tmp + '" /');
                                }
                        });
                }
        });
});
</script>

Код аплоуда на сервере
<?php
        define('FILESTORE_PATH', "../include/tcpdf/upload");
        define('FILESTORE_URLPREFIX', "upload"); 

        header('Content-Type: text/plain');

        if (!$_FILES['screenshot']) 
        {
                echo "ERROR: NO FILE (screenshot)";
                exit;
        }
        if ($_FILES['screenshot']['error']) 
        {
                echo "PHP upload error: " . $_FILES['screenshot']['error'];
                exit;
        }  
        $filename = uniqid() . '.jpg';  
        $file = FILESTORE_PATH . "/" . $filename;
        $fh = fopen($_FILES['screenshot']['tmp_name'], "r");
        if (!$fh) 
        {
                echo "ERROR: could not read temporary file";
        }
        $data = fread($fh, filesize($_FILES['screenshot']['tmp_name']));
        fclose($fh);
        $fh = fopen($file, "w");
        if (!$fh) 
        {
                echo "ERROR: could not open destination file";
                die();
        }
        fwrite($fh, base64_decode($data));
        fclose($fh);
        
        if (is_uploaded_file( $_FILES['screenshot']['tmp_name'])) 
        {
                unlink($_FILES['screenshot']['tmp_name']);
        }
        echo "OK:" . FILESTORE_URLPREFIX . "/" . $filename;
?>

Подпись аплетов — тут.

Добавлено: 17 Мая 2018 07:54:49 Добавил: Андрей Ковальчук

Внедрение карты maps.google на сайт.

Сегодня я расскажу, как встроить на свой сайт интерактивную карту Google. Это может пригодиться вам, когда нужно обозначить какое-то географическое место на сайте: город, дорогу и т.п.

Шаг 1.

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

В моем случае это: г. Псков, Октябрьский пр., 33а.

Шаг 2.

В правом верхнем углу карты выберем пункт "Ссылка", затем "Настройка и предварительный просмотр встроенной карты"

В открывшемся окне выберем размер карты, воспользовавшись предложенными вариантами: "Малый", "Средний" или "Крупный" или зададим свой, поставив радиокнопку на пункт "Пользовательский".

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

Шаг 3.

Скопируем сгенерированный html код и вставим его на страницу нашего сайта.

Вот и все! Надеюсь, что использование google карт сделает ваш сайт более привлекательным и удобным.

Добавлено: 17 Мая 2018 07:16:46 Добавил: Андрей Ковальчук

Расширяем возможности WYSIWYG редактора

В данном уроке мы рассмотрим варианты расширения функциональности JavaScript WYSIWYG редактора.

Все наши эксперименты как и в прошлых уроках мы проводим над TinyMCE.

1.Пример со всеми возможными функциями

<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce.js"></script>
      <script type="text/javascript">
      tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
 // Theme options
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true,
 // Example content CSS (should be your site CSS)
      content_css : "css/example.css",
 // Drop lists for link/image/media/template dialogs
      template_external_list_url : "js/template_list.js",
      external_link_list_url : "js/link_list.js",
      external_image_list_url : "js/image_list.js",
      media_external_list_url : "js/media_list.js",
 // Replace values for the template plugin
      template_replace_values : {
      username : "Some User",
      staffid : "991234"
      }
      });
  </script>
<form method="post" action="somepage">
  <textarea name="content" style="width:100%">
  </textarea>
  </form>

2. Пример с TinyMCE compressor. Данная технология позволяет до 70% уменьшить количество запросов и тем самым снизить нагрузку на сервер.
<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce_gzip.js"></script>
  <script type="text/javascript">
  // This is where the compressor will load all components, include all components used on the page here
  tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
themes : 'advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script type="text/javascript">
// Normal initialization of TinyMCE
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
 // Theme options
  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,
 // Example content CSS (should be your site CSS)
  content_css : "css/example.css",
 // Drop lists for link/image/media/template dialogs
  template_external_list_url : "lists/template_list.js",
  external_link_list_url : "lists/link_list.js",
  external_image_list_url : "lists/image_list.js",
  media_external_list_url : "lists/media_list.js",
 // Replace values for the template plugin
  template_replace_values : {
  username : "Some User",
  staffid : "991234"
  }
  });
  </script>
<form method="post" action="somepage">
  <textarea name="content" style="width:100%">
  </textarea>
  </form>

3. Пример с кнопкой включение и выключения редактора
<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce.js"></script>
  <script type="text/javascript">
  tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
function toggleEditor(id) {
  if (!tinyMCE.get(id))
  tinyMCE.execCommand('mceAddControl', false, id);
  else
  tinyMCE.execCommand('mceRemoveControl', false, id);
  }
  </script>
<form method="post" action="somepage">
  <textarea name="content" style="width:100%">
  </textarea>
  </form>
  <a href="javascript:toggleEditor('content');">Включить/Выключить редактор</a>

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

Кроме этих примеров - на сайте редактора еще множество других вариантов.

Если у Вас возникли какие-либо вопросы - пишите в комментариях - по возможности на все отвечу.

Спасибо за внимание! :)

Добавлено: 17 Мая 2018 07:05:37 Добавил: Андрей Ковальчук

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

Если сделать запрос поисковым серверам на тему проигрывания звука с помощью CSS, то вы найдете:

Ссылки на материалы о Counter Strike: Source.
Что-нибудь о play-during и cue-before и подобных многообещающих моментах, но ничего конкретного о том, как издать писк при наведении курсора мыши на пункт меню.

Звук является частью дизайна и способность проигрывать/запускать звуковые ролики должна присутствовать в CSS, но увы... ее пока нет. Чтобы проиграть звук при прохождении курсором мыши определённой области нам придется полагаться на HTML5 или Flash. Но кто в наше время захочет связываться с Flash? Поэтому обратимся к HTML5, который может проигрывать звук с помощью своего элемента <audio> (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Чтобы обеспечить поддержку данной функции как можно большим числом браузеров будем использовать и MP3 источники (WebKit и IE) и OGG (Firefox и Opera).

<audio>
        <source src="audio/beep.mp3"></source>
        <source src="audio/beep.ogg"></source>
        Ваш браузер не поддерживает замечательный элемент <audio>.
</audio>

Если вы вставите выше приведенный код на страницу, то ничего не увидите и не услышите. Для вывода небольшого проигрывателя нужно использовать атрибут controls (<audio controls>). Если нужно только проигрывать звук без каких-либо видимых элементов управления, то надо использовать атрибут autoplay (<audio autoplay>). Или можно использовать оба атрибута вместе ...

Нашей целью является проигрывание звука, когда курсор мыши оказывается над определённым элементом. К сожалению, мы не можем управлять элементом <audio> из CSS, поэтому потребуется использовать JavaScript:
var audio = document.getElementsByTagName("audio")[0];
audio.play();
 
// или с использованием ID
 
var audio = document.getElementById("mySoundClip");
audio.play();

Будем использовать jQuery, потому что он существенно облегчает выбор и работу с элементами.
var audio = $("#mySoundClip")[0];
audio.play();

Вот так выглядит код, который проигрывает звук, когда курсор мыши проходит над определенным элементом:
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
  audio.play();
});

Пример из реальной жизни
На сайте Goodfoot используется подобная технология для проигрывания разных звуков, когда курсор мыши проходит над ртом снежного человека (работает в браузерах Webkit). Данный эффект выполнен встраиванием нового элемента audio в структуру DOM каждый раз, когда курсор мыши проходит над ртом снежного человека:
$("#speak").mouseenter(function(){
        $("<audio></audio>").attr({
                'src':'audio/'+Math.ceil(Math.random() * 5)+'.mp3',
                'volume':0.4,
                'autoplay':'autoplay'
        }).appendTo("body");
});

Метод можно немного улучшить, добавив поддержку файла OGG:
function addSource(elem, path) {
  $('<source>').attr('src', path).appendTo(elem);
}
 
$("#speak").mouseenter(function(){
     var audio = $('<audio />', {
       autoPlay : 'autoplay'
     });
     addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.mp3');
     addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.ogg');
     audio.appendTo('body');
});

Другой способ добиться подобного эффекта - нужно размести несколько элементов audio на странице сразу:
<audio preload="auto" id="sound-1" > ... источник ... </audio>
<audio preload="auto" id="sound-2" > ... источник ... </audio>
<audio preload="auto" id="sound-3" > ... источник ... </audio>

И случайным образом выбирать один для проигрывания:
$("#speak").mouseenter(function() {
    $("#sound-" + Math.ceil(Math.random() * 3))[0].play();
});

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

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

Самый лучший метод решения возникшей проблемы - дублировать элемент audio для каждого пункта меню. Таким образом, независимые элементы audio могут проигрывать перекрывающиеся звуки.
$("nav a") // цикл по всем пунктам меню
  .each(function(i) {
    if (i != 0) { // Клонирование нужно только в случае более одного пункта
      $("#beep")
        .clone()
        .attr("id", "beep-" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beeper", i); // сохраняем ссылку
  })
  .mouseenter(function() {
    $("#beep-" + $(this).data("beeper"))[0].play();
  });
$("#beep").attr("id", "beep-0"); // изменяем первый элемент в соответствии с условиями именования

Добавлено: 17 Мая 2018 06:33:31 Добавил: Андрей Ковальчук

Создаем контактную форму

Для формы используются файлы: index.html, init.js и default.css. Также нужно загрузить плагин jQuery для проверки значений полей формы.

В секцию head файла index.html добавляем код:

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/validate.min.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

Формируем разметку HTML:
<form id="form" class="blocks" action="#" method="post">
    <p>
        <label>Имя:</label>
        <input type="text" class="text" name="name" />
    </p>
    <p>
        <label>Компания:</label>
        <input type="text" class="text" name="company" />
    </p>
    <p>
        <label>Адрес e-mail:</label>
        <input type="text" class="text" name="email" />
    </p>
    <p>
        <label>Номер телефона:</label>
        <input type="text" class="text" name="phone" />
    </p>
    <p class="area">
        <label>Сообщение:</label>
        <textarea class="textarea" name="message"></textarea>
    </p>
    <p>
        <label>&nbsp;</label>
        <input type="submit" class="btn" value="Отправить" />
    </p>
</form>

Затем формируем внешний вид нашей формы с помощью CSS :
.blocks p {
margin-bottom:15px;
position:relative;
}
 
.btn {
display:block;
float:left;
height:31px;
line-height:31px;
padding:0 10px;
background:url(../gfx/bgbtn.jpg) repeat-x;
color:#565e62;
font-weight:bold;
font-size:11px;
border:1px solid #e1e0df;
outline:none;
}
 
.text,
.textarea {
padding:5px 10px;
height:27px;
border:1px solid #ddd;
color:#333;
background:url(../gfx/bginput.jpg) repeat-x bottom #fff;
position:relative;
z-index:2;
}
 
.text {
width:220px;
}
 
.textarea {
height:150px;
width:350px;
}
 
.blocks label {
float:left;
width:100px;
line-height:37px;
text-align:right;
margin-right:15px;
font-weight:bold;
color:#666;
}
 
.blocks label.error,
.blocks label.ok {
position:absolute;
z-index:1;
top:-4px;
left:110px;
padding:5px 15px 5px 280px;
/*Сбрасываем метку*/
width:auto;
text-align:left;
margin:0;
background-repeat:no-repeat;
background-position:257px 16px;
}
 
.blocks label.ok {
background-image:url(../gfx/icook.gif);
background-color:#deefca;
color:#577530;
}
 
.blocks label.error {
background-image:url(../gfx/icofail.gif);
background-color:#f5d6d7;
color:#c81925;
}
 
.area label.ok,
.area label.error {
height:163px;
padding-left:410px;
background-position:387px 16px;
}
 
/* CSS3 */
.btn,
.text,
.textarea,
.blocks label.error,
.blocks label.ok {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

А теперь настало время для JavaScript кода, который возьмет на себя бремя проверок и формирования индикации ошибок в значениях полей нашей формы:
$(function(){
     
    $("#form").validate({   // используем id формы (можно использовать и имя класса)
        rules: {    // описываем правила проверки полей формы
            name: {         // указываем имя поля, для которого вводятся правила
                required: true, // в поле должно быть введено значение
                minlength: 3    // устанавливаем минимальную длину значения поля
            },
            company: {
                required: true
            },
            phone: {
                required: true,
                number: true,   // значение поля должно быть десятичным целым числом
                minlength: 6
            },
            email: {
                required: true,
                email: true // значение поля должно иметь правильный формат адреса email
            },
            message: {
                required: true
            }
        },
        messages: { // устанавливаем сообщения для пользователя
            name: {
                required: 'Данное поле должно быть заполнено!',
                minlength: 'Минимальная длина: 3'
            },
            company: {
                required: 'Данное поле должно быть заполнено!'
            },
            phone: {
                required: 'Данное поле должно быть заполнено!',
                number: 'Неправильный формат номера телефона',
                minlength: 'Минимальная длина: 6'
            },
            email: 'Неправильный формат адреса e-mail',
            message: {
                required: 'Данное поле должно быть заполнено!'
            }
        },
        success: function(label) {
            // Устанавливаем класс OK для сообщения об ошибке выключаем его через 2 секунды
            label.html('OK').removeClass('error').addClass('ok');
            setTimeout(function(){
                label.fadeOut(500);
            }, 2000)
        }
    });
     
});

Готово!

Добавлено: 17 Мая 2018 06:30:03 Добавил: Андрей Ковальчук

Дизайн для мобилок и CSS3 медиа запросы

Сегодня разрешение экранов варьирует от 320px (iPhone) до 2560px (большой монитор) или еще больше. Теперь пользователи пользуются интернетом не только через свой PC, но и при помощи мобильных устройств, таких как iPad или Playbook. Таким образом, традиционный подход к фиксированным размерам страницы больше не является дееспособным. Веб-дизайн должен быть адаптирован под всё. Расположение элементов должно корректироваться автоматически, чтобы соответствовать разрешению дисплея. В этом уроке мы покажем вам, как создать кроссбраузерный дизайн, работая с HTML5 и CSS3 медиа запросами.

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

Ширина главного контейнера составляет 980px. Этот размер подогнан для того, чтобы люди с экранами меньше 1024px смогли легко просматривать сайт. Медиа запрос используется для того, чтобы узнать, является ли область просмотра меньше, чем 980px. Если область просмотра меньше 650px, то элементы страницы адаптируются под новые требования и многоколоночное расположение становится одноколоночным.

HTML
Я не собираюсь подробно описывать HTML код. Скажу, что на странице у меня есть "pagewrap" контейнер, который содержит "header", "content", "sidebar", и "footer".

<div id="pagewrap">
 
    <header id="header">
 
        <hgroup>
            <h1 id="site-logo">Demo</h1>
            <h2 id="site-description">Site Description</h2>
        </hgroup>
 
        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
            </ul>
        </nav>
 
        <form id="searchform">
            <input type="search">
        </form>
 
    </header>
     
    <div id="content">
 
        <article class="post">
            blog post
        </article>
 
    </div>
     
    <aside id="sidebar">
 
        <section class="widget">
             widget
        </section>
                         
    </aside>
 
    <footer id="footer">
        footer
    </footer>
     
</div>

HTML5.js
Прошу заметить, что я использую HTML5. Internet Explorer, версия которого меньше 9, не поддерживает новые элементы, представленные в HTML5, такие как <header>, <article>, <footer>, <figure> и т.д. Прикрепив файл html5.js, исправит ситуацию и IE будет понимать новые элементы.
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS
Сброс настроек элементов HTML5
Следующий CSS код сбросит стандартные настройки HTML5 элементов (article, aside, figure, header, footer и т.д.), чтобы элементы стали блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

Основная структура CSS
И тут я не собираюсь подробно останавливаться на коде. Заголовку мы выставляем фиксированную высоту в 160px. Контейнер "content" будет 600px в ширину и т.д.
#pagewrap {
    width: 980px;
    margin: 0 auto;
}
 
#header {
    height: 160px;
}
 
#content {
    width: 600px;
    float: left;
}
 
#sidebar {
    width: 280px;
    float: right;
}
 
#footer {
    clear: both;
}

CSS3 Медиа запросы
Тут будет особенно интересно.

Медиа запросы Javascript
Internet Explorer 8 или более старые версии данного браузера не поддерживает медиа запросы CSS3. Но и на этот раз у нас есть, что подключть - css3-mediaqueries.js.
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Вставляем CSS Медиа запросы
Создайте новый файл с таблицей стилей для медиа запросов.
<link href="media-queries.css" rel="stylesheet" type="text/css">

Для экранов, которые меньше 980px (несколько столбцов)
Для данных размеров будут использоваться следующие правила:

pagewrap = сброс ширины до 95%

content = сброс ширины до 60 %

sidebar = сброс ширины до 30 %

Заметка: мы используем процент (%) для того, чтобы элементы были резиновыми.
@media screen and (max-width: 980px) {
 
    #pagewrap {
        width: 95%;
    }
 
    #content {
        width: 60%;
        padding: 3% 4%;
    }
 
    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }
 
}

Для экранов, которые меньше 650px (один столбец)
Для данных размеров будут использоваться следующие правила:

header = выставляем значение auto;

searchform = меняем расположения элемента на 5px вверх;

main-nav = выставляем значение static;

site-logo = выставляем значение static;

site-description = выставляем значение static;

content = выставляем значение auto; (для того, чтобы контейнер развернулся на весь экран);

sidebar = сброс ширины к 100% и избавляемся от float.
@media screen and (max-width: 650px) {
 
    #header {
        height: auto;
    }
 
    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }
 
    #main-nav {
        position: static;
    }
 
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
 
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
 
    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }
 
    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }
 
}

Для экранов, которые меньше 480px
Для данных размеров будут использоваться следующие правила:

html = отключаем корректировку размера текста. По умолчанию, iPhone увеличивает размер текста таким образом, чтобы было удобнее читать. Подобного эффекта мы можем достичь, добавив webkit-text-size-adjust: none;

main-nav= сброс размера шрифта до 90%
@media screen and (max-width: 480px) {
 
    html {
        -webkit-text-size-adjust: none;
    }
 
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
 
}

Гибкие изображения
Чтобы сделать изображения гибкими, просто добавьте свойства max-width:100 % и height:auto. Это сработает в IE7, но не в IE8 (как всегда). Для того, чтобы исправить ситуацию, воспользуйтесь следующим трюком. Добавьте строку width:auto\9 для IE8.
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Гибкое видео
Для видео будем использовать тот же подход, что и в прошлом пункте. По каким-то странным причинам max-width:100 % (для встроенных элементов) не работает в Safari, поэтому тут мы напишем width:100%.
.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

Инициализируем мета тег для iPhone
По умолчанию Safari уменьшает HTML страницы, чтобы вписаться в экран iPhone. Следующий мета тег сообщит данному браузеру отключить начальный масштаб.
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Финал
Вот и всё, что мы хотели вам показать. Если у вас есть возможность, проверяйте демо на разных устройствах, таких как iPhone, iPad, Blackberry (более новые версии) и телефоны Android.

Добавлено: 16 Мая 2018 20:18:04 Добавил: Андрей Ковальчук

Классная login-панель

Здравствуйте. Сегодня, в этом уроке, мы будем вместе с Вами делать классную панель для регистрации и входа в систему. Подобная панель уже существует. Но она реализована на jQuery, я же буду вести речь о простой панельке, сделанной на HTML с помощью CSS и небольшого JavaScript'ика!

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


Шаг 1. HTML-конструкция панели

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

HTML:

<div  id="main">
<div  id="navbar">
<ul>
<li>
<a  href="#" onclick="showlayer('login_menu')">Регистрация  | Войти</a></li>
</ul>
<div  id="login_menu" style="display:none;">
<div  id="new-user-col">Регистрация:
<a href="#"  class="green-button">Зарегиться</a>
</div>
<div  id="signup-user-col">
Войти в  систему:
<p><form  action="#" method="post">
<ul>
<li>
<label  for="email">Email:</label>
<input  type="text" id="email" size="18"/>
</li>
<li>
<label  for="psw">Пароль:</label>
<input  type="text" id="psw" size="18"/>
</li>
<button  type="submit" class="green-button">Войти!</button>
</ul>
</form></p>
</div>
<div  class="spacer"></div>
</div>
</div>
</div>

Шаг 2. Дизайн панели

Идем дальше... Теперь мы должны для правильного отображения панели привязать несколько стилей к нашему файлу, где будем размещать панель. Для этого достаточно просто разместить нижеприведенный код между тегами <head> и </head>:

CSS:
<style  type="text/css">
/*  ОСНОВНЫЕ СТИЛИ */
body{font-family:"Lucida  Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica,  sans-serif; font-size:11px;}
#main{
  width:600px;
  margin:0 auto;
  }

/*  СТИЛИ НАВИГАЦИОННОГО МЕНЮ */
#navbar{
  background:url(images/bg.png) repeat-x;
  height:29px;
  line-height:29px;
  }
  #navbar ul, #navbar li, 
  #navbar form,
  #navbar button {
  border:0; margin:0; padding:0; list-style:none;
  }
  #navbar li a{
  margin:0 6px;
  text-decoration:none;
  color:#000000;
  font-weight:bold;
  border-bottom:dotted 1px #000000;
  }
  #login_menu{
  background:#aaaaaa;
  border:solid 1px #666666;
  width:340px;
  padding:10px;
  color:#FFFFFF;
  position:absolute;
  font-weight:bold;
  font-size:12px;
  line-height:18px;
  }
  #login_menu li{
  padding-bottom:6px;
  text-align:right;
  }
  #new-user-col{
  padding-right:10px;
  border-right:1px #DEDEDE solid;
  height:120px;
  width:100px;
  float:left;
  line-height:12px;
  }
  #signup-user-col{
  padding-left:20px;
  height:120px;
  width:200px;
  float:left;
  line-height:12px;
  text-align:right;
  }
  #login_menu label{font-size:11px;  font-weight:normal;}
  #login_menu input{font-size:11px;  color:#333333; margin-left:10px;}
  


 #login_menu button{
  line-height:24px;
  float:right;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
  text-align:center; 
  cursor:pointer;
  }
      .green-button{
  background:url(images/button.png);
  display:block;
  color:#FFFFFF;
  font-size:11px;
  text-decoration:none;
  width:81px;
  height:26px;
  line-height:24px;
  text-align:center;
  }
  
  .spacer{clear:both; height:1px;}
</style>

Шаг 3. Основной JavaScript-код

А вот и заключительная часть нашего урока. Здесь нам всего лишь остается заставить нашу панель «выползать», когда мы нажимаем сверху на кнопку. Для этого мы будем использовать очень простую функцию JS – showlayer(). Ниже я привожу полностью готовый к применению такой скрипт:

JavaScript:
<script  type="text/javascript">
function  showlayer(layer){
  var  myLayer=document.getElementById(layer);
  if(myLayer.style.display=="none"  || myLayer.style.display==""){
  myLayer.style.display="block";
  } else { 
  myLayer.style.display="none";
  }
  }
</script>

Ну вот, в принципе, и все. Вы также можете использовать эту интересную функцию JS – showlayer() и во многих других своих работах. Спасибо за внимание, жду Ваших комментариев.

Добавлено: 16 Мая 2018 20:06:42 Добавил: Андрей Ковальчук

Горизонтальное выпадающее меню

От автора: адаптивное горизонтальное выпадающее меню, навеянное вебсайтом Microsoft.com.

Это большое горизонтальное выпадающее меню при щелчке на элемент просто показывает подменю. Его создание навеяно выпадающим меню сайта Microsoft.com. Примеры медиазапросов показывают, как адаптировать его к маленьким экранам.

Это большое горизонтальное выпадающее меню при щелчке на элемент просто показывает подменю. Его создание навеяно выпадающим меню сайта Microsoft.com. Примеры медиазапросов показывают, как адаптировать его к маленьким экранам.

HTML

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="#">Catch the Bullet</a></li>
                            <li><a href="#">Snoopydoo</a></li>
                            <!-- ... -->
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="#">Gadget Finder</a></li>
                            <li><a href="#">Green Tree Express</a></li>
                            <li><a href="#">Green Tree Pro</a></li>
                            <li><a href="#">Wobbler 3.0</a></li>
                            <li><a href="#">Coolkid</a></li>
                        </ul>
                    </div>
                    <div>
                        <!-- ... -->
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</nav>

CSS
.cbp-hrmenu {
    width: 100%;
    margin-top: 2em;
    border-bottom: 4px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 700;
    padding: 1em 2em;
    color: #999;
    display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
    color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #fff;
    background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a {
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub {
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}

JavaScript
var cbpHorizontalMenu = (function() {

    var $listItems = $( '#cbp-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

    function init() {
        $menuItems.on( 'click', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }

    function open( event ) {

        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' );
        }

        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();

        if( current === idx ) {
            $item.removeClass( 'cbp-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }

        return false;

    }

    function close( event ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
        current = -1;
    }

    return { init : init };

})();

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

Приятные всплывающие подсказки с использованием CSS3 и jQuery

Очевидно, что всплывающие подсказки существенно улучшают удобство использования интерфейсом приложения. В данном уроке мы создадим практическое решение с применением CSS3 и jQuery.

Для текста подсказок будет использоваться атрибут HTML5 data-*. А основными преимуществами предлагаемого решения будут:

простота использования;
анимация с помощью CSS3.

Разметка HTML
Структура, которая будет служить основой для наших подсказок, имеет следующий вид:

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

CSS
Для создания 3D вида подсказок используются следующие стили:
.tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
}
 
.tooltip-content {
        opacity: 0;
        visibility: hidden;
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;
 
        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        -moz-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-transition: bottom .2s ease, opacity .2s ease;
        -moz-transition: bottom .2s ease, opacity .2s ease;
        -ms-transition: bottom .2s ease, opacity .2s ease;
        -o-transition: bottom .2s ease, opacity .2s ease;
        transition: bottom .2s ease, opacity .2s ease;
        }
 
.tooltip-content:after,
.tooltip-content:before {
        border-right: 16px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
}
 
.tooltip-content:before {
        border-right-width: 25px;
        border-top-color: #555;
        border-top-width: 15px;
        bottom: -15px;
}
 
.tooltip:hover .tooltip-content{
        opacity: 1;
        visibility: visible;
        bottom: 30px;
}

jQuery
Код jQuery выполняет всю "грязную" работу. С помощью значения атрибута HTML5 data-tooltip он добавляет новый элемент в DOM: <span class="tooltip-content">, который анимируется с помощью CSS3.
$(document).ready(function(){
        $('[data-tooltip]').addClass('tooltip');
        $('.tooltip').each(function() {
                $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
        });
 
        if ($.browser.msie && $.browser.version.substr(0,1)<7)
        {
          $('.tooltip').mouseover(function(){
                        $(this).children('.tooltip-content').css('visibility','visible');
                  }).mouseout(function(){
                        $(this).children('.tooltip-content').css('visibility','hidden');
                  })
        }
});

IE6 требует специальных ухищрений, что видно в выше приведенном коде.

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

Добавлено: 16 Мая 2018 18:05:49 Добавил: Андрей Ковальчук

Управление всплывающей информацией

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

Рассмотрим возможные варианты решения.

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

<figure>
   <img src="image.jpg" alt="Пример изображение">
   <figcaption>
        <h3>Пример изображения</h3>
        <a href="http://ruseller.com">материалы проекта RUSELLER.COM</a>
   </figcaption>
</figure>

Простое решение: используем CSS для скрытия и вывода названия
Используем <figcaption> в качестве раздела для всплывающей информации. Скрываем его по умолчанию и выводим при наведении курсора мыши на изображение:
figcaption {
   display: none;
}
figure:hover figcaption {
   display: block;
}

Просто, но слишком грубо. Смотрите на демонстрационной странице.

Используем затухание: трансформации CSS3
Можно воспользоваться продвинутыми методами CSS3:
figcaption {
   opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
     -moz-transition: opacity 0.3s ease-out;
      -ms-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}
figure:hover figcaption {
   opacity: 1;
}

Для достижения желаемого эффекта нужно настроить длительность перехода.

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

Используем HoverIntent
Если подключить JavaScript, можно сделать работу нашего блока более изящной. Плагин jQuery HoverIntent поможет предотвратить нежелательные события hover. Он задает небольшую задержку перед генерацией события, поэтому быстрое перемещение курсора мыши над объектом не приведет ни к каким действиям, а медленная проводка и остановка вызовет появление дополнительной информации.

Можно сделать так:
$("figure").hoverIntent(function() {
   $("figcaption", this).fadeTo(400, 1);
}, function() {
   $("figcaption", this).fadeTo(400, 0);
});


Используем doTimeout
HoverIntent отлично справляется с ситуацией быстрого прохода курсора мыши над изображением. Но если у нас есть несколько изображений, то перемещение между ними будет связано сзадержкой появления названия, что тоже не очень хорошо. Для предотвращения таких ситуаций можно воспользоваться плагином doTimeout. Однако код будет несколько сложнее:
var li_cache, over = false;
 
$( "figure" )
        .delegate( "figcaption", "mouseenter", function ( e ) {
                var $li = $( this ), speed;
 
                if ( li_cache === this && over ) {
                        $.doTimeout( "hoverOut" );
                        return;
                }
 
                if ( over ) {
                        $.doTimeout( "hoverOut", true );
                        speed = 0;
                } else {
                        $.doTimeout( "hoverOut" );
                        speed = 500;
                }
 
                $.doTimeout( "hoverIn", speed, function () {
                        over = true;
                        $li.find( "div" ).fadeTo( 200, 1.0 );
                });
        })
        .delegate( "figcaption", "mouseleave", function ( e ) {
                var $li = $( this );
 
                $.doTimeout( "hoverIn" );
                $.doTimeout( "hoverOut", 500, function () {
                        over = false;
                        $li.find( "div" ).stop( true ).fadeOut();
                });
        });

Название появляется спустя 0.5 секунды после наведения курсора на изображение. А если передвинуть курсор мыши на другое изображение, то название появится сразу. Смотрите демонстрацию для примера 4.

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

Заключение
Как видите, совершенству нет предела.

Добавлено: 16 Мая 2018 17:05:45 Добавил: Андрей Ковальчук

Фон, который всегда растягивается на всю страницу

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

Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.

Вот требования к решению:

Заполнять изображением всю страницу без пробелов.

Масштабировать изображение, если нужно.

Сохранять пропорции изображения.

Изображение центрируется на странице.

Изображение не создает никаких полос прокрутки.

Кросс-браузерное решение по возможности.

Не использовать никаких сторонних технологий, например, Flash.

Удивительный, простой и прогрессивный метод CSS3
Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size. Мы используем элемент html (лучше, чем body, так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.

html {
       background: url(images/bg.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
}

Работает в:

Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
Firefox 3.6+

Техника с использованием только CSS. Часть #1.
Используем строчный элемент <img>, размеры которого можно менять в любом браузере. Устанавливаем свойство min-height, чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.

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

Вот код CSS:
img.bg {
        /* Устанавливаем правила для заполнения фоном */
        min-height: 100%;
        min-width: 1024px;
 
        /* Устанавливаем коэффициент пропорциональности */
        width: 100%;
        height: auto;
 
        /* Устанавливаем позиционирование */
        position: fixed;
        top: 0;
        left: 0;
}
 
@media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Работает в:

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

IE 9: Работает.

Техника с использованием только CSS. Часть #2.
Другой способ решить задачу - поместить строчный элемент <img> на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height, сохраняя коэффициент пропорциональности.
<img src="images/bg.jpg" id="bg" alt="">

#bg {
 
        position:fixed;
 
        top:0;
 
        left:0;
 
 
 
        /* Сохраняем коэффициент пропорциональности */
 
        min-width:100%;
 
        min-height:100%;
 
}

Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div>. Данный <div> будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.
<div id="bg">
        <img src="images/bg.jpg" alt=""> 
</div>

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
 
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Работает в:

Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

IE 8+.

Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery
Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(function() {  
        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height(); 
        function resizeBg() { 
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                     $bg
                        .removeClass()
                        .addClass('bgheight'); 
                } else { 
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
        } 
        theWindow.resize(function() { 
                resizeBg(); 
        }).trigger("resize"); 
});

Работает в:

IE7+ (с заглушками, вероятно, будет работать и в IE6)

Во всех остальных браузерах.

Добавлено: 16 Мая 2018 17:03:44 Добавил: Андрей Ковальчук