КОНЬЯКОВ.ру

Аудит, Разработка, ИБ, Поддержка и SEO сайтов

Category: Javascript

Flip Clock (FlipClock.js)

Flip Clock (FlipClock.js) Multiple Instances

Несколько счётчиков на одной странице

<link rel="stylesheet" href="https://konyakov.ru/pubs/js/flipclock/compiled/flipclock.css">
<script src="https://konyakov.ru/pubs/js/flipclock/src/flipclock/js/libs/jquery.min.js"></script>
<script src="https://konyakov.ru/pubs/js/flipclock/compiled/flipclock.min.js"></script>
<div class="clock-1" style="margin-top:2em;"></div>
<div class="clock-2" style="margin-top:2em;"></div>
<div class="message"></div>
<script type="text/javascript">
var clock1, clock2;
$(document).ready(function() {
clock1 = $('.clock-1').FlipClock({
clockFace: 'MinuteCounter',
language:'ru-ru'
});
clock2 = $('.clock-2').FlipClock({
clockFace: 'MinuteCounter',
language:'ru-ru'
});
/*clock2 = $('.clock-2').FlipClock({
clockFace: 'HourlyCounter'
});*/
<?$time = 40*rand(1, 60);?>
clock1.setTime(<?=$time;?>);
clock1.setCountdown(true);
clock1.loadLanguage("ru");
clock1.start();
clock2.setTime(<?=$time;?>);
clock2.setCountdown(true);
clock2.loadLanguage("ru");
clock2.start();
});
</script>

Создание кроссбраузерного модального окна, открывающегося один раз, при заходе на сайт (Modal Window + jQuery Cookie)

Пример создания кроссбраузерного модального окна, открывающегося один раз, при заходе на сайт. Используемые технологии: jQuery + Cookie + CSS. Пример работает во всех современных браузерах (кроссбраузерность).

Окно открывается только при первом посещении сайта. При этом, можно выбрать как просмотр, так и отказ от посещения сайта.

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

Смотреть пример (Demo)

Скачать исходник: .ZIP | .TAR.GZ

Интерактивная карта России (на Javascript и HTML)

Предыстория: Я столкнулся с тем, что в интернете нет внятной Интерактивной карты России. Что я подразумеваю под интерактивностью? Карту России, при наведении на регион мы видим подпись с названием региона, очертаниями границ региона а также возможностью кликнуть и перейти на описание региона на новой странице.

Все решения найденные в интернете основывались на Flash технологиях или технологиях замещения картинок Javascript методами. Минусы данных способов – очевидны. Flash технология не всегда позволяет оперативно обновить информацию на карте России (а если и позволяет, то достаточно сложна в реализации). Технология замещения картинок плоха тем, что при наведении курсора на регион, приходится подгружать изображение очертаний этого региона (эти изображения также придется отрисовать, что займет очень много времени).

Моё решение просто – использование одного изображения карты России, + Javascript реализующий обведение границ региона по AREA координатам изображения карты России. Главная сложность этого метода – это отрисовка координат границ регионов. На минуточку, количество регионов в России больше 80 :)

Смотреть пример

Демонстрация Интерактивной карты России (javascript+html)

Задача по метрологии, версия v5.0 (без формы)

Пример смотрите здесь

© 2007–2017, konyakov.ru