Еще одна выплывающая панель с помощью jQuery

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

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

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

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

<script src="slidebox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

$("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
});
</script>

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

Далее идет код, который используется для наполнения панели разными ссылками. Тут Вы можете дать волю фантазии.
<div id="testZone">
<ul id="list-1" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-2" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-3" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>

<ul id="list-4" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>

<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
</div>

Вот и все готово! Спасибо за внимание.

Добавлено: 09 Мая 2018 12:52:33 Добавил: Андрей Ковальчук

Классное меню с выпадающими элементами

Данный урок покажет Вам как сделать красивое dropdown меню, которое подойдет под любой сайт.

Это меню чрезвычайно легкое (занимает всего 1.4 кб), очень легко устанавливается и классно выглядит.

Давайте начнем. Для начала подключаем стили оформления и скрипт меню (между тегами <head></head>):

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

Далее идет HTML структура меню. Код ниже показывает только код, который относится к первому элементу меню "Dropdown One":
<ul class="menu" id="menu">
	<li><a href="#" class="menulink">Dropdown One</a>
		<ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
					<li><a href="#">Navigation Item 4</a></li>
					<li><a href="#">Navigation Item 5</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="sub">Navigation Item 3</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li>
						<a href="#" class="sub">Navigation Item 3</a>
						<ul>
							<li class="topline"><a href="#">Navigation Item 1</a></li>
							<li><a href="#">Navigation Item 2</a></li>
							<li><a href="#">Navigation Item 3</a></li>
							<li><a href="#">Navigation Item 4</a></li>
							<li><a href="#">Navigation Item 5</a></li>
							<li><a href="#">Navigation Item 6</a></li>
						</ul>
					</li>
					<li><a href="#">Navigation Item 4</a></li>
				</ul>
			</li>
			<li><a href="#">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</li>
	...
</ul>

Как Вы видите все предельно просто. Всплывающие подменю оформляются в виде списка с помощью тегов <ul> и <li>.

После меню в самом конце документа нам необходимо вставить еще одну небольшую функцию:
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script>

Классное меню готово! Всем спасибо за внимание!

Добавлено: 09 Мая 2018 12:41:13 Добавил: Андрей Ковальчук

Привлеки внимание посетителей с помощью модальных окон

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

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

<script type="text/javascript" src="jquery.tools.min.js"></script>
      <script type="text/javascript">
      $(function() {    
$("#alert").overlay({
      finish: {top: 'center'},
      expose: '#951756'
});
});
      </script>

Далее подключаем стили оформления. В данном примере я использовал и внешнюю таблицу стилей и внутренние стили. Можете их объединить в одном месте, если желаете.
<link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>
<style>
      body {
      padding:150px 50px;
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
      }
      #alert {
      width:300px;
      height:220px;
      }
#alert div.close {

      top:0;
      right:0;
      }
#alert h2 {
      background-image:url(alert.png);
      background-position:6px center;
      background-repeat:no-repeat;
      padding:10px 0 10px 60px;
      margin-top:-10px;
      }
  </style>

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

В теле документа создаем кнопку, которая вызывает модальное окно. Содержимое окна также прописываем здесь.
<button type="button" onClick='$("#alert").overlay().load();'>Open alert</button>
<!-- our alert box -->
      <div class="overlay" id="alert">
 <h2>A nasty alert box.</h2>
 <p>

      Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Donec lorem ligula, elementum vitae,
      imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
  </p>
</div>

Все готово! До завтра.

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

Думаем справа-налево вместе с jQuery

Мы привыкли писать код исходя из наших устоев - чтения слева-направо. В тоже время, многие JavaScript фрэймворки, такие как jQuery, YUI 3, NWMatcher, а так же нативный querySelectorAll, производят парсинг справа-налево.

Пример
Возьмём вот такой вот селектор:

$('.box p');

jQuery работает в обратном направлении. Всё начинается с поиска всех параграфов в DOM, а после идёт отбор только тех, у которых есть класс .box.

JSPerf
Используем сайт JsPerf.com для тестирования.
<div id="box">
  <p> Hello </p>
</div>
 
// Тест
 
//1 .
$('#box p');
 
// 2.
$('#box').find('p');

Приведённый выше пример показывает, что использование find() или children() на 20-30% быстрее, в зависимости от браузера. Библиотека jQuery специальна оптимизирована для нахождения элемента, если в селекторе присутствует знак # ( $('#box') ). В этом случае jQuery не нужно использовать Sizzle (библиотека селекторов); Она сразу использует getElementById.

В этом случае $('#box p'), jQuery необходимо парсить строку при помощи Sizzle API, что займёт немного времени. Вот почему быстрее использовать $('.elems').first() чем $('.elems:first'), для выбора первого элемента.

Другой пример
Рассмотрим другой пример:
$('#container > :disabled');

Принцип работы селектора не очень сложен. Найти все выключенные элементы, которые находятся в контейнере #container. Однако, учитывая то, что мы узнали выше, jQuery и querySelectorAll работает справа-налево. Это означает, что jQuery выберет все элементы DOM, потом определит у каких из них стоит атрибут disabled. Таким образом jQuery пройдётся по всем элементам страницы.
// Где-то в недрах jQuery
disabled: function( elem ) {
    return elem.disabled === true;
}

