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

    Exomode
    @Exomode
    Архитектор ПО
    event.preventDefault();
    или просто логику подписи событий приведите в порядок.
    Ответ написан
  • Как задать класс блоку, при достижении прописанного id?

    Exomode
    @Exomode
    Архитектор ПО
    Здесь то что вам нужно. Я уже неоднократно отвечал на этот вопрос здесь. В сети есть целая куча всевозможных вариаций решения вашей задачи, достаточно лишь погуглить. По сути, всё сводится к тому, что в обработчике пролистывания страницы вам нужно проверять позицию нужного элемента на экране, вы проверяете его смещение относительно позиции скролла. Когда координаты смещения удовлетворяют условию, вы выполняете требуемое вам действие. Это одна из самых тривиальных задач jQuery.
    Ответ написан
  • Как, проскролив определенную высоту, поменять background у дива с классом header?

    Exomode
    @Exomode
    Архитектор ПО
    В обработчике скроллинга поставьте проверку на позицию скроолинга относительно текущего блока на экране, если условие верно, то просто меняете стиль блока меню background: #fff; color: #000;
    Ответ написан
  • Как обновлять фукнкцию каждую секунду и перематывать страницу в самый низ?

    Exomode
    @Exomode
    Архитектор ПО
    Для вызова функции по таймеру используйте setInterval(callback, timeout, args), для перемотки отрабатывайте событие scroll.
    Ответ написан
  • Как передать массив данных json php в html через Jquery правильно?

    Exomode
    @Exomode
    Архитектор ПО
    Пример серверсайда:
    function response($data = []) {
        header("Content-Type: application/json; charset=utf-8");
    
        $flags = JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_PRETTY_PRINT;
    
        $fails = implode('|', array_filter([
            '\\\\',
            $flags & JSON_HEX_TAG ? 'u003[CE]' : '',
            $flags & JSON_HEX_AMP ? 'u0026' : '',
            $flags & JSON_HEX_APOS ? 'u0027' : '',
            $flags & JSON_HEX_QUOT ? 'u0022' : '',
        ]));
    
        $pattern = "/\\\\(?:(?:$fails)(*SKIP)(*FAIL)|u([0-9a-fA-F]{4}))/";
    
        $callback = function ($m) {
            return html_entity_decode("&#x$m[1];", ENT_QUOTES, 'UTF-8');
        };
        
        echo preg_replace_callback($pattern, $callback, json_encode($data, $flags));
        exit;
    }
    
    response([ "a" => "b", ]);


    Пример клиентсайда:
    $.post('/some_page.php?', post).done(function (response) {
      // обработчик json, в переменной response сразу распарсенный объект благодаря заголовку Content-Type: application/json
                }).fail(function(xhr, status, error) {
                    console.error(error); // обработчик ошибки ответа сервера
                });

    По аналогии с методами $.get и .$ajax.
    Ответ написан
  • Почему не срабатывает условие?

    Exomode
    @Exomode
    Архитектор ПО
    Для начала, неплохо было бы разобраться с основами синтаксиса языка.
    $(document).ready(function () {
        if ($(".current-menu-item").hasClass("menu-item-has-children")) {
            console.log("sdfsdg");
            $("#header").css({ height: "282px" });
        }
    });
    Ответ написан
  • Зачем нужно событие change jQuery?

    Exomode
    @Exomode
    Архитектор ПО
    Затем, что прежде чем изучать фреймворк к языку, сперва стоит изучить сам язык. В JavaScript есть ряд событий, таких как onclick, onsubmit, onload и тд, onchange среди них. Событие происходит, когда значение input, select или textarea меняется. В jQuery существуют методы-обёртки над этими событиями, которые можно удобно использовать. $(e).click() вызовет событие клика, а $(e).click(function () { }) повесит на событие onclick обработчик - коллбэк, переданный первым аргументом метода. Помимо этого, есть ещё метод on(), который позволяет прицепить обработчики сразу к ряду селекторов, например $(document).on("change", "input, select, textarea", function (e) { }).
    Ответ написан
  • Как сохранить класс активной ссылки после перезагрузки страницы?

    Exomode
    @Exomode
    Архитектор ПО
    Можно сохранить параметр в куку, можно привязаться к хешу урла, после перезагрузки он никуда не исчезнет и можно будет проверить наличие:
    var hash = window.location.hash;
    var selectedOption = null;
    
    if (hash && hash != '#') {
      var parts = hash.split('=');
    
      if (parts.length == 2 && parts[0] == "select_option") {
        selectedOption = parts[1];
      }
    }

    Дальше просто присвоить свойство selected селектору "select option[name='" + selectOption + "']" при загрузке страницы, а в onchange списка обновлять хэш. Не часто вижу чтобы подобное решение применялось, но иногда оно вписывается куда элегантнее и проще, чем даже те же куки, которые можно очистить и всё слетит, или вообще отключить. Хэши напоминают строку GET-запроса, только работают исключительно в рамках клиентсайда.

    Эти два варианта подойдут для сугубо клиентской привязки. Можно еще и с помощью сервера организовать, сразу отдавать на клиент разметку с выделенным элементом списка в зависимости от параметра запроса или куки, или сессии, как угодно.

    Вместо списков можно применить к любому элементу, достаточно лишь изменить селектор и вместо свойства selected использовать атрибут классов, к примеру. Всё от вашей фантазии зависит, решений здесь много.
    Ответ написан
  • Как правильно реализовать Ajax Передачу данных из ui-dialog в php обработчик?

    Exomode
    @Exomode
    Архитектор ПО
    $(document).on("submit", "#your_form", function (e) {
        var id = $("#your_form input[name='id']").val() >> 0;
        var login = $("#your_form input[name='login']").val();
        var request = {};
    
        if (id > 0) {
            request["id"] = id;
        }
    
        if (login) {
            request["login"] = login;
        }
    
        $.post("/handler.php", request).done(function (response) {
            if (response) {
                 alert(response);
                 return;
            }
    
            window.location.href = "/new/address/";
        });
    
        return false;
    });


    if (!isset($_POST["id"]) || !isset($_POST["login"])) {
        echo "ID и логин обязательны для заполнения";
        exit;
    }
    
    // Обработать $_POST["id"] и $_POST["login"], предусмотреть валидацию и экранирование спецсимволов
    
    exit;


    Используйте метод $.ajax лишь в случае, если вам важна тонкая настройка взаимодействия с сервером или, например, для добавления файлов в форму после их превалидации на клиенте. Для всех остальных случаев методов $.post и $.get более чем достаточно.

    В данном примере я вешаю на событие onsubmit обработчик через $(document).on(), для того, чтобы событие отработало даже если форма была добавлена в DOM уже после загрузки документа. Затем я получаю два поля формы, первый привожу к int с помощью >> 0 (это самый простой и самый производительный способ привести переменную к типу int в JavaScript), а второе поле у меня string. Далее я формирую параметры запроса к серверному обработчику (скрипт /handler.php), предварительно проверив данные на присутствие в форме и корректность int (по моим условиям, он должен быть unsigned), после чего я отправляю данные на обработчик и жду ответа, ответ я получаю в коллбэке done(response), где обрабатываю его. Если ответ пришел - значит ошибка и вывожу в алерте на экран, иначе все валидно и делаю редирект на другой адрес. В конце обработчика формы я прописал return false, если этого не сделать, то форма автоматически перейдет по адресу, указанному в атрибуте action, что нарушит задуманную логику и браузер даже не успеет вывести алерт в случае ошибки.

    С серверным скриптом обработки думаю все и так ясно и объяснять не стоит.

    Данный пример я накидал на импровизации, это один из множества способов реализации необходимой вам задачи и не претендует на эталон, Вы вправе закодировать нужную вам логику как вашей душе угодно как на стороне клиента, так и на серверсайде.
    Ответ написан
  • Находил ли кто подобный плагин?

    Exomode
    @Exomode Автор вопроса
    Архитектор ПО
    Аналогов я так и не нашел, вот решение, которое написал за вчера сам:
    var blackCoeff = 1.25;	// Коэффициент затемнения
    
    var sectionList;
    var blackList;
    var counter;
    
    function buildStyles() {
    	var styles = 'body {' +
    					'height: ' + ($("body").height() + 'px;') +
    					'position: relative;' +
    				 '}' +
    				 
    				 '.black {' +
    					'position: absolute;' +
    					'top: 0;' +
    					'left: 0;' +
    					'background: black;' +
    					'opacity: 0.8;' +
    				 '}' +
    					
    				 'section {' +
    					'position: relative;' +
    					'top: 0;' +
    				 '}' +
    				 
    				 'section.fixed {' +
    					'position: fixed;' +
    					'top: 0;' +
    				 '}';
    
    	$('head').append('<style id="sticky-stack-styles" type="text/css">' + styles + '</style>');
    }
    
    $(window).on('scroll', function() {
    	var windowScrollPos = $(window).scrollTop();
    	var tmpCounter = counter;
    	
    	counter = 0;
    	
    	for (var i = 0; i < sectionList.length; i++) {
    		if (windowScrollPos >= $(sectionList[i]).offset().top) {
    			counter++;
    		}
    	}
    	
    	if (counter > 1) {
    		$(blackList[counter - 2]).css("opacity", (windowScrollPos / $(sectionList[counter < sectionList.length ? counter : counter - 1]).offset().top - 1) * (-counter * blackCoeff));
    	}
    	
    	if (counter != tmpCounter) {
    		for (var i = 0; i < sectionList.length; i++) {
    			$(sectionList[i]).removeClass("fixed");
    		}
    		
    		if ((tmpCounter == 2 && counter <= 1)) {
    			return;
    		}
    		
    		$(sectionList[counter - 1]).addClass("fixed");
    	}
    });
    
    $(function () {
    	$("footer").append("<section/>");
    	
    	sectionList = $("section");
    	
    	for (var i = 0; i < sectionList.length; i++) {
    		var zIndex = (sectionList.length - i) * 2;
    		$(sectionList[i]).css("z-index", zIndex);
    		
    		if (i == 0) {
    			continue;
    		}
    		
    		$(sectionList[i]).prepend('<div class="black" style="width: ' + $(sectionList[i]).width() + 'px; height: ' + $(sectionList[i]).height() + 'px; z-index: ' + (zIndex + 1) + '"></div>');
    	}
    	
    	blackList = $(".black");
    	
    	buildStyles();
    });


    Полностью соответствует требованиям задачи ТЗ заказчика, не затрагивает структуру оригинальной верстки и стили, генерит что ему надо на лету, подключается в одну строку.
    Ответ написан
  • Можно ли сделать прокрутку в другую сторону?

    Exomode
    @Exomode
    Архитектор ПО
    Если я правильно тебя понял, ты пытаешься добиться эффекта т.н. "Parallax"? Есть готовые библиотеки JS, так же можно сделать на CSS3, оптимизация во втором случае будет заметно лучше, особенно на больших изображениях.

    50+ Best jQuery Parallax Plugin
    Параллакс на чистом CSS
    Ответ написан