Рубрика: JQuery

Блог - PROMO64

Вывести title элемента в виде всплывающей подсказки

Способ вывести title элемента в виде всплывающей подсказке. Работает и с <area>.   html: <a href=»/link.html» title=»текст» alt=»текст»>ССЫЛКА</a>   Скрипт: $(function() { $(«#ddd a»).each(function(b) {//работа с элементом (ссылка в блоке с id=ddd) if (this.title) { var c = this.title; var x = 0;//расположение по горизонтали(left) var y = 35;//расположение по вертикали (top) $(this).mouseover(function(d) { this.title…
Читать дальше

Как добавить стили только для мобильных устройств

Добавить стили которые срабатывали бы только на мобильных устройствах под управлением ОС Android, IOS и других, очень просто. Достаточно добавить скрипт и в нем прописать нужные стили. jQuery(function() { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { jQuery(«body»).prepend(‘<style>/*ТУТ ДОБАВЛЯЕМ СТИЛИ*/</style>’);} } )  

Скрипт всплывающего баннера

Всплывающий баннер с возможностью закрыть на определенное время <style> #slidebox{ width:300px; height:80px; padding:10px; background-color: rgba(255, 255, 255, 0.87); border-top:3px solid #095197; position:fixed; bottom:0px; right:-430px; -moz-box-shadow:-2px 0px 5px #aaa; -webkit-box-shadow:-2px 0px 5px #aaa; box-shadow:-2px 0px 5px #aaa; text-align: left; z-index: 2000; } #slidebox p, a.more{ padding:4px; font-size:11px; letter-spacing:1px; color:#555; } a.close{ width:13px; height:13px; position:absolute; cursor:pointer; top:10px;…
Читать дальше

Задержка перехода по ссылке

Немного задержим пользователя на странице после нажатия на ссылку <!DOCTYPE html> <html> <head> <script src=»https://code.jquery.com/jquery-2.2.3.min.js»></script> <script type=»text/javascript»> jQuery(document).ready(function ($) { $(‘.js-anchor’).on(‘click’, function(e) { e.preventDefault(); var href = $(this).attr(‘href’), timeout = 5000; setTimeout(function() { //window.open(href, ‘_self’); location.href = href; }, timeout); }); }); </script> </head> <body> <a class=»js-anchor» href=»http://yandex.ru»>click me</a> </body> </html>  

Плавный переход по якорям

Скрипт плавного перехода по якорям с отступом сверху <script> //плавные якоря $(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,») == this.pathname.replace(/^\//,») && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top — 100 }, 1000); return false; } } }); }); //end…
Читать дальше

Пример адаптивного меню

Меню для адаптивного дизайна сайта. //адаптивное меню (function(e, t, n) { e.fn.tinyNav = function(r) { var s = e.extend({ active: «selected», indent: «- «, label: «» }, r); return this.each(function() { n++; var r = e(this) , o = «tinynav» , u = o + n , a = «.l_» + u , f =…
Читать дальше