Как только собрана коллекция элементов, далее их проверяют по цепочке на наличие родителя с id #container. Можем сделать вывод, что это не очень эффективный подход. Поэтому нам нужно делать наши селекторы как можно менее массивными.

Мы можем исправить ситуацию следующим образом:
// Так будет быстрее
$('#container > input:disabled');

Этот код уменьшает поиск только до элементов input (не все элементы). Но тут мы так же можем использовать методы find или children. Так будет ещё быстрее:
$('#container').children('input:disabled');

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

Тем не менее, всегда полезно знать, что происходит за кулисами - по крайней мере на самом низком уровне.

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

Создание классного эффекта при наведении мышки на изображение

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

Все будет проделано благодаря замечательному фреймворку jQuery.

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

 <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
  
  <script type="text/javascript" src="jquery.min.js"></script>
  <title>Untitled Document</title>
  
  <script type="text/javascript">
      $(function() {
      $(".slideBox").hover(function(){
      $(this).find("img").stop().animate({
      top:-325
      }, 500);
      }, function(){
      $(this).find("img").stop().animate({
      top:0
      }, 500);
      });
      });
 </script>

Теперь в теле документа нам необходимо в слой с классом "slideBox" поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом "content":
<div id="container">
      
  <div class="slideBox">
  <img src="images/picture1.jpg" alt="testing" />
  
  <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
  
  </div>
  </div><!--end slideBox-->
  
  <div class="slideBox">
  <img src="images/picture2.jpg" alt="testing" />
 <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
 </div>
  </div><!--end slideBox-->
  
  </div><!--end container-->

Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код.

На сегодня все! Всем удачи!!!

Добавлено: 09 Мая 2018 12:16:40 Добавил: Андрей Ковальчук

Динамическая загрузка внешних файлов

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

Будет происходить загрузка внешних файлов в три разные вкладки.

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

<script type="text/javascript" src="jquery.tools.min.js"></script>
      <script type="text/javascript">
      $(function() {
 $("ul.css-tabs").tabs("div.css-panes > div", function(i) {
      var pane = this.getPanes().eq(i);
      if (pane.is(":empty")) {
      pane.load(this.getTabs().eq(i).attr("href"));
      }
 });
});
      </script>

Далее заботимся о таблице стилей:
<link rel="stylesheet" type="text/css" href="tabs-no-images.css"/>

Первые два блока кода обязательно должны быть между тегами <head></head>.

И в теле документа прописываем структуру вкладок + ссылки на внешние файлы:
<ul class="css-tabs">
  <li><a href="ajax1.htm">Tab 1</a></li>
 <li><a href="ajax2.htm">Second tab</a></li>
  <li><a href="ajax3.htm">An ultra long third tab</a></li>
  </ul>
<!-- panes -->
      <div class="css-panes">
  <div style="display:block"></div>
  <div></div>
  <div></div>
  </div>

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

Спасибо за внимание! Всего хорошего!

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

Мгновенная проверка правильности введения Email в форму

В данном уроке я расскажу Вам, как сделать проверку верности написания Email адреса в форме с помощью jQuery.

Код очень прост и совсем не грузит сайт. Более того, при использовании данной технологии внешний вид Ваших форм существенно улучшится.

Начнем с HTML

Создадим простое поле формы:

<div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>

Как Вы видите, это простое текстовое поле для email адресов.

CSS

Стили можно поместить как в тот же документ, так и в отдельный файл.
<style>
    #validEmail
    {
    margin-top: 4px;
    margin-left: 9px;
    position: absolute;
    width: 16px;
    height: 16px;
    }
    </style>

jQuery и Javascript

Далее создаем функцию, которая будет проверять Email на регулярные выражения (например, на обязательное наличие @), и при правильном вводе email будет выводить такую иконку , при неправильном - . Также вначале подключаем фреймворк jQuery. В данном коде необходимо помнить про путь к jQuery и картинкам, которые показывают правильно или неправильно ввел юзер Email.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {  
 $("#validate").keyup(function(){
    
    var email = $("#validate").val();
  
    if(email != 0)
    {
    if(isValidEmailAddress(email))
    {
    $("#validEmail").css({
  "background-image": "url('validYes.png')"
    });
    } else {
    $("#validEmail").css({
  "background-image": "url('validNo.png')"
    });
    }
    } else {
    $("#validEmail").css({
  "background-image": "none"
    }); 
    }
  
    });
  
    });
  
    function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
    }
  
  </script>

Данный код, конечно же, необходимо вставить между тегами <head></head>.

Вот и все готово! Всего наилучшего!

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

Красивые всплывающие окна (блоки) с помощью jQuery

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

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

Плагин очень гибок и прост в установке.

Использование плагина

Прежде всего нам необходимо подключить фреймворк и файл плагина.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.meerkat.js"></script>

