Ответы пользователя по тегу JavaScript
  • Jquery событие для динамически изменяемого URL?

    dubr
    @dubr
    пыхарь
    Лев Розанов, а вы свою ссылку читали для разнообразия? ))

    afterMove(next_page_index)
    This callback gets called after the move animation was performed.


    $(".main").onepage_scroll({
        afterMove: function(index) {
          ...
        }
      });
    Ответ написан
  • Как можно реализовать такую задумку?

    dubr
    @dubr
    пыхарь
    Могу посоветовать, с чего начать.

    1) кладем картинку на canvas
    2) получаем при помощи getImageData() массив пикселов
    3) пытаемся тыкать в него палочкой

    Пункт 3 как бы самый интересный, но тут программировать надо.

    Я ради фана соорудил вот такую тупую демку на CodePen, называется "Png to Html". Оттуда можно скопипастить первые два пункта и примерно понять, чо делать с третьим. Оно читает картинку из file-input, кладет на канву, затем считывает попиксельно, и для пикселов, у которых альфа-канал не равен 1 и цвет не белый (точнее avg от rgb < 250) создает DOM-узел, раскрашенный нужным цветом и спозиционированный в нужное место. И обязательно с css-анимацией! +) Так что берегите свои браузеры )))

    Дальше вам надо эти пиксели как-то сгруппировать. Я бы начал с чтения статьи Connected-component labeling и гугления слов оттуда с приставкой "js". Придумаете реализацию - расскажите нам =)

    А, ну и вместо канвы можно изучить png-декодеры, они бывают для браузера (если у вас только сервер - соответственно, с них и начинаем). Должно работать шустрее, но не так наглядно.
    Ответ написан
    3 комментария
  • Как запретить рассылку спама в форме?

    dubr
    @dubr
    пыхарь
    Спам-боты (пока) не выполняют JS. При показе формы пишите в сессию код, передавайте на клиент в любом виде, на клиенте пишите из JS в скрытое поле. Пока оно не оформлено в массово используемый плагин, будет работать =)

    Вот наивная реализация в 40 строчек. Здесь генерируется два числа - секретное значение и множитель, в атрибут формы пишется множитель и произведение чисел, в JS вычисляется частное и подставляется в скрытое поле.

    <?php
    session_start();
    $secret_error = false;
    $is_sent = count($_POST);
    if (
        $is_sent && 
        (
            !isset($_POST['secret']) || 
            !isset($_SESSION['secret']) || 
            $_POST['secret'] !== $_SESSION['secret']
        )
    ) {
        $secret_error = true;
    }
    
    if ($is_sent && !$secret_error) {
        // обрабатываем, шлем письмо
        ?>
        Ваш звонок очень важен для нас!
        <?php
    } else {
        if ($secret_error) {
            ?>
            <p>Вы бот или у вас не включен JavaScript, сделайте с этим что-нибудь!</p>
            <?php
        }
        $multiplier = rand(10, 99);
        $secret = (string) rand(1000,9999);
        $_SESSION['secret'] = $secret;
        ?>
        <form action="" method="post" data-secret="<?= $secret * $multiplier ?>" data-multiplier="<?= $multiplier ?>">
            <label>Ваше имя <input name="name" /></label>
            <input type="hidden" name="secret" />
            <input type="submit" />
        </form>
        <!-- вот это можно вынести в отдельный файл -->
        <script type="text/javascript">
            document.querySelectorAll('form[data-secret]').forEach(function(form) {
                var secret = form.getAttribute('data-secret') / form.getAttribute('data-multiplier');
                form.querySelector('[name="secret"]').value = secret;
            });
        </script>
        <?php
    }


    В принципе можно с тем же успехом написать

    <script type="text/javascript">
            document.querySelector('[name="secret"]').value = "<?= $secret ?>";
    </script>


    Скорее всего кодеру, который делает бота, будет лень разбираться, как оно у вас работает, если оно работает только у вас (то есть не является тиражным решением). Магия со множителями или чем-то таким просто не позволяет вытащить значение одной регуляркой, еще немного снижая шансы заинтересовать злодея =)
    Ответ написан
    1 комментарий
  • Как узнать что элемент вышел из контейнера?

    dubr
    @dubr
    пыхарь
    Если надо код попроще, делайте requestAnimationFrame + getBoundingClientRect, когда элементов мало будет работать норм. Если надо, чтобы быстро работало на больших списках - стройте модель, как советует napa3um
    Ответ написан
    Комментировать