K_E_V_in » javascript

Всплывающая подсказка на JQuery

K_E_V_in — Fri, 20 Jan 2012 10:50:25 +0000

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

Для начала займемся подключением скрипта. Так Coda Popup Bubbles – это плагин для jQuery, нужно будет подключить и его. Скачать скрипт Coda Popup Bubbles можно здесь. Откройте ссылку и сохраните файл на компьютере. Затем залейте к себе на сайт. Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы):

1 2	<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> <script src="js/jquery.coda-bubble.sp.js" type="text/javascript"></script>

Все, скрипт подключен. Теперь подготовим таблицу стилей CSS для правильного отображения подсказок Coda Popup Bubbles. Стили можно прописать как в файле CSS, так и в теге STYLE, который нужно разместить в разделе HEAD. Представленный код предназначен для размещения его в теле HEAD:

1
2
3
4

Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так:

1
2
3
4

<div class="bubbleInfo">
<div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div>
<div class="popup">Тут сама подсказка</div>
</div>

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

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

На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях!

Взято тут

Читайте про конкурс SEOCAFEинфошность и принимайте активное участие!

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

K_E_V_in — Wed, 18 Jan 2012 20:29:47 +0000

Сегодня рассмотрим простое решения для реализации горизонтального выпадающего меню.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Справка</a></li>
<li><a href="#">О программе</a>
<ul>
<li><a href="#">Интерфейс </a></li>
<li><a href="#">Возможности</a></li>
<li><a href="#">Быстрые клавиши</a></li>
</ul>
</li>
<li><a href="#">Обучение</a>
<ul>
<li><a href="#">Уроки</a></li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Работа с HTML</a></li>
<li><a href="#">Работа с CSS </a></li>
<li><a href="#">Работа с PHP</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Автоматизация</a></li>
<li><a href="#">Секреты</a></li>
</ul>
<br style="clear: left" />
</div>

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

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

1. Скачайте файл с горизонтальным выпадающим меню.

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

3. Укажите путь к стилям CSS, которые находятся в скачанном Вами файле и называется jqueryslidemenu.css. Адрес прописывается между тегами … следующим образом:

1	<link rel="stylesheet" type="text/css" href="/jqueryslidemenu.css"/>

4. Подключаем последнюю версию библиотеки jQuery с серверов гугла и скрипт активации меню jqueryslidemenu.js , находящийся в скачанном Вами файле. Прописываем между тегами … строки:

1
2
3

Кому лень разбираться, можете скачать меню

как покрасить литые диски фото

Jcarousel: ошибка No width/height set for items в опере и хроме

K_E_V_in — Wed, 23 Nov 2011 13:41:04 +0000

Встретил такую досадную ошибку на одном проекте, где используется плагин JQuery – JCarousel. Причем ошибка вылазила только в Опере и Хроме. Выглядит сее недорузамение так:

Мозилла отлично кушала плагин и говорила спасибо. Стало интересно, из-за чего происходит эта дрянь, и удалось-таки докопаться и найти решение. Да, решение нельзя назвать супер-пупер оптимальным, но для конкретного проекта оно будет работать только в путь! А главное, решается ошибка Jcarousel: No width/height set for items. А это нам и нужно. Не забывайте, что вся последующая раскрутка сайта может сойти на “нет” из-за таких ошибок, ведь поисковики могут подумать даже то, что это вредоносный код и применить санкции к вашему сайту.

Вот простая инструкция по решению проблемы с этой ошибкой. Итак, открываем файл jcarousel.js и ищем там алерт с этой ошибкой.

1	alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');

Первым желанием будет закомментировать эту строку. Попробуйте! После этого плагин просто перестанет работать. Круто, да? Поэтому давайте посмотрим на условие, после которого возникает эта самая ошибка. Если переменная d равна нулю:

1	if (d == 0)

Отлично! Чуть выше идет инициализация этой переменной:

1	var d =this.dimension(e);

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

1	var d = this.dimension(e); alert (d);

Теперь мы получим числовое значение этой переменной. У меня получилось 126. Теперь жестко присваиваем переменной её значение и комментим всё остальное. Получится примерно так:

1 2	var d = 126;//this.dimension(e); //alert (d);

После чего ошибка Jcarousel: No width/height set for items в опере и хроме пропадает, а плагин начинает полноценно работать сразу с загрузкой страницы. Пользуйтесь!

Красивая галерея изображений для товаров в интернет-магазине

K_E_V_in — Mon, 19 Sep 2011 16:20:03 +0000

Есть много способов представления изображений в интернет-магазине: удачных и не очень. Сегодня рассмотрим модное “западное” представление товара. А именно, когда у товара не одна картинка, и они плавно изменяются. Выглядит это дело примерно так:

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

Для этого нам понадобится JQuery и плагинчик SlideJS к этому фреймворку. Скачать пример можно по ссылке. Там всё понятно, что к чему. Пользуйтесь!