Далее нам необходимо инициализировать основную функцию:
<script type="text/javascript">
$(document).ready(function(){
meerkat();
});
</script>

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

Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом </body>). Обязательно id должно быть meerkat.
<div id="meerkat">
Meerkat Content Goes Here
</div>

Значения по умолчанию данного плагина будут такими:
meerkat({
showMeerkatOnLoad: 'false',
close: 'none',
dontShow: 'none',
dontShowExpire: 0,
removeCookie: 'none',
meerkatPosition: 'bottom',
animation: 'slide',
animationSpeed: 'slow',
height: 'auto',
background: 'none'
});

Подробнее об опциях плагина:

showMeerkatOnLoad - принимает два значения: true или false. Когда true, плагин будет показываться при вызове функции (при загрузке страницы). Когда false, плагин будет работать только при нажатии на кнопку.
По умолчанию - "false"

close - данная опция принимает любой селектор (к примеру, ".close" или "#close"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт.
По умолчанию - "none"

dontShow - данная опция принимает любой селектор (к примеру, ".dont-show" или "#dont-show"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт и не будет показан до перезагрузки браузера или до истечения определенного количества дней (зависит от dontShowExpire)
По умолчанию - "none"

dontShowExpire - если Вы задаете эту опцию, у Вас есть возможность определить длительность периода "не отображения" данного плагина. Значение может быть в интервале от 0 до 365. Кроме этого можно указать 0.5 (плагин не будет показываться 12 часов). Если укажите 3, тогда не будет работать 3 дня.
По умолчанию - "0"

removeCookie - используется для удаления Cookie, которое создается опцией dontShow. Опция removeCookie принимает любой селектор (к примеру, ".remove-cookie" или "#remove-cookie").
По умолчанию - "none"

meerkatPosition - принимает два значения top или bottom (верх или низ). Тут, я думаю, все понятно.
По умолчанию - "bottom"

animation - 2 значение - slide или fade. Можно варьировать разные типы анимации показа\скрытия плагина.
По умолчанию - "slide"

animationSpeed - скорость анимации. Принимает три значения ("slow", "normal", или "fast") или кол-во милисекунд для анимации (например, 1000).
По умолчанию - "slow"

height - возможно указать высоту блока с помощью всех возможных единиц измерения CSS (px, em, %, auto, и т.д.).
По умолчанию - "auto"

background - можно задать фоновый цвет или изображение. Пример: background: '#000 url(/path/to/bgimage.jpg) no-repeat left top'
По умолчанию - "none".

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

Фавиконки рядом со ссылками

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

Решение для одной ссылки
Если таким образом хочется оформлять ссылки только на один ресурс, то вполне можно обойтись только CSS. A разметке формируем ссылку:

<a href=http://ruseller.com>Ruseller</a>

А в CSS формируем для нее внешний вид:
a[href*="ruseller.com"]{
    padding-left:18px;
    background:url(http://www.google.com/s2/u/0/favicons?domain=ruseller.com) left center no-repeat;
}

Здесь используется сервис Google для фавиконок.

Универсальное решение
В выше приведенном варианте использовался сервис для получения фавиконок от Google. Ему нужно только доменное имя верхнего уровня:

http://www.google.com/s2/u/0/favicons?domain=ruseller.com


Для вытаскивания URL доменного имени можно использовать регулярное выражение:
function getDomain(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}

А с помощью данной функции и jQuery формируется фоновое изображение с фавиконой:
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) +
        ") left center no-repeat",
        "padding-left": "18px"
    });
});

Можно также воспользоваться this.hostname вместо регулярного выражения. Но гарантированной поддержки данного варианта нет.
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname +
        ") left center no-repeat",
        "padding-left": "18px"
    });
});

Используем getFavicon
Есть еще один сервис - getFavicon. Как показала практика, он чуть-чуть медленнее. Но у него есть преимущество - можно использовать полный URL без выделения доменного имени.
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});

Заключение
При реализации данного свойства на сайте нужно помнить о вопросе производительности. Каждое маленькое изображение потребует отдельного запроса.

У Яндекса есть сервис, который формирует спрайт из фавиконок, например:
http://favicon.yandex.net/favicon/google.com/yandex.ru/ruseller.com

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

Создание одинаковых по высоте колонок с помощью JavaScript

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

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

Шаг №1

HTML

<div id="left_column">
      <p>Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum
      text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.</p>
      </div>
<div id="right_column">
      <p>Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column.
      Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text
      to fill up the right column.</p>
      </div>

CSS
#left_column {
float: left;
width: 180px;
border: solid 1px #ccc;
padding: 10px;
margin: 0 20px 0 0;
}
#right_column {
      float: left;
      width: 180px;
      border: solid 1px #ccc;
      padding: 20px;
      }

Ключевами значениями в стилях являются толщина границы (1px) и отступ (20px), так как эти значения нам понадобятся в расчетах действительной высоты колонок.

Как Вы видите у нас 2 колонки с разными высотами, так как в одной из колонок больше текста. Мы бы могли выставить высоту колонок с помощью стилей, однако это не было бы хорошим решением для динамического контента; и совсем плохим решением для 2-х колоночного шаблона, который используется на всех страницах сайта.

