Ответы пользователя по тегу JavaScript
  • Как правильно отследить событие закрытия вкладки?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Смотря, что вы хотите сделать. В некоторых своих проектах, я использовал событие beforeunload для закрытия сессии и для этого отправлял ajax-запрос с определенной меткой. Это вполне возможно.
    evg_ писал, что
    не получится, на 99.999% уверен
    , а я, пожалуй, использую оставшиеся 0.001% )) Для теста, создайте html-документ, в который запишите следующий JS-код:
    window.addEventListener('beforeunload', function (e) {
    	var xhr = new XMLHttpRequest();
    		xhr.open('POST', 'handler.php', true);
    		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    		xhr.send( 'key=' + encodeURIComponent('Hi') );
     
        e.preventDefault();
        var confirmationMessage = "";
        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage;
    }, false);
    И еще один PHP-файл "handler.php" в той же директории, в котором запишем:
    <?php
    if (!empty($_POST['key'])) {
    	file_put_contents('test.txt', $_POST['key']);
    }
    Теперь откроем и закроем html-файл в любом браузере, кроме осла восьмой версии и ниже. Просто потому, что объект XMLHttpRequest в них не поддерживается, а кроссбраузерное решение нам для теста и не нужно. Результат можем наблюдать в создавшемся файле test.txt
    Ответ написан
    3 комментария
  • Как проверить работоспособность функции сайта на macbook?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Файл style.css, строка 3. Мешает свойство -webkit-user-select: none;.
    Ответ написан
    1 комментарий
  • JS Есть ли универсальный метод получения значения объектов на форме?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Если вам, кроме остальных элементов формы, надо получать значения только выбранных input с типом checkbox и radio, то можно так
    <form>
      <select name="dropdown">
        <option value="opt_1">Opt 1</option>
        <option value="opt_2" selected>Opt 2</option>
        <option value="opt_3">Opt 3</option>
      </select>
      <input type="text" name="some_text" value="Text">
      <input type="checkbox" name="checkbox_1" value="checked" checked>
      <input type="checkbox" name="checkbox_2" value="not checked">
      <input type="radio" name="radio_group" value="not checked">
      <input type="radio" name="radio_group" value="checked" checked>
      <input type="radio" name="radio_group" value="not checked">
      <textarea name="bigtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ab tempora voluptate assumenda!</textarea>
    </form>
    <div id="demo"></div>

    var result = [];
    [].forEach.call(document.querySelector('form').elements, function(el) {
      if (['checkbox', 'radio'].indexOf(el.type) === -1 || el.checked) {
        result.push(el.name + ' > ' + el.value);
      }
    });
    demo.innerHTML = result.join('<br>');
    Ответ написан
    2 комментария
  • Как сделать такую выборку JQuery?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    $('.target').on('click', function(){
    	$(this).prev().find('.trigger');
    });
    Ответ написан
    Комментировать
  • Как умножить число на дата атрибут?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Pure JS - dataset
    jQuery - .data()
    Ответ написан
    Комментировать
  • Как отправить сразу 2 значения в AJAX?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    var data = 'key1=' + encodeURIComponent(val1) +
               '&key2=' + encodeURIComponent(val2) +
               '&key3=' +  encodeURIComponent(val3);
    xmlhttp.send( data );
    Ответ написан
  • Как расшифровывать Javascript код?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Помогу чуток. Может где синтаксическую ошибку сделал, но с этим, я думаю, что справитесь
    pastebin.com/DNnMZSyv
    Ответ написан
    Комментировать
  • Как убрать нули после точки?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    var num = '10.1000';
    console.log( +num ); // 10.1
    Ответ написан
    Комментировать
  • Как реализовать такой запрос?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    $('button').on('click', function(){
        if ($.trim($('input').val()) === '') {
            // в текстовом поле нет ни одного символа
        }
    });
    Ответ написан
    7 комментариев
  • Как отследить ajax запрос, который отсылается сторонним скриптом?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Можно с помощью метода $.ajaxSetup(). Только учитывайте, что настройки определенные в нём, будут применяться ко всем ajax-запросам.
    $.ajaxSetup({
        beforeSend: function(jqXHR, settings) {
            console.log(settings.data);
        }
    });

    Если нужно вывести данные только конкретного запроса, то можно ориентироваться на его url:
    $.ajaxSetup({
        beforeSend: function(jqXHR, settings) {
            if ('http://site.com'.indexOf(settings.url) !== -1) {
                console.log(settings.data);
            }
        }
    });

    Примерчик
    Ответ написан
    Комментировать
  • Как правильно извлечь данные из JSON файла?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    var root = $('<div class="districts" />'),
        box, child;
    for (var k in data) {
        if (data.hasOwnProperty(k)) {
            box = $('<div class="popup" />');
            child = $('<div calss="' + k + '" />').appendTo(box);
            for (var i in data[k].img) {
                if (data[k].img.hasOwnProperty(i)) {
                    $('<img src="/img/' + k + '/' + data[k].img[i].name + '.png" />').appendTo(child);
                }
            }
            box.appendTo(root);
        }
    }
    
    $('body').append(root); // выводим на экран
    // (!) при этом, выводим один раз, а не мучаем DOM на каждой итерации

    Результат будет следующим:
    <div class="districts">
        <div class="popup">
            <div calss="test">
                <img src="/img/test/01.png">
                <img src="/img/test/02.png">
                <img src="/img/test/03.png">
            </div>
        </div>
        <div class="popup">
            <div calss="test2">
                <img src="/img/test2/01.png">
                <img src="/img/test2/02.png">
                <img src="/img/test2/03.png">
            </div>
        </div>
        <div class="popup">
            <div calss="test3">
                <img src="/img/test3/01.png">
                <img src="/img/test3/02.png">
                <img src="/img/test3/03.png">
            </div>
        </div>
        <div class="popup">
            <div calss="test4">
                <img src="/img/test4/01.png">
                <img src="/img/test4/02.png">
                <img src="/img/test4/03.png">
            </div>
        </div>
    </div>

    UPD Чуть подправил, т.к. не заметил еще один элемент с классом popup
    Ответ написан
    4 комментария
  • Как сделать блоки видимыми по очереди с помощью delay?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    $(".tets .popup").each(function(i, el) {
        $(el).fadeIn(1000).delay(3000 * i).fadeOut(1000);
    });

    P.S. Хотя, если судить по описанию вашей задачи, а не смотреть на код, то логичней было бы так
    $(".tets .popup").each(function(i, el) {
        $(el).delay(3000 * i).fadeIn(1000);
    });
    Ответ написан
    6 комментариев
  • Как обработать два события для двух элементов?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Обработчик вынести в отдельную функцию. А дальше есть несколько вариантов:
    <input type="text">
    <button>Click me!</button>

    Вариант 1
    function handler() {
        console.log('Do something');
    }
    $('input').on('keyup', function(e) {
        if (e.which === 13) {
            handler();
            // или 
            // handler.call(this);
        }
    });
    $('button').on('click', handler);

    Вариант 2
    function handler() {
        console.log(this);
    }
    var but = $('button');
    $('input').on('keyup', function(e) {
        if (e.which === 13) {
            but.trigger('click');
        }
    });
    but.on('click', handler);
    Ответ написан
    Комментировать
  • Как заставить работать JS в IE?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Что ни так?
    В общем-то, "не так" с самим IE, а не кодом. Используется синтаксис ES6, который в осле поддерживается, мягко говоря, очень туго, даже в 11-ой версии. Да и объект Promise поддерживается только в IE Edge. Частично может помочь использование Babel JS, но решит ли он все проблемы в осле - не уверен (не проверял).
    Ответ написан
    Комментировать
  • Как сделать такой ползунок?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    jQuery UI Slider и можно соорудить что-то вроде этого:
    <div id="slider"></div>
    <p>
        <input id="inp" type="number" max="100">
    </p>

    var factor = 4, // число, на которое необходимо умножать значение
        inp = $("#inp").attr('min', factor),
        slider = $('#slider').slider({
            min: factor,
            max: 100,
            range: 'min',
            value: 0,
            step: factor,
            slide: function(event, ui) {
                var num = ui.value / factor;
                inp.val(ui.value);
            }
        });
    
    inp.on('input', function() {
        var num = factor * $(this).val();
        slider.slider('value', num);
    });
    Ответ написан
    Комментировать
  • Как правильно задать высоту блока когда между верх и ниж. контентом большое расстояние?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Александр Полях внесенное вами дополнение к вопросу, лично для меня, не на много внесло ясности. Попробую ванговать. Высоту можно задать с помощью такой единицы измерения, как "vh". К примеру, если высоту элемента нужно сделать соответствующей высоте видимой части браузера, то мы бы записали:
    div {
        height: 100vh;
    }

    Единственный минус - это то, что эта единица измерения (как и vw, vmin, vmax) не поддерживаются ослами ниже 11-ой версии
    Ответ написан
    Комментировать
  • Почему интерпретатор указывает нам в выводе тип number?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Неявное численное преобразование примитивов. Если простым языком, то во время математических операций, операнды преобразовываются к числовым типам. Исключением в JS является сложение строковых значений, если их не получилось преобразовать к числовым. В этом случае, мы получим на выходе строку. С другим оператором, в большинстве случаем - NaN
    console.log( +[] ); // 0
    console.log( 1 / [] ); // Infinity, т.к. исходя из примера выше, +[] === 0, т.е. деление на 0
    console.log( 'A' + [] ); // A
    console.log( 'A' - [] ); // NaN


    P.S. И по поводу Infinity:
    Глобальное свойство Infinity является числовым значением, представляющим бесконечность.
    Ответ написан
    Комментировать
  • Почему не работает scrollTop jquery в ie(11v)?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    $('html, body').animate({
        scrollTop: he1
    }, 1500);
    Ответ написан
    Комментировать
  • Как активировать checkbox при перетаскивании на него картинки drag-and-drop?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Не ясно одно - что вам нужно передать на сервер: то ли значения атрибутов src изображений, то ли сами изображения, или что-то еще. И зачем нужны именно checkbox-ы? В общем, сделал вам такой пример.
    HTML
    <div>
        <label>
            <input type="hidden" name="stand[3]">3
        </label>
        <label>
            <input type="hidden" name="stand[1]">1
        </label>
        <label>
            <input type="hidden" name="stand[2]">2
        </label>
    </div>
    <div>
        <img src="http://automated-testing.info/images/emoji/apple/smile.png" alt="">
        <img src="http://radar.techcabal.com/images/emoji/apple/grin.png" alt="">
        <img src="http://www.stickees.com/files/emoticons/emojicons/148-happy-smile.png" alt="">
    </div>
    <button>GO!</button>

    jQuery
    var but = $('button'),
        inp = $('[name^="stand"]');
    $('img').draggable({
        revert: 'invalid'
    });
    $('label').droppable({
        accept: function() {
            return $.trim($('input', this).val()) === '';
        },
        tolerance: 'fit',
        drop: function(e, ui) {
            $('input', this).val(ui.draggable.attr('src'));
            $(ui.draggable).draggable('disable');
            var hasEmpty = inp.filter(function() {
                return $.trim($(this).val()) === '';
            }).length;
            but[hasEmpty ? 'hide' : 'show']();
        }
    });
    
    but.on('click', function() {
        $.ajax({
            url: '/echo/html/',
            type: 'POST',
            data: inp,
            success: function(data) {}
        });
    });


    На сервер передаём массив с url изображений, где индексами являются соответствующие места на пьедестале:
    print_r($_POST['stand']);
    Array (
        [1] => path/to/img1.png
        [2] => path/to/img2.png
        [3] => path/to/img3.png
    )
    Ответ написан
    3 комментария
  • Как выгрузить данные из JSON в локальный html?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Работа с объектами несколько отличается от работы с массивами (массивоподобными объектами)
    $(function() {
        $.getJSON('playback.json', function(data) {
            for (var key in data.song) {
                if (data.song.hasOwnProperty(key)) {
                    $('#song').append('<tr><td>' + data.song[key]);
                }
            }
        });
    });
    Ответ написан
    Комментировать