Мы занимаемся оптимизацией, продвижением сайтов, SEO оптимизацией и продвижение сайтов в Киеве и по всей Украине

Интересная навигация со скольжением

K_E_V_in — Mon, 19 Sep 2011 10:38:52 +0000

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

Как работает вживую можно глянуть тут. Пример использует библиотеку jQuery.

Правда, красиво? Сейчас попытаемся это реализовать, чтобы вы могли вставить в проекте, который описывает, например, автомобили Ауди со всем разнообразием модельного ряда.

Всё это делается в несколько простых шагов: создается разметка html, описываются стили css, и вносится яваскрипт код. Рассмотрим всё последовательно.

HTML-размметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<div class="container">
<div id="container_wide">
<div class="product_container" id="product_browser">
<a href="#"><img src="img/browser/Chrome.png"/></a>
<a href="#"><img src="img/browser/Safari.png"/></a>
<a href="#"><img src="img/browser/Firefox.png"/></a>
<a href="#"><img src="img/browser/IE.png"/></a>
<a href="#"><img src="img/browser/Maxthon.png"/></a>
<a href="#"><img src="img/browser/Opera.png"/></a>
</div>
<div class="product_container" id="product_apple">
<a href="#"><img src="img/apple/iMac.png"/></a>
<a href="#"><img src="img/apple/MacBook.png"/></a>
<a href="#"><img src="img/apple/MacMini.png"/></a>
<a href="#"><img src="img/apple/iPhone.png"/></a>
<a href="#"><img src="img/apple/Macpro.png"/></a>
</div>
<div class="product_container" id="product_construction">
<a href="#"><img src="img/construction/01.png"/></a>
<a href="#"><img src="img/construction/02.png"/></a>
<a href="#"><img src="img/construction/03.png"/></a>
<a href="#"><img src="img/construction/04.png"/></a>
</div>
<div class="product_container" id="product_cake">
<a href="#"><img src="img/cake/01.png"/></a>
<a href="#"><img src="img/cake/02.png"/></a>
<a href="#"><img src="img/cake/03.png"/></a>
<a href="#"><img src="img/cake/04.png"/></a>
<a href="#"><img src="img/cake/05.png"/></a>
<a href="#"><img src="img/cake/06.png"/></a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<a href="#" class="product_nav" id="nav_browser">Браузер</a>
<a href="#" class="product_nav" id="nav_apple">Apple</a>
<a href="#" class="product_nav" id="nav_construction">Стройка</a>
<a href="#" class="product_nav" id="nav_cake">Пироги</a>
</div>

CSS-стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

* {
font-family: Arial, "Free Sans";
}
.container {
border: 5px solid #0099cc;
width: 700px;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
padding: 10px 0;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
}
#container_wide {
width: 2800px;position: relative;
}
.product_container {
text-align: center;
width: 700px;
float: left;
position: relative;
}
.product_container a {
margin: 0 12px;
position: relative;
}
.nav {
width: 700px;
background: #0099cc;
margin: 0 auto;
text-align: center;
border: 5px solid #0099cc;
border-bottom-width: 10px;
-webkit-border-radius: 0 0 .3em .3em;
-moz-border-radius: 0 0 .3em .3em;
border-radius: 0 0 .3em .3em;
}
.nav a {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
margin-right: 10px;
font-weight: bold;
text-decoration: none;
}
.nav a:hover {
color: #e3e3e3;
}

JS- код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

$(document).ready(function() {
var displayed = "product_browser";
var cindex = 0; // Текущий индекс (выводимый раздел)

function loopMoveLeft(el, move) {
if (el.length == 1) {
setTimeout(function() {
el.animate({ left: move }, {
duration: 'slow',
easing: 'easeOutBounce'
});
loopMoveLeft(el.next(), move);
}, 100);
}
}

function loopMoveRight(el, move) {
if (el.length == 1) {
setTimeout(function() {
el.animate({ left: move }, {
duration: 'slow',
easing: 'easeOutBounce'
});
loopMoveRight(el.prev(), move);
}, 100);
}
}

function slideItem(obj_el) {
var product = $(obj_el).attr("id").replace("nav_", "");
var contid = 'product_' + product;

// Текущий отображаемый элемент
var elFirst = $("#"+displayed+" a:first-child");
var elLast = $("#"+displayed+" a:last-child");
var total_el = $("#"+displayed).children().length;

var index = $(obj_el).index();

// Новый элемент для вывода
var el_f = $("#"+contid+" a:first-child");
var el_l = $("#"+contid+" a:last-child");
var total_new = $("#"+contid).children().length;

var movement = -700 * index;

if (cindex > index) {
loopMoveRight(elLast, movement);
setTimeout(function() {
loopMoveRight(el_l, movement)
}, (total_el + 1) * 100);
} else if (cindex < index) {
loopMoveLeft(elFirst, movement);
setTimeout(function() {
loopMoveLeft(el_f, movement)
}, (total_el + 1) * 100);
}

cindex = index;
displayed = contid;

return (total_el + 5 + total_new) * 100;
}

var timeout;

$(".product_nav").click(function() {
$(".product_nav").unbind('click');
timeout = slideItem(this);

// Защита от дурака
setTimeout(function() {
$(".product_nav").bind('click', function() {
timeout = slideItem(this);
});
}, timeout);
});
});