Шаг №2

Давайте углубимся в наш JavaScript и проведем некоторые расчеты. Для начала мы поместим наши колонки в переменную используя getElementById для легких манипуляций:
var myLeftColumn = document.getElementById("left_column");
      var myRightColumn = document.getElementById("right_column");

Далее, мы извлекаем полную высоту каждой колонки обращаясь к свойству offsetHeight:
var myLeftHeight = myLeftColumn.offsetHeight;
      var myRightHeight = myRightColumn.offsetHeight;

Высота полученная с помощью offsetHeight - это высота части с контентом + отступы + толщина границ. Мы не можем изменить свойство offsetHeight элемента, мы можем только его узнать, что поможет нам в дальнейшем.

Шаг №3

Далее уже немного сложнее. На данном этапе мы узнаем точные значения границ, отступа, чтобы их использовать в дальнейших вычеслениях. JavaScript позволяет обратиться к значению любого CSS элемента используя объект style вот так:
var myTopBorder = myLeftColumn.style.borderTopWidth;

Однако, объект style дает нам доступ к инлайновому CSS или CSS, который задан с помощью JavaScript. Значит в примере выше переменная “myTopBorder” не будет иметь значения, так как все стили находятся в отдельном файле (таблице стилей). Для того, чтобы извлечь это значение (вне зависимости от их расположения), нам необходим кроссбраузерная функция, которая получит доступ к таблице стилей. К счастью, такое решение есть. Ниже представлен код, который мы включим в наш JavaScript файл для помощи вычесления так называемого "Рассчитанного стиля" элемента.
function retrieveComputedStyle(element, styleProperty)
      {
var computedStyle = null;
  if (typeof element.currentStyle != "undefined")
      {
      computedStyle = element.currentStyle;
      }
      else
      {
      computedStyle = document.defaultView.getComputedStyle(element, null);
      }
      return computedStyle[styleProperty];
      }

Наша функция берет 2 параметра: элемент, к которому мы обращаемся (в нашем примере это будет слой “left_column” или “right_column”), а также свойство, которое нам необходимо узнать. В данном уроке, это может быть верхний отступ. Внутри нашей функции мы объявляем местную переменную computedStyle, которая в конечном счете сохранит "возвращенное" значение.

Далее у нас идет условный оператор if, который обрабатывает два метода используемые браузерами для доступа к внешним файлам. Это сделано для того, чтобы данный метод работал во всех браузерах, так как у Internet Explorer немного отличается алгоритм работы.

Шаг №4

Далее давайте используем следующую функцию для рассчета точного количества границ и отступов обоих колонок:
var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth");
      var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth");
      var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop");
      var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom");
      var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth");
      var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth");
      var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop");
      var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom");

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

Шаг №5

Далее нам необходимо суммировать все дополнительные значения, чтобы вся сумма была доступна в конце кода. Но помните, что значения, с которыми мы имеем дело это CSS величины, которые в конце содержат единицу измерения. К примеру, толщина верхней границы будет не просто "1" - это будет строка (не цифра) - читай 1 пиксель “1px”. Чтобы справиться с этим нам необходимо сделать 2 вещи: 1) убрать окончание “px”; 2) преобразовать переменную в цифру, чтобы JavaScript понял, что мы хотим "добавлять и отнимать" (обычно делают с цифрами), а не объединять строки (что обычно делают со строками). ВОт код для этого:
var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", ""));
      var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", ""));
      var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber;

      var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", ""));
      var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", ""));
      var myRightExtras = myRightBorderNumber + myRightPaddingNumber;

Следует обратить внимание на переменные myLeftExtras и myRightExtras. Вы увидете далее зачем они нам.

Шаг №6

Теперь мы обращаемся к начальным переменным, в которых сохранили полную высоту каждой колонки, и мы выполняем простой тест на то, какая из них выше. Как только мы это узнаем, мы меняем высоту короткой колонки на необходимое значение.
if (myLeftHeight > myRightHeight) {
myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px";
}
else {
      myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px";
      }

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

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

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

В нашем уроке рассмотрен пример в 2-я колонками, но можно применить данный код и на трех колонках (с изменениями в коде, конечно).

Всего наилучшего Вам, уважаемые посетители нашего сайта!

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

Создание уличного билборда

Сегодня мы создадим "уличный билборд" на просторах Интернета :).

В данном уроке мы будем использовать много изображений, CSS и jQUery для создания эффекта уличного билборда с вращающимися рекламами. Идея очень проста: один набор порезанных изображений будет сменяться другим. Мы будем уменьшать ширину каждого "первого" изображения, и увеличивать ширину каждого "второго". Таким образом будет создаваться необходимый эффект.


Начнем..

HTML

У нас будет много частей одного большого изображения - по 22 части для каждой рекламы:

