Задать вопрос

Иван Гордиенко

Ответы пользователя по тегу JavaScript

  • Кастомизация осей в highcharts.js?

    @zordq Автор вопроса
    Вот конфиг, который мне удалось сформировать для получения такого результата, как выше на скриншоте. Максимально возможное соответствие.

    Highcharts.chart('highcharts', {
    chart: {
        height: (9 / 16 * 100) + '%',
        type: 'areaspline',
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, 'rgba(23, 64, 255, 0.1)'],
                [1, 'rgba(23, 64, 255, 0']
            ]
        },
        style: {
            fontFamily: 'Roboto, sans-serif',
        },
        marker: {
            enabled: false
        },
        enableMouseTracking: false,
        legend: {
            enable: false
        },
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, 'rgba(23, 64, 255, 0.1)'],
                [1, 'rgba(23, 64, 255, 0']
            ]
        },
    },

    title: {
        text: null,
        align: 'left',
        style: {
            fontFamily: 'Roboto, sans-serif',
            fontSize: '16px',
            fontWeight: 'bold'
        }
    },
    tooltip: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    yAxis: {
        min: 0,
        max: 100,
        title: false,
        tickInterval: 20,
        legend: {
            enabled: false
        },
        labels: {
            formatter() {
                return this.value + "%"
            }
        }
    },
    xAxis: {
        type: 'datetime',
        title: false,
        gridLineWidth: 1,
        showEmpty: true,
        legend: false,
        dateTimeLabelFormats: {
            day: {
                main: '%H %M'
            },
        },
        tickInterval: 7200 * 1000,
    },
    lineColor: '#1740FF',
    lineWidth: 3,
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [
                        0,
                        'rgba(23, 64, 255, 0.1)'
                    ],
                    [
                        1,
                        'rgba(23, 64, 255, 0)'
                    ]
                ]
            },
            lineColor: '#1740FF',
            lineWidth: 3,
            states: {
                hover: {
                    enabled: false
                }
            },
        }
    },
    series: [{
        lineColor: '#1740FF',
        lineWidth: 3,
        showInLegend: false,
        type: 'areaspline',
        marker: {
            enabled: false
        },
        enableMouseTracking: false,
        legend: {
            enable: false
        },
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, 'rgba(23, 64, 255, 0.1)'],
                [1, 'rgba(23, 64, 255, 0']
            ]
        },
        data: [
            [new Date('2017-01-03T00:00:00Z').getTime(), 20],
            [new Date('2017-01-03T02:00:00Z').getTime(), 50],
            [new Date('2017-01-03T02:30:00Z').getTime(), 80],
            [new Date('2017-01-03T02:35:00Z').getTime(), 70],
            [new Date('2017-01-03T03:35:00Z').getTime(), 60],
            [new Date('2017-01-03T03:36:00Z').getTime(), 20],
            [new Date('2017-01-03T04:34:00Z').getTime(), 50],
            [new Date('2017-01-03T04:55:00Z').getTime(), 80],
            [new Date('2017-01-03T05:35:00Z').getTime(), 70],
            [new Date('2017-01-03T05:55:00Z').getTime(), 60],
            [new Date('2017-01-03T06:00:00Z').getTime(), 20],
            [new Date('2017-01-03T06:56:00Z').getTime(), 50],
            [new Date('2017-01-03T07:30:00Z').getTime(), 80],
            [new Date('2017-01-03T07:45:00Z').getTime(), 70],
            [new Date('2017-01-03T08:35:00Z').getTime(), 60],
            [new Date('2017-01-03T09:36:00Z').getTime(), 20],
            [new Date('2017-01-03T10:34:00Z').getTime(), 50],
            [new Date('2017-01-03T11:55:00Z').getTime(), 80],
            [new Date('2017-01-03T12:35:00Z').getTime(), 70],
            [new Date('2017-01-03T14:55:00Z').getTime(), 60],
            [new Date('2017-01-03T16:55:00Z').getTime(), 60],
            [new Date('2017-01-03T18:55:00Z').getTime(), 60],
            [new Date('2017-01-03T20:00:00Z').getTime(), 60]
        ]
    }]

});
    Ответ написан
    Комментировать
    Комментировать

  • Не работает анимация секций в fullpage.js + animate.css (wow.js)?

    @zordq Автор вопроса
    Плагин fullpage.js аналогичен pagepiling.js
    Второй, почему-то, работает у меня лучше и ниже представлен пример подключения и инициализации скрипта. Каждую секцию нужно описывать как в алгоритме ниже, что можно доработать, но при моём количество блоков достаточно добавить вручную каждую секцию и продиктовать её анимацию. Есть небольшая проблема при подключении файла стилей, но решается копией стилей из examples.css (pagepiling.js) в Ваш main.css (как пример).

    var deleteLog = false;

		$(document).ready(function () {
			$('#pagepiling').pagepiling({
				menu: '#menu',
				anchors: ['page1', 'page2', 'page3'],
				onLeave: function (index, nextIndex, direction) {
					if (deleteLog) {
						$('#callbacksDiv').html('');
					}
					$('#callbacksDiv').append('<p>onLeave - index:' + index + ' nextIndex:' + nextIndex + ' direction:' + direction + '</p>')
				},
				afterRender: function () {
					$('#callbacksDiv').append('<p>afterRender</p>');
				},
				afterLoad: function (anchorLink, index) {
					$('#callbacksDiv').append('<p>afterLoad - anchorLink:' + anchorLink + " index:" + index + '</p>');

					//section 2
					if (index == 2) {
						//moving the image
						$('#section2').find('.intro').delay(100).animate({
							left: '0%'
						}, 1500, 'easeOutExpo', function () {
							$('#section2').find('p').first().fadeIn(700, function () {
								$('#section2').find('p').last().fadeIn(600);
							});
						});
					}

					//section 3
					if (index == 3) {
						//moving the image
						$('#section3').find('.intro').delay(100).animate({
							left: '0%'
						}, 1500, 'easeOutExpo', function () {
							$('#section3').find('p').first().fadeIn(700, function () {
								$('#section3').find('p').last().fadeIn(600);
							});
						});
					}

					deleteLog = true;
				}
			});
		});
    Ответ написан
    Комментировать
    Комментировать

  • Вывод меток Yandex в кластеризатор геообъектов с помощью API-ключа?

    @zordq Автор вопроса
    Использую данную фабулу, как получить все метки в таком случае?

    <!DOCTYPE html>