Вот, в принципе, и всё. Удачного применения! Если не сложно, укажите в комментах, на каких сайтах использовали эту прикольную штуку. Заранее спасибо!

Знаете ли вы, что покупка подержаных авто в сургуте с целью последующего доведения до ума и продажи является очень выгодным бизнесом?

Полноэкранная галерея на Jquery

K_E_V_in — Thu, 25 Aug 2011 13:05:46 +0000

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

Выглядит эта красота примерно так, тут демо:

Скачать можно с моего сайта последнюю на сегодня версию. Тыцк!

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

Спонсор поста: ADVANCE Рекламное агентство – радио реклама, телевидение, пресса, сувенирная продукция, дизайн, полиграфия, аудио-видео, реклама на транспорте, веб-сайты

Красивое Lava-lamp меню для сайта на jQuery

K_E_V_in — Wed, 24 Aug 2011 11:25:12 +0000

Правда, красивое меню? Причем и реализовать его очень легко качайте готовый плагин jquery с примером использования. Там всё просто, думаю, что разобраться труда не составит.

Обратите внимание на реализацию градиентов. Всё делается через CSS, и это здорово!

Кстати, из всех фильмов про роботов, фильм Трансформеры. Первая часть я считаю самым зрелищным и эпическим. А вы?

Twirlie – простой и красивый слайдер Jquery

K_E_V_in — Sun, 14 Aug 2011 20:09:47 +0000

Слайдеров стало огромное количество, а вот таких, чтобы были простыми и понятными – по прежнему очень мало. Сегодня хочется предложить вашему вниманию свеженькую “примочку” для Jquery, которая называется Twirlie. Двумя словами – это самый обыкновенный слайдер, но в этом и его прелесть. А использоваться он может где угодно: хоть в интернет-магазине конструкторов лего.

Покажем, как с ним нужно работать

Для начала подключим необходимые файлы в разделе head (как будто парики одеваем):

1
2
3

HTML-код слайдера выглядит примерно так:

1
2
3
4
5
6
7
8

JS-код вызова функций слайдера

1
2
3

Для управления слайдером, можно добавить onclick-функцию, например, так:

1	<a href="#" onclick="$('#slider').gotoSlide(2);">Слайд #2!</a>

Для настройки Twirlie, нужно прописать опции прямо в теле функции twirlie

1
2
3
4
5

$('slider selector').twirlie({
опция1:значение,
опция2:значение,
опция3:значение
});

Здесь параметры:
- transtime – время задержки одного кадра, по умолчанию 500
- nextSel - указывает css – селектор для перехода к следующему слайду. По умолчанию это .next
- prevSel – то же, только переход к предыдущему кадру. По умолчанию .prev

Скачать Twirlie – простой и красивый слайдер Jquery можно на моем сервере: twirlie-1.1

Лично я в своих проектах буду использовать этот слайдер. А сейчас хочется немного отдохнуть и почитать коллективный блог о раскрутке сайта и заработке в интернет. До встречи!

Inspired Checkbox – необычные чекбоксы на Jquery

K_E_V_in — Sat, 13 Aug 2011 20:26:37 +0000

Нам с вами уже надоели однотипные чекбоксы в формах, не так ли? Хочется чего-то новенького и необычного? Лично мне уже давно хочется избавиться от этих надоедливых “птичек” и “галочек”. Поэтому немного порывшись на просторах сети нашел интересный плагинчик Inspired Checkbox для Jquery. Выглядят чекбоксы после применения плагина так (правда, круто!?)

На странице плагина есть вся информация по подключению, а скачать его можно у меня: jquery.iCheckbox.0.1

Кстати, молодой блог о SEO для новичков и профи приглашает читателей!

Cloud Zoom – модный плагин Jquery

K_E_V_in — Sat, 13 Aug 2011 19:55:09 +0000

Сейчас некоторые интернет-магазины используют в качестве крупных изображений не лайтбоксы, а нестандартные увеличилки. С одним из таких плагинов (бесплатных) сегодня с вами познакомимся. Называется он просто -Cloud Zoom. А результат его действия можно посмотреть на картинке

Скрипт в действии можно посмотреть на сайте разработчика. Пример HTML-кода я приведу здесь, а скачать плагин Cloud Zoom для Jquery можно по прямой ссылке: Скачать cloud-zoom.1.0.2 с webkev.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

Пользуйтесь на здоровье и читайте Новый SEO блог о поисковом продвижении