<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
<img class="slice_4" src="ads/ad1_slice04.jpg"/>
<img class="slice_5" src="ads/ad1_slice05.jpg"/>
<img class="slice_6" src="ads/ad1_slice06.jpg"/>
<img class="slice_7" src="ads/ad1_slice07.jpg"/>
<img class="slice_8" src="ads/ad1_slice08.jpg"/>
<img class="slice_9" src="ads/ad1_slice09.jpg"/>
<img class="slice_10" src="ads/ad1_slice10.jpg"/>
<img class="slice_11" src="ads/ad1_slice11.jpg"/>
<img class="slice_12" src="ads/ad1_slice12.jpg"/>
<img class="slice_13" src="ads/ad1_slice13.jpg"/>
<img class="slice_14" src="ads/ad1_slice14.jpg"/>
<img class="slice_15" src="ads/ad1_slice15.jpg"/>
<img class="slice_16" src="ads/ad1_slice16.jpg"/>
<img class="slice_17" src="ads/ad1_slice17.jpg"/>
<img class="slice_18" src="ads/ad1_slice18.jpg"/>
<img class="slice_19" src="ads/ad1_slice19.jpg"/>
<img class="slice_20" src="ads/ad1_slice20.jpg"/>
<img class="slice_21" src="ads/ad1_slice21.jpg"/>
<img class="slice_22" src="ads/ad1_slice22.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
<img class="slice_4" src="ads/ad2_slice04.jpg"/>
<img class="slice_5" src="ads/ad2_slice05.jpg"/>
<img class="slice_6" src="ads/ad2_slice06.jpg"/>
<img class="slice_7" src="ads/ad2_slice07.jpg"/>
<img class="slice_8" src="ads/ad2_slice08.jpg"/>
<img class="slice_9" src="ads/ad2_slice09.jpg"/>
<img class="slice_10" src="ads/ad2_slice10.jpg"/>
<img class="slice_11" src="ads/ad2_slice11.jpg"/>
<img class="slice_12" src="ads/ad2_slice12.jpg"/>
<img class="slice_13" src="ads/ad2_slice13.jpg"/>
<img class="slice_14" src="ads/ad2_slice14.jpg"/>
<img class="slice_15" src="ads/ad2_slice15.jpg"/>
<img class="slice_16" src="ads/ad2_slice16.jpg"/>
<img class="slice_17" src="ads/ad2_slice17.jpg"/>
<img class="slice_18" src="ads/ad2_slice18.jpg"/>
<img class="slice_19" src="ads/ad2_slice19.jpg"/>
<img class="slice_20" src="ads/ad2_slice20.jpg"/>
<img class="slice_21" src="ads/ad2_slice21.jpg"/>
<img class="slice_22" src="ads/ad2_slice22.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>

Из этих изображений (22 кусочка по 35 пикселей каждый) у нас получится одно 770 пикселей на 340.

CSS

Стили для билборда:
.billboard{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
background:transparent url(../images/billboard.png) no-repeat 0px 0px;
}

Для позиционирования элемента в центре страницы, мы задаем значение left на 50% и left margin на негативное значение половины ширины элемента.

Контейнер для реклам будет иметь такие же стили, как и билборд, кроме фонового изображения. Мы делаем это для того, чтобы позиционировать элементы рекламы в том же месте, где и билборд. Мы не хотим размещать наши рекламы внутри билборда, так как нам необходимо, чтобы билборд был над ними. Поэтому мы используем этот трюк создавая элемент со схожим позиционированием.
.container{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
}
.ad{
width:800px;
height:336px;
position:relative;
margin:35px 0px 0px 60px;
background-color:#333;
}
.ad_1 img{
width:35px;
height:336px;
position:absolute;
}
.ad_2 img{
width:0px;
height:336px;
margin-left:18px;
position:absolute;
}

Кусочки рекламы имеют ширину 35 пикселей. Кусочки второй рекламы также, но нам необходимо задать им ширину 0. Нам также необходимо задать left margin вторых кусочков на 18 пикселей, поскольку хотим создать вращающийся эффект. Об этом подробнее немного ниже по тексту.

Единичные кусочки необходимо правильно позиционировать:
.slice_1{left:0px;}
.slice_2{left:36px;}
.slice_3{left:72px;}
.slice_4{left:108px;}
.slice_5{left:144px;}
.slice_6{left:180px;}
.slice_7{left:216px;}
.slice_8{left:252px;}
.slice_9{left:288px;}
.slice_10{left:324px;}
.slice_11{left:360px;}
.slice_12{left:396px;}
.slice_13{left:432px;}
.slice_14{left:468px;}
.slice_15{left:504px;}
.slice_16{left:540px;}
.slice_17{left:576px;}
.slice_18{left:612px;}
.slice_19{left:648px;}
.slice_20{left:684px;}
.slice_21{left:720px;}
.slice_22{left:756px;}

Позиционируя элементы на один пиксель левее их собственного размера, мы создаем небольшой просвет между ними. Теперь значение left margin 18 пикселей (половина кусочка + расстояние). Мы устанавливаем это, так как хотим наши кусочки появляться (или исчезать) из (или в) их центра. Если мы просто зададим ширину кусочка на 0, тогда не будет эффекта вращения.

JavaScript