<html>
<head>
    <title>Создание кластеризатора с произвольными иконками</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<api-ключ>" type="text/javascript"></script>
    <script src="ymapsml_simpleobject.js" type="text/javascript"></script>
	<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>


    ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
        clusterer = new ymaps.Clusterer({
            // Зададим массив, описывающий иконки кластеров разного размера.
            clusterIcons: [
                {
                    href: 'images/cat.png',
                    size: [40, 40],
                    offset: [-20, -20]
                },
                {
                    href: 'images/cat2.png',
                    size: [60, 60],
                    offset: [-30, -30]
                }],
            // Эта опция отвечает за размеры кластеров.
            // В данном случае для кластеров, содержащих до 100 элементов,
            // будет показываться маленькая иконка. Для остальных - большая.
            clusterNumbers: [10],
            clusterIconContentLayout: null
        }),
        getPointData = function (index) {
            return {
                balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
                clusterCaption: 'метка <strong>' + index + '</strong>'
            };
        },
        points = [
            [55.831903, 37.411961], [55.763338, 37.565466], [55.763338, 37.565466], [55.744522, 37.616378], [55.780898, 37.642889], [55.793559, 37.435983], [55.800584, 37.675638], [55.716733, 37.589988], [55.775724, 37.560840], [55.822144, 37.433781], [55.874170, 37.669838], [55.716770, 37.482338], [55.780850, 37.750210], [55.810906, 37.654142], [55.865386, 37.713329], [55.847121, 37.525797], [55.778655, 37.710743], [55.623415, 37.717934], [55.863193, 37.737000], [55.866770, 37.760113], [55.698261, 37.730838], [55.633800, 37.564769], [55.639996, 37.539400], [55.690230, 37.405853], [55.775970, 37.512900], [55.775777, 37.442180], [55.811814, 37.440448], [55.751841, 37.404853], [55.627303, 37.728976], [55.816515, 37.597163], [55.664352, 37.689397], [55.679195, 37.600961], [55.673873, 37.658425], [55.681006, 37.605126], [55.876327, 37.431744], [55.843363, 37.778445], [55.875445, 37.549348], [55.662903, 37.702087], [55.746099, 37.434113], [55.838660, 37.712326], [55.774838, 37.415725], [55.871539, 37.630223], [55.657037, 37.571271], [55.691046, 37.711026], [55.803972, 37.659610], [55.616448, 37.452759], [55.781329, 37.442781], [55.844708, 37.748870], [55.723123, 37.406067], [55.858585, 37.484980]
        ],
        geoObjects = [];

    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i));
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
});
    Ответ написан
    Комментировать
    Комментировать

  • Отправка данных из кастомной корзины в Telegram?

    @zordq Автор вопроса
    Было сделано интересное решение. Далее "Осторожно костыль!".

    function displayCart() {
    var cartArray = shoppingCart.listCart();
    var output = "" + "<div ><input class='input-send' name='phone' value='' placeholder='Номер телефона' requaired>" + "<input class='input-send' name='name' value='' placeholder='Ваша почта' requaired>"  + "<button class='sendspan' type='submit'>Отправить заказ</button></div>";
    for (var i in cartArray) {
        output += "<div class='form-group'>"
            + "<img src=" + cartArray[i].name + ">"
            + "<div class='input-group'><button class='minus-item input-group-addon' data-name=" + cartArray[i].name + ">-</button>"
            + "<input name='mutch' type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "' requaired>"
            + "<button class='plus-item btn input-group-addon' data-name=" + cartArray[i].name + ">+</button></div>"
            + "<div name='price' requaired>" + cartArray[i].total + "</div>"
            + "<button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">×</button>"
            + "<p class='form-message'></p>"
            + "<div id='message'></div>"
            + "</div>"
            + "<input class='offer' name='offer[]' value='Артикул: " + cartArray[i].name + " | Количество: " + cartArray[i].count + " | Сумма: " + cartArray[i].total + "' requaired>"
            + "</div>";
    }

    $('.show-cart').html(output);
    $('.total-cart').html(shoppingCart.totalCart());
    $('.total-count').html(shoppingCart.totalCount());
}


    В данную строку передавались данные из дивов нужных нам переменных. Формировался один инпут, который счастливо улетал в телеграм.

    + "<input class='offer' name='offer[]' value='Артикул: " + cartArray[i].name + " | Количество: " + cartArray[i].count + " | Сумма: " + cartArray[i].total + "' requaired>"
    Ответ написан
    2 комментария
    2 комментария

  • Не вызывается модальное окно?

    @zordq Автор вопроса
    РЕШЕНО, проблема была в подключении данной библиотеки.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    Ответ написан
    Комментировать
    Комментировать

  • Страница для сбора данных с форм обратной связи?

    @zordq Автор вопроса
    Было решение не использовать CMS или фреймворки, поэтому для реализации требовались нестабильные и нестандартные механики. Переосмыслили. Была реализована возможность отправки в телеграм, что удобнее для клиента. Спасибо всем.
    Вот тут, описание.
    Ответ написан
    Комментировать
    Комментировать

  • Swiper не работает в другом блоке?

    @zordq Автор вопроса
    Так как второй слайдер находился в модальном окне Bootstrap, то -

    // Swiper JS Внутри карточки магазига //
	var myswiper2 = new Swiper('.swiper-container-item', {
		slidesPerView: 1,
		spaceBetween: 4,
		slidesPerGroup: 1,
		loop: true,
		loopFillGroupWithBlank: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	// Swiper JS Modal //
	$('#product_view').on('shown.bs.modal', function(e) {
		myswiper2.update();
	    //var $invoker = $(e.relatedTarget);
		//swiper.slideTo($invoker.data('slider'));
		//swiper.update();
	});


    Была создана вторая переменная, закомментированый код не влияет на работу, то был указан в решении другого источника.
    Ответ написан
    1 комментарий
    1 комментарий