|
1 2 3 |
if ( Number.isFinite(+value) && parseInt(value) > 0) { return parseInt(value).toLocaleString('ru') } |
рубрики: Javascript | Комментарии (0)
Для удобной работы при заказе изображений для фотообоев на сайте Декор Имидж я разрабатывал соответствующий функционал — при вводе размеров изображение разбивается на полосы с указанием размеров.
НО на сайте обнаружился неприятный баг — при переходе на детальную страницу данный функционал работал раз через два — то разобъёт на полосы, то нет.
Причём чаще нет, чем да.
После изучения данной проблемы я экспериментальным путём пришел к выводу, что событие on load к которому я привязывал процедуру по работе с изображением отрабатывало не перманентно.
С коллегами с форума программистов (пост), выяснилось, что событие не отрабатывает если изображение «подтягивается» из кэша браузера (что по моему мнению конечно же недоработка).
Ниже рабочее решение — смысл в том, что для 100% отрабатывания события on load атрибут SRC картинки сначала мы обнуляем, а потом после присвоения с нужным адресом уже слушаем событие load.
|
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 |
/** * TAP-версия загрузки изображения по HTTP * @param {string} url Строка URL * @returns {Promise<void>} Обещание, не возвращающее результат */ function loadImgAsync(img, url) { return new Promise((resolve, reject) => { img.addEventListener("load", function loadHandler() { img.removeEventListener("load", loadHandler); resolve(); }); img.addEventListener("error", function errorHandler() { img.removeEventListener("error", errorHandler); reject(new Error("Ошибка загрузки изображения с адреса: " + url)); }); img.setAttribute("src", ""); // Сделать, чтобы картинка точно грузилась img.setAttribute("src", url); }); } let img = document.querySelector("img"); // img.onload = () => { console.log("Картинка загрузилась. Обрабатываю."); }; console.log(img.complete); document.querySelector("#btn").onclick = btn_click; async function btn_click() { let url = "wallpaper.jpg"; // let url = "https://dekorimage.ru/upload/iblock/c24/c24e87409cfc786486cd5f3fe893f3cf.jpg"; // let url = "https://dekorimage.ru/upload/iblock/596/596c1129512974610c3a281a99f03db2.jpg"; //let url = "https://cyberstatic.net/images/cyberforum_logo.png"; try { await loadImgAsync(img, url); console.log("Картинка загружена. Обработка."); } catch (error) { console.log(error.message); } } |
рубрики: Javascript | Комментарии (0)
С многомерными массивами в javascript беда, а уж с передачей многомерного массива AJAX запросом — тем более.
Не буду долго рассказывать о своих страданиях 🙂 сразу готовое, красивое решение
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
data = new Object(); for (i = 0; i < games.length; i++) { data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val(); data['games[' + i + '][img]'] = $(games[i]).find('.game-img').val(); data['games[' + i + '][url]'] = $(games[i]).find('.game-url').val(); } $.ajax({ url: 'games.php', type: "POST", data: data }); Всё - ловим в games.php правильный массив $_POST |
рубрики: Javascript, Javascript - JQuery, Лайфхак, Полезности | Комментарии (0)
[script]
var obj = [? echo json_encode($php_variable); ?];
[/script]
(вместо квадратных скобок — ставим <>)
В переменной $php_variable может быть любой PHP массив.
рубрики: Javascript | 3 комментария
Столкнувшись с проблемой чистки ящика Яндекс.Почты нашел интересную статью, в которой предлагалось автоматизировать работу с ящиком открыв консоль и вызвав там самописную стороннюю фукнцию, выполнявшуюся в бесконечном цикле!
Идея работы с реальным контентом сайта самописным кодом, да ещё в бесконечном цикле мне очень понравилась, пока не знаю где применю — но однозначно в закладки!!!
(function(){
Console.log(‘тут мутим с селекторами — чекаем удаляем и т.д. и т.п.’);
setTimeout(arguments.callee,5000);
})();
Код автора, для удаления писем. Уже не актуальный — Яша видимо вёрстку сменил, но смысл ясен — пометили письма, нажали удалить и так в цикле!
(function(){
$('.block-messages-list-box.b-layout__first-pane input[type=checkbox]:not(:first)').trigger('click').trigger('click');
$('a.b-toolbar__item.b-toolbar__item_delete.daria-action').click();
setTimeout(arguments.callee,5000);
})();
рубрики: Javascript, Javascript - JQuery, Лайфхак, Полезности | Комментарии (0)
Нарыл сегодня мега полезный скрипт преобразования таблички Excel из буфера обмена (любой формат xls xlsx и т.д.) в простой html без лишних классов! Однозначно репост! Чуть позже оформлю так же — для возможности онлайн преобразования.
jQuery(document).ready(function(){
jQuery('#convert').click(function() {
var arrayOfLines = jQuery('#input').val().split('\n');
var firstTH = false;
if(jQuery('#useth').attr('checked'))
firstTH = true;
var result = '
| ' + arrayOfCells[key2] + ' | ' + arrayOfCells[key2] + ' |
|---|
';
jQuery('#output').html(result);
jQuery('#thetable').html(result);
});
});
рубрики: Javascript, Javascript - JQuery | Комментарии (0)
Итак, задача такова — выбираем из списка город, отображается карта с расставленными на ней магазинами.
Магазины я расставил в конструкторе Яндекс.Карт который на выходе генерит подключаемый javascript код
Собственно, вроде всё просто — при выборе разных городов динамически подключаем нужный скрипт и вперёд!
Но тут то и фишка — код нужно не только подключить, но и выполнить.
Не буду долго томить — вот готовое решение, которое я повесил на success событие ajax запроса.
Последняя строчка — самая важная (почему то в выложенных в сети примерах этого момента нигде не было — .appendchied() и всё на этом).
рубрики: Javascript, Программирование | Комментарии (1)
Вроде элементарное ТЗ — а промучался полдня.
При клике на «купить» — должно появляться модальное окно «Товар добавлен в корзину» «продолжить покупки» «оформить заказ»
В качестве модального окошка решено использовать скриптик JancyBox — и центрируется и затемняет, в общем всё устраивает!
кроме одного НО! — при нажатии на «купить» товар сначала должен «упасть» в корзину, т.е. нужно вызвать соответствующую функцию с передачей в качестве параметра ID товара
|
1 2 |
<a class="modal" href="#inline" rel="1111">Buy 1111</a> <a class="modal" href="#inline" rel="2222">Buy 2222</a> |
|
1 2 3 4 5 6 |
$(".modal").fancybox({ 'onStart': function() { var id = $(this).attr('rel'); alert(id); } }); |
Так не пашет! — даёт «undefined»
Как вариант — повесить сначала click — в нём сделать нужный вызов, а потом открыть окно имитацией клика
$(«#id2»).trigger(‘click’);
|
1 2 3 4 5 |
$("#id1").click(function() { var id = $(this).attr('rel'); $("#inline1").html(id); $("#id2").trigger('click'); }); |
Но почему-то в таком варианте модальное окно выводится сначала вверх потом только центрируется. Облом!
Гуглим далее — нашел свою обработку Тайтла с помощью собственной фукнции вешаемой параметром TitleFormat
Внутри которой дёрнуть rel можно следующим образом $(currentArray[currentIndex]).attr(‘rel’)
Т.е. вместо задания тайтла я получу ID и вызову нужную мне функцию.
На этом «мудрёном» варианте и остановлюсь — через задний проход конечно, но работает 🙂
P.S.
С вопросом по решению проблемы я создал 3 поста на форумах
phpclub.ru
javascript.ru/forum/
forum.searchengines.ru
На первом ноль реакции, на втором попытались помочь — но безуспешно
На javascript.ru/forum — 200 % попадание в цель!
На основе моего вопроса был создан готовый рабочий пример! В личке вебмастер ответил на мой вопрос — откуда именно инфа с указанием прямых ссылок на нужный мне пример в мануале!
Собственно, как обычно
Рони ответил в ПМ — за что ему ещё раз огромное спасибо!
Как обычно — всё гениальное просто — «Meditate on documentation!»
Дока тут http://fancyapps.com/fancybox/
Пример с передачей ID тут http://jsfiddle.net/Se8Yu/
рубрики: Javascript, Полезности, Программирование, Сайтостроение | Комментарии (0)