Теперь мы создадим простую функцию. Она будет заставлять первые кусочки исчезнуть (менять ширину на 0). Для эффекта вращения добавляем значение left margin = 18 пикселей.

По мере исчезновения первых кусочков, мы показываем вторые убирая left margin = 18 пикселей и придавая им ширину 35 пикселей. Мы вызываем нашу функцию таким образом:
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});

Весь скрипт выглядит так:
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'35px'},
speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout);
});
});
}
});

Заменив значения в строке со словом rotate (500 и 3000) можно изменить скорость анимации и задержку.

Вот и все готово! :)

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

Динамические вкладки с помощью jQuery

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

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

Какую же информацию можно разместить в этих вкладках? Это возможно наиболее важный вопрос. Я бы сказал, что Вам необходимо использовать подобные вкладки когда Вам необходимо выполнить набор операций в одно и то же время. К примеру, Вы можете искать и заменять текст во всех вкладках одним действием, а потом сохранить все изменения еще одним. Далее, эти вкладки также будут полезны для предоставления информации к прочтению (тексты, отчеты). Как обстоит дела с формами? Что если мы создадим приложение, которое будет позволять управлять разной информацией в одно и то же время? В одной вкладке, я могу изменять данные о наличии товара, в то время как в другой я могу изменять совсем другую информацию. Звучит довольно интересно, но конечно воплотить в жизнь это нелегко.

Внедрение

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

Ниже представлена HTML структура. Мы будем использовать атрибут rel для создания ID элементов и атрибут title для создания контента. Заметьте, что вместо использования атрибута title, Вы можете загружать документы с помощью AJAX.

<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
</ul></div><div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>

План действий у нас такой: я нажимаю на ссылку DOCUMENT 1, открывается новая вкладка с названием DOCUMENT 1 и контентом "This is the content of Document1". На вкладке будет красный крестик, который позволит закрыть вкладку.
$("#documents a").click(function() {
    addTab($(this));
});

Этот код добавит событие клика для каждой ссылки документов, а также передаст саму ссылку к функции addtab.
function addTab(link) {
    // Спрятать другие вкладки
    $("#tabs li").removeClass("current");
    $("#content p").hide();
    
    // Добавить новую вкладку с контентом
    $("#tabs").append("<li class='current'><a class='tab' id='" +
        $(link).attr("rel") + "' href='#'>" + $(link).html() +
        "</a><a href='#' class='remove'>x</a></li>");
    $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
        $(link).attr("title") + "</p>");
    // set the newly added tab as curren
    $("#" + $(link).attr("rel") + "_content").show();
}

Функция addtab сперва спрячет все вкладки (если они есть) и удалит класс current со всех вкладок. Этот класс задает другой цвет для активной вкладки. Далее, функция создаст новую вкладку (элемент li), который будет содержать ссылку для названия вкладки, и еще одну ссылку для закрытия. Контент добавляется таким же образом. В конце скрипт устанавливает нажатую вкладку в качестве текущей.

Теперь добавим немного функциональности нашим вкладкам. При нажатии шапки вкладки должен отображаться ее контент. При нажатии на крестик вкладка должна убраться. Для этих 2-х сценариев будем использовать метод live, который привяжет события к элементам уже существующим и тем, которые появятся позже.
$('#tabs a.tab').live('click', function() {
    // Взять название вкладки
    var contentname = $(this).attr("id") + "_content";
    // hide all other tabs
    $("#content p").hide();
    $("#tabs li").removeClass("current");
    // Показать текущую вкладку
    $("#" + contentname).show();
    $(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
    // Взять название вкладки
    var tabid = $(this).parent().find(".tab").attr("id");
    // убрать вкладку и контент
    var contentname = tabid + "_content";
    $("#" + contentname).remove();
    $(this).parent().remove();
});

Первая функция добавит контент, вторая - наоборот уберет. Осталось еще несколько вещей. Во-первых, нам необходимо внедрить ограничение, которое будет следить за тем, чтобы вкладка была открыта только 1 раз. Для этого мы расширим нашу функцию addtab
// Если вкладка существует в списке, тогда
if ($("#" + $(link).attr("rel")).length != 0)
    return;
И последнее, что нам необходимо сделать - это случай, когда нам необходимо удалить вкладку. После удаления вкладки нам необходимо позаботиться о том, чтобы отображалась другая вкладка. По умолчанию, это будет первая в списке, но также можно настроить, чтобы отображалась следующая или предыдущая.
// если нет текущей вкладки и если они еще есть, тогда показывай первую в списке
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
    // найти первую вкладку
    var firsttab = $("#tabs li:first-child");
    firsttab.addClass("current");
    // взять ее ссылку и показать контент
    var firsttabid = $(firsttab).find("a.tab").attr("id");
    $("#" + firsttabid + "_content").show();
}

Заключение

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

Есть над чем подумать! :) Удачи в этом нелегком деле!

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

Мега меню с помощью jQuery

В сегодняшнем уроке Вы узнаете как сделать функциональное мега меню для Вашего сайта.

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

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

В самом начале документа вставляем фреймворк jQuery, таблицу стилей и вспомогательную функцию.

