// Подборочка полезных сниппетов для сайтов (используем Jquery)
// 0) Проверка существования элемента
// Некоторые плагины не проверяют существование html элементов на страницах, и при их вызове возникают ошибки.
// Чтобы обезопасить себя от ошибок используем этот простой сниппет
// CDN Google: https://developers.google.com/speed/libraries#jquery
if ($('#myElement').length > 0) {
// Ваш супер Код!
}
// Дублируем клик по ссылке с якорем /test/#my_tab
if(window.location.hash){
$('a[href="'+window.location.hash+'"]').trigger("click");
}
// 1) Замена битой картинки на сайте на картинку по умолчанию
// В некоторых браузерах такие картинки не отображаются (теперь вы их сразу увидите)
// Замена не загруженной картинки
$('img').error(function() {
$(this).attr('src', 'missing.png');
});
// Или скрыть битую картинку
$("img").error(function() {
$(this).hide();
});
// 2) Сниппет, выбирающий URL из текста и превращающий его в ссылку
$(document).ready(function() {
$.fn.replaceUrl = function() {
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp, '<a href="$1">$1</a>')
);
});
return $(this);
}
// используем для абзацев (внутри тэгов <p>Текст и ссылки</p>)
$('p').replaceUrl();
});
// 3) Кэширование изображений
// После кэширования изображения загружаются из атрибута data-image
(function($) {
var srcs = [];
var imgs = [];
var count = 0;
var $images = $('.inner_slider_items img'); //Картинки
if ($images.length) {
$images.each(function() {
srcs.push($(this).attr('data-image'));
});
count = srcs.length;
for (var i = 0; i < count; i++) {
imgs[i] = new Image();
imgs[i].src = srcs[i];
}
$images.each(function() {
$(this).attr('src', $(this).data('image'));
});
}
}(jQuery));
// 4) Отслеживание позицию курсора мыши
$(document).ready(function() {
$().mousemove(function(e) {
// отображаем значения х и у внутри
// div'а с идентификатором id='cursor-position'
$('#cursor-position').html("x: " + e.pageX + " | y: " + e.pageY);
});
});
$(window).on('resize load', adjustIframes).trigger("resize");
// 5) Чтобы сделать Ваш iframe код на странице адаптивным
// Аналогичным образом можно сделать адаптивными любые элементы на страницах
function adjustIframes() {
var $IFRAME = $("#iframe_container").find("iframe");
if ($IFRAME.length > 0) {
var parent_width = $IFRAME.parent().width();
var width = $IFRAME.css("width"); // $("iframe").width();
var height = $IFRAME.css("height");
// Расчет пропорций
var ratio = parseInt(height) / parseInt(width);
var new_height = parseInt(parent_width) * ratio;
$IFRAME.css("width", parent_width);
$IFRAME.css("height", new_height);
}
}
// 6) Сортировка данных внутри списка UL по алфавиту
// Аналогично можно применять для любых других элементов и списков
$(function() {
var $listSelector = $("ul#abcSortable");
// Оформляем функцию сортировк в виде плагина Jquery
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
// Использование
$listSelector.sortList();
});
// 7) Получить данные о картинках (ALT, SRC)
$("img").each(function(){
let src = $(this).attr("src");
let alt = $(this).attr("alt");
console.log("src: ", src);
console.log("alt: ", alt);
console.log("-----------------------------------------------------------------");
});