Ответы пользователя по тегу JavaScript
  • Как изменить объект на нужном разрешении экрана?

    BRAGA96
    @BRAGA96
    Метод update() пробовали?
    Ответ написан
    Комментировать
  • Где логика в работе style.display?

    BRAGA96
    @BRAGA96
    С помощью jQuery можно вытянуть нативный node, например:
    $("#form").get(0).style.display = 'block';
    Ответ написан
    Комментировать
  • Как извлечь последнюю дату из JSON объекта?

    BRAGA96
    @BRAGA96
    Как то так
    var response = '{"2018-06-28":{"may":3,"april":4, "june":6},"2018-07-04":{"may":2,"april":3, "june":7}, "2018-07-11":{"may":4,"april":5, "june":8}}';
    var json = JSON.parse(response);
    var date = [];
    for (var item in json) {
    	date.push(new Date(item).getTime());
    }
    var actual = date.reduce(function(prev, next) {
    	return prev > next ? prev : next;
    }, 0);
    console.log(new Date(actual).toLocaleDateString()); //> 2018-07-11
    Ответ написан
    2 комментария
  • Как получить название get параметра в Js?

    BRAGA96
    @BRAGA96
    var param = new URL(window.location.href).searchParams.get('post_id');
    Ответ написан
    Комментировать
  • Какие есть JS библиотеки для оформления кода?

    BRAGA96
    @BRAGA96
    Если для редактирование, то лучший в этом CodeMirror
    Ответ написан
    Комментировать
  • Как сделать такую анимацию для блока?

    BRAGA96
    @BRAGA96
    Ответ написан
    Комментировать
  • Как правильно указать пользователю что данный блок можно свайпить если это не слайдер?

    BRAGA96
    @BRAGA96
    Так же как и сейчас. Оставьте один блок справа на половину, чтобы понятно было что там еще есть другие блоки.
    Скриншот
    vx0jqizk-zxokp-hwp478a2kjhi.png
    Ответ написан
    Комментировать
  • Как сделать таймер по дате?

    BRAGA96
    @BRAGA96
    Написал для вас простенький jQuery плагин. Если честно, то больше времени писал документацию, чем сам плагин.
    Codepen.io
    Если что, спрашивайте, объясню все моменты.

    Использовать примерно так:
    $(function() {
    	// Таймер с настройками по умолчанию
    	$('.timer').timer();
    
    	// Таймер со своими настройками, простой-быстрый вариант
    	// Аргументы: Дата, функция вывода, функция финиша или объект настроек
    	$('.timer1').timer('07.25.2018', function(time) {
    		return '<div>'+ time.seconds.value +'</div>';
    	});
    
    	// Таймер с простой инициализацией с функцией финиша
    	$('.timer2').timer('07.25.2018', function(time) {
    		return '<div>'+ time.seconds.value +'</div>';
    	}, function() {
    		$(this).css('color', 'red');
    	});
    
    	// Таймер с простой инициализацией с объектом настроек
    	$('.timer3').timer('07.25.2018', function(time) {
    		return '<div>'+ time.seconds.value +'</div>';
    	}, {
    		double: false,
    		finish: function() {
    			$(this).css('color', 'red');
    		}
    	});
    
    	// Таймер со своими настройками стандартный-полный вариант
    	$('.timer4').timer({
    		date: '07.25.2018',
    		double: false,
    		language: 'EN',
    		template: function(time) {
    			return '<div>'+ time.seconds.value + ' ' + time.seconds.text +'</div>';
    		},
    		finish: function() {
    			return 'Время вышло';
    		}
    	});
    
    	// Таймер с хранилищем store и шаблонизатором
    	// Store это функция которая возвращает объект общих данных, состояний,
    	// который можно изменять по клику, событию и т.д.
    	// Все параметры, строки, значения, функции, объекты и т.д., которые вы хотели бы изменять сохраняйте в хранилище
    	$('.timer5').timer({
    		date: '07.25.2018',
    		store: function() {
    			return {
    				text: true,
    				number: 10,
    				declen: ['осталось', 'осталась', 'осталось']
    			};
    		},
    		template: function(time, store) {
    			var text = '<div v-show="text">До конца акции '+ $.timer('declen', store.declen, time.seconds.value, 'RU') +':</div>';
    			var cond = '<div v-if="'+( store.number < 2 )+'">Этот текст выведется если условие сработает</div>';
    			var condels = '<div v-else>Текст выведтся если соседний блок IF не прошел условие</div>';
    			var hide = '<div v-hide>Просто блок скрытый с помощью style="display:none;"</div>'
    			return '<div>'+ text + time.seconds.value + ' ' + time.seconds.text + cond + condels + hide +'</div>';
    		}
    	});
    
    	// Шаблонизатор имеет такие дерективы
    	// Шаблонизатор работает в функция template и finish, если
    	// эти функции не возвращают значение, то шаблонизатор работать не будет
    	// Вы можете напряму из функции template или finish вставлять результат в DOM таким образом:
    	// $(this).html('<div>Ваш код</div>');
    	// v-show="key" - принимет свойство объекта store, если оно равно false/null/undefined/'' то блок не выведется
    	// v-if="conditions/key" - принимает любую строку или ключ объекта store (как v-show), проверяет если она false/null/undefined/'',
    	// то блок не выводится, если есть соседний блок v-else, то выведет его
    	// v-else - если соседний блок v-if не сработал, то выведется содержимое v-else
    	// v-hide - просто ставить style="display:none;" указаному блоку
    
    	// В консоли или в коде по каким-то событиям вы можете реактивно изменять параметры плагина так и хранилища store
    	// Изменим  Store
    	$('.timer5').timer('store', {
    	 	text: false,
    	 	number: 1
    	// });
    
    	// Изменим параметры плагина
    	$('.timer5').timer('set', 'language', 'EN');
    	// или
    	$('.timer5').timer('set', {
    	 	language: 'EN'
    	});
    
    	// Получим параметры плагина
    	var date = $('.timer5').timer('get', 'date');
    
    	// Пользовательские методы
    	// Это те методы, которые можно использовать и без инициализации, они нужны для унификации
    	// так как очень часто могу встречатся во мноих инициализациях плагина
    	// Вызываются методы так: $.timer(название, параметры);
    	// Методы всегда возвращают значение
    	// Склонения слов
    	// Параметры: массив вариантов склонений, значение, язык (по умолнчанию RU)
    	$.timer('declen', ['осталось', 'осталась', 'осталось'], 1, 'RU');
    	// Пример выведет слово "осталась" - осталась 1 секунда, во всех остальных случаях "осталось"
    	$.timer('declen', ['day', 'days'], 1, 'EN');
    	// Пример выведет слово "day" - 1 day, во всех остальных случаях "days"
    
    	// Разрушим плагин
    	$('.timer5').timer('destroy');
    
    	// Посмотрим версию плагина
    	$().timer('version');
    	// или 
    	$.timer('version');
    
    	$('#lang').on('change', function() {
    		$('.timer5').timer('set', 'language', $(this).val());
    	});
    
    });
    Ответ написан
  • Как отправить письмо с сайта?

    BRAGA96
    @BRAGA96
    Ничего не смущает?
    <button class="btn">Отправить</button>
    $("div.btn").click(function() { });

    Избавьтесь от кирилицы
    name="Имя"

    Что это?!
    e();
    Ответ написан
    1 комментарий
  • Плавное перемещение блоков при dragndrop?

    BRAGA96
    @BRAGA96
    Ответ написан
    Комментировать
  • Как можно управлять контекстом функции?

    BRAGA96
    @BRAGA96
    myFynction.call(context, params)
    
    myFynction.apply(context, [params])
    
    method(args, function(params) {
    // ... 
    }.bind(context))
    Ответ написан
    Комментировать
  • Как сделать api запрос один раз в день?

    BRAGA96
    @BRAGA96
    // Если в LocalStorage есть ключ request
    if (localStorage.getItem('request') !== null) {
    	// Сохраним время timestamp из storage
    	var timestamp = Number(localStorage.getItem('request'));
    	// Если текущее время больше чем timestamp + сутки, 
    	// то сделать запрос еще раз и сохранить новый timestamp
    	if (Date.now() > timestamp + 864e5) {
    		makeRequest();
    	}
    } else {
    	// Если ключа request нет в localStorage, то сделаем запрос и создадим его
    	makeRequest();
    }
    
    // Функция запроса
    function makeRequest() {
    	var url = '';
    	return $.getJSON(url, function(data) {
    		// При успешном запросе создадим/обновим запись в localStorage с текущем временем timestamp
    		localStorage.setItem('request', Date.now());
    		$('#class').html(data.vid[0].mark.desk);
    	});
    }
    Ответ написан
    Комментировать
  • Как сделать полноэкранный слайдер с кнопками навигации внутри контейнера поверх слайда?

    BRAGA96
    @BRAGA96
    Вместо абсолютно позиционированных картинок, сделайте абсолютными кнопки навигации, справа и слева, все.
    codepen
    .slider {
      padding: relative;
    }
    
    .slider img {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    .slick-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
    
    .slick-prev {
      left: 0;
    }
    
    .slick-next {
      right: 0;
    }
    Ответ написан
  • Почему не формируется новая строка из цикла?

    BRAGA96
    @BRAGA96
    reverseString('hello, world'); //> "dlrow ,olleh"
    
    function reverseString(string) {
    	return string.split('').reverse().join('');
    }
    Ответ написан
  • Как нормально распарсить json?

    BRAGA96
    @BRAGA96
    У вас не валидный JSON, без двойных кавычек. Это даже не JSON а Javascript объект.
    JSON.parse(JSON.stringify({'id': 50, 'text': 'j', 'datetime': '2018-07-04 12:15:56.154427+00:00', 'sender': 'test', 'thread': 1}))


    Можете сразу при парсе обработать дату сделав из строки объект даты:
    var string = JSON.stringify({'id': 50, 'text': 'j', 'datetime': '2018-07-04 12:15:56.154427+00:00', 'sender': 'test', 'thread': 1});
    var object = JSON.parse(string, function(key, value) {
    	return key === 'datetime' ? new Date(value) : value;
    });
    Ответ написан
  • Как сделать реинициализацию плагина?

    BRAGA96
    @BRAGA96
    Здесь я постарался описать основные моменты, если что-то забыл, то спрашивайте.
    Сам код плагина:
    (function($, window, undefined) {
    	'use strict';
    
    	/* Общие настройки плагина */
    	var plugin = {
    		name: 'plugin',
    		version: '1.0.0',
    		data: {
    			setting: 'setting',
    			general: 'general'
    		}
    	};
    
    	/* Настройки инициализации по умолчанию */
    	var defaults = {
    		color: 'red',
    		background: 'black',
    		padding: '10px'
    	};
    
    	var methods = {};
    
    	methods.init = function($this, options, common) {
    		/**
    		 * Записываем настройки плагина в $.data элемента,
    		 * чтобы потом в любой момент достать настройки 
    		**/
    		var setting = function() {
    			var params = $.extend(true, {}, defaults, options);
    			$this.data(plugin.data.setting, params);
    			return params;
    		}();
    
    		/**
    		 * Создаем общий объект свойств, которыми будем пользоватся
    		 * в методе init. Общий объект заменяет глобальные переменные в методе init,
    		 * так удобней и чище, все в одном месте. Не нужно на этом уровне создавать
    		 * var flag = true; и использовать его по всему коду init и в функциях замыкания,
    		 * лучше объект
    		**/
    		var general = function() {
    			var params = $.extend(true, {}, {
    				time: Date.now(),
    				context: $this.get(0)
    			}, common);
    			$this.data(plugin.data.general, params);
    			return params;
    		}();
    
    		/* Начало инициализации плагина */
    		$this.css({
    			color: setting.color,
    			background: setting.background
    		});
    
    		setPadding();
    		/* Конец инициализации плагина */
    
    		/* Функции в замыкании для видимости: $this, setting, general */
    		function setPadding() {
    			general.context.style.padding = setting.padding;
    		}
    	};
    
    	/**
    	 * Метод SET. Логика его в том, чтобы взять текущие настройки
    	 * плагина из $.data элемента, присоеденить свои
    	 * и переинициализировать плагин уже с новыми настройками
    	**/
    	methods.set = function(key, value) {
    		var setting = $(this).data(plugin.data.setting);
    		switch (typeof key) {
    			case 'string':
    				if (key.includes('.')) {
    					nestedObjectPath(setting, key, value);
    				} else {
    					setting[key] = value;
    				}
    				break;
    			case 'object':
    				setting = $.extend(true, {}, setting, key);
    				break;
    		}
    		return methods.init($(this), setting, {
    			type: 'update',
    			method: 'set'
    		});
    	};
    
    	methods.get = function(category, key) {
    		var section = $(this).data(category);
    		if (key) {
    			if (key.includes('.')) {
    				return nestedObjectPath(section, key);
    			} else {
    				return Object.getOwnPropertyDescriptor(section, key).value;
    			}
    		}
    		return section;
    	};
    
    	methods.destroy = function() {
    		$(this).removeData(plugin.data.setting).fadeOut(200, function() {
    			$(this).empty().show();
    		});
    	};
    
    	methods.version = function() {
    		return plugin.version;
    	};
    
    	/* Все остальные общие функции, которым не нужна область видимости init метода */
    	/**
    	 * Получить/установить значение объекта передав путь строкой ('price.current.USD')
    	 * @param {object} object - объект
    	 * @param {string} key - путь к свойству
    	 * @param {any} value - значение
    	 * @returns {any} - значение свойства объекта
    	**/
    	function nestedObjectPath(object, key, value) {
    		var path = key.split('.');
    		var get = function(path, object) {
    			return path.reduce(function(previous, current) {
    				return previous[current];
    			}, object);
    		};
    		if (value) {
    			var way = path.pop();
    			get(path, object)[way] = value;
    			return object;
    		} else {
    			return get(path, object);
    		}
    	}
    	/* Конец объявления общих функций */
    
    	/* Инициализации плагина и запуск методов */
    	$.fn[plugin.name] = function(setting) {
    		if (typeof setting === 'object' || !setting) {
    			return $.each(this, function() {
    				methods.init($(this), setting, {
    					type: 'init',
    					method: 'init'
    				});
    			});
    		} else if (typeof setting === 'string') {
    			var params = Array.prototype.slice.call(arguments, 1);
    			var context = this.get(0);
    			switch(setting.toLowerCase()) {
    				case 'set':
    					return methods.set.apply(context, params);
    				case 'get':
    					return methods.get.apply(context, params);
    				case 'destroy':
    					return methods.destroy.call(context);
    				case 'version':
    					return methods.version();
    			}
    		}
    	};
    
    })(jQuery, window);


    Использование плагина, методы:
    /* Инициализация плагина с параметрами по умолчанию */
    $('div').plugin();
    
    /* Инициализация плагина с параметрами */
    $('div').plugin({
    	color: 'green',
    	background: 'white'
    });
    
    /* Изменим параметры плагина, например по клику кнопке */
    $('button').on('click', function() {
    	$('div').plugin('set', 'color', 'yellow');
    });
    
    /* Или передадим больше параметров для изменения */
    $('button').on('click', function() {
    	$('div').plugin('set', {
    		color: 'black',
    		background: 'white'
    	});
    });
    
    /**
     * Если у нас в настройках вложенные объекты
     * то для этого мы объявили функцию nestedObjectPath
     * и описали логику в методах set и get
     * У нас появилась возможность одной строкой 
     * имзенить/получить свойства вложеных объектов
    **/
    $('div').plugin('set', 'color.theme.light', 'white');
    
    /* Или передадим объектом */
    $('div').plugin('set', {
    	color: {
    		theme: {
    			light: 'white'
    		}
    	}
    });
    
    /* Получить настройки/параметры плагина */
    var color = $('div').plugin('get', 'setting', 'color');
    
    /* Или получим general объект */
    var time = $('div').plugin('get', 'general', 'time');
    
    /**
     * Отвяжем/разрушим плагин.
     * Этот метод индивидуальный для каждого плагина
     * и данный пример не является универсальным для всех плагинов
    **/
    $('div').pluign('destroy');
    
    /* Получить текущюю версию плагина */
    $().plugin('version');


    Поповоду ошибок в вашем плагине:
    Никогда так не делайте, вставка в DOM должна быть только одна:
    item.append(inputFile).append(inputText).append(preview);
    this.append(item);
    Ответ написан
    5 комментариев
  • Как вытащить данные из массива отвечающий определенному критерию?

    BRAGA96
    @BRAGA96
    Как вариант
    var $item = $('a', $('.lang-item'));
    var maxWidth = Math.max.apply(null, $.makeArray($item).map(function(item) {
    	return item.offsetWidth;
    }));
    console.log(maxWidth);


    Или так:
    const $item = $('a', $('.lang-item'));
    const maxWidth = Math.max(...Array.from($item).map((item) => item.offsetWidth));
    console.log(maxWidth);
    Ответ написан
    Комментировать
  • Ввод в поле без кнопки?

    BRAGA96
    @BRAGA96
    Обернуть все это в <form></form>
    Ответ написан
    Комментировать