Javascript

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

      jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>

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

Если на странице будет несколько меню, тогда необходимо будет несколько раз их инициализировать. Для этого достаточно нужное количество раз повторить строку jkmegamenu.definemenu() с классами, которые относятся к этому меню.

Далее в любом месте документа вставляем ссылку с id="megaanchor". Именно при наведении мышки на эту ссылку у нас будет появляться меню. После ссылки необходимо оформить разметку меню. Как Вы видите, все предельно просто: с помощью заголовков 3-го уровня и неупорядоченных списков мы можем создать любую конфигурацию.

HTML
<a href="#" id="megaanchor">Это Мега Меню :)</a>
....
....
<div id="megamenu1" class="megamenu">
<div class="column">

  <h3>Web Development</h3>
  <ul>
  <li><a href="#">JavaScript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>

  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>
  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
  <h3>Web Development</h3>
  <ul>
  <li><a href="#">JavaScript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>
  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>

  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
</div>

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

В скрипте jkmegamenu.js есть два значения, которые можно изменить для модификации скорости и продолжительности появления меню:
effectduration: 300, //продолжительность анимации в милисекундах
      delaytimer: 200, //задержка перед тем, как меню должно спрятаться в милисекундах

На сегодня все! Хороших Вам выходных!

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

Красивое решение для отображения внешних файлов

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

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

В верху документа необходимо подключить скрипты и таблицы стилей:

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" title="Main stylesheet" charset="utf-8" />
		<script src="js/jquery-1.3.min.js" type="text/javascript"></script>
         <script src="js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

Теперь достаточно в любом месте тела документа добавить обычную ссылку с атрибутом rel="prettyPopin". В нашем примере Вам представлен неупорядоченный список из 3-х ссылок:
<ul class="noBull">
					<li><a href="ajax/regular.html" rel="prettyPopin">Regular content (defined width, fixed)</a></li>
					<li><a href="ajax/page-1.html" rel="prettyPopin">Content with paging (defined width, follow the scroll)</a></li>
					<li><a href="ajax/form.html" rel="prettyPopin">Ajax form (width inherited from the &lt;form&gt;, follow the scroll)</a></li>
				</ul>

И в конце самое интересное. Необходимо задать параметры функции вызова всплывающих модальных окон.

Делается это следующим образом:
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
			$("a[rel^='prettyPopin']:eq(1)").prettyPopin({width:300});
			$("a[rel^='prettyPopin']:eq(2)").prettyPopin({
				callback : function(){
					alert('This popin has a callback');
				}
			});
		});
		</script>

Как Вы видите ширина задается с помощью width. Можно добавить функцию колбека (при закрытии окна выводится небольшое предупреждение или полезная информация) с помощью callback : function()

Кроме это в демо версии представлена даже возможность вставлять работающие формы с загрузкой результата работы прямо в этом же окне. Вообще, для того, чтобы оставаться в модальном окне во время нажатия на ссылку, у ссылки должен быть атрибут rel="internal".

Все готово. Удачи!

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

Очень красивое меню для сайта

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

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

HTML

<ul class="tabs">
      <li><a href="#">Dropdown 1</a>
      <ul class="dropdown">

      <li><a href="#">Menu item 1</a>
      <ul class="dropdown">
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 1</a></li>
      </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>

      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>

      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>
      </li>
      <li><a href="#">Dropdown 2</a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>

      </li>
      <li><a href="#">Dropdown 3</a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>
      </li>

      </ul>

Заметьте, в данном меню используется только два класса tabs и dropdown.

Первый используется для создания меню по горизонтали, второй - для оформления выпадающих подменю.
CSS
/* tabs
      *************************/
      
      ul.tabs
      {
      display: table;
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
      }
      
      ul.tabs li
      {
      margin: 0;
      padding: 0;

      list-style: none;
      display: table-cell;
      float: left;
      position: relative;
      }
      
      ul.tabs a
      {
      position: relative;
      display: block;
      }
      
      /* dropdowns
      *************************/
      
      ul.dropdown
      {
      margin: 0;
      padding: 0;
      display: block;
      position: absolute;
      z-index: 999;
      top: 100%;
      width: 250px;
      display: none;
      left: 0;
      }
      
      ul.dropdown ul.dropdown
      {
      top: 0;
      left: 95%;
      }
      
      ul.dropdown li
      {
      margin: 0;
      padding: 0;
      float: none;
      position: relative;
      list-style: none;
      display: block;
      }
      
      ul.dropdown li a
      {
      display: block;
      }

jQuery
$(function () {
      $('.dropdown').each(function () {
      $(this).parent().eq(0).hover(function () {
      $('.dropdown:eq(0)', this).show();
      }, function () {
      $('.dropdown:eq(0)', this).hide();
      });
      });
      });

Данный код просто уникальный. Он найдет любой элемент с классом dropdown и превратит его в рабочее меню.

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

Давайте приступим.

Нам понадобится несколько изображений. Вот они:

Измененный HTML

- все меню обернули в слой #menu
- добавили элементы h4 для более сложной структуры
- добавили класс “hasmore” к элементам меню, содержащим выпадающие подменю
- добавили класс “last” к последнему элементу меню
- добавили элемент <span> вокруг элементов главного меню
<div id="menu">
      <ul class="tabs">
      <li><h4><a href="#">In the blog »</a></h4></li>
      <li class="hasmore"><a href="#"><span>Recent</span></a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li class="last"><a href="#">Menu item 6</a></li>
      </ul>
      </li>
      <li class="hasmore"><a href="#"><span>Topics</span></a>
      <ul class="dropdown">
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li class="last"><a href="#">Topic 4</a></li>
      </ul>
      </li>
      <li><a href="#"><span><strong><img src="images/feed-icon-14x14.png" width="14" height="14" alt="RSS"> Subscribe to RSS</strong></span></a></li>
      <li><h4><a href="#">Elsewhere »</a></h4></li>
      <li><a href="#"><span>About</span></a></li>
      <li class="hasmore"><a href="/about/#networks"><span>Networks</span></a>
      <ul class="dropdown">
      <li><a href="#">Twitter</a></li>
      <li><a href="#">posterous</a></li>
      <li><a href="#">SpeakerSite</a></li>
      <li><a href="#">LinkedIn</a></li>
      <li class="last"><a href="#">See more…</a></li>
      </ul>
      </li>
      <li><a href="#"><span>Bookmarks</span></a></li>
      </ul>

      </div>

Измененный CSS
/* hack reset (for production, use Yahoo! reset CSS)
      *************************/
      
      .*
      {
      margin: 0;

      padding: 0;
      }
      
      /* body
      *************************/
      
      body
      {
      font: 14px/21px Georgia, serif;
      color: #370707;
      background: #e3d79b url(images/mainbg.jpg) left 40px repeat-x;
      }
      
      /* links

      *************************/
      
      a:link, a:visited, a:hover, a:active
      {
      text-decoration: none;
      }
      

      /* inline elements
      *************************/
      
      strong
      {
      font-weight: bold;
      }
      
      /* menu-specifc
      *************************/
      
      #menu
      {
      position: fixed;
      z-index: 5;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #ffb35a url(images/topbg.gif) repeat-x;
      border-bottom: 1px solid #000;
      }
      
      #menu ul
      {
      margin: 0 auto;
      }
      
      #menu ul li.hasmore
      {
      background: url(images/drophighlight.png) no-repeat center 27px;
      }
      
      #menu ul li h4
      {
      margin: 0;
      }
      
      #menu ul li h4 a
      {
      font-size: 14px;
      color: #000;
      font-weight: bold;
      padding: 0 15px;
      }
      
      #menu ul li a
      {
      color: #9b2021;
      padding-left: 4px;
      }
      
      #menu ul li a img
      {
      vertical-align: middle;
      }
      
      #menu ul li a:hover
      {
      background: url(images/topselectionleft.png) top left no-repeat;
     }
      
      #menu ul li a span
      {
      display: block;
      padding: 0 15px 0 11px;
      }
      
      #menu ul li a:hover span
      {
      background: url(images/topselectionright.png) top right;
      }

      
      #menu ul.dropdown
      {
      padding: 10px;
      background-image: url(images/dropdown.png);
      overflow:hidden;
      border-bottom: 1px solid #dc902f;
      width: 290px;
      }
      
      #menu ul.dropdown li a
      {
      border-bottom: 1px solid #e5cd8e;
      line-height: 30px;
      overflow: hidden;
      height: 30px;
      }
      
      #menu ul.dropdown li.last a
      {
      border-bottom-width: 0;
      }
      
      #menu ul.dropdown li a:hover
      {
      background: url(images/menuarrow.png) no-repeat left center;
      }
      
      #menu ul li h4 a:hover
      {
      background-image: none;
      }

Измененный jQuery

- использовали hoverIntent jQuery плагин для создания красивого эффекта при наведении мышки на меню
- использовали easing jQuery плагин для более плавных эффектов
- все изображения загружаются заранее
- поменяли функции show() и hide() на slideDown() и fadeOut()
$(function () {
      
      $('.dropdown').each(function () {
      $(this).parent().eq(0).hoverIntent({
      timeout: 100,
      over: function () {
      var current = $('.dropdown:eq(0)', this);
      current.slideDown(100);
      },
      out: function () {
      var current = $('.dropdown:eq(0)', this);
      current.fadeOut(200);
      }
      });
      });
      
      $('.dropdown a').hover(function () {

      $(this).stop(true).animate({paddingLeft: '35px'}, {speed: 100, easing: 'easeOutBack'});
      }, function () {
      $(this).stop(true).animate({paddingLeft: '0'}, {speed: 100, easing: 'easeOutBounce'});
      });
      
      pic1 = new Image(310, 672);
      pic1.src = "images/dropdown.png";

      
      pic2 = new Image(4, 40);
      pic2.src = "images/dropselectionleft.png";
      
      pic3 = new Image(394, 40);
      pic3.src = "images/dropselectionright.png";
      
      });

Меню готово. Пользуйтесь :)

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