Контакты
Местоположение
Россия

Наибольший вклад в теги

Все теги (5)

Лучшие ответы пользователя

Все ответы (5)
  • Как сделать закрытие при нажатии на другой пункт меню?

    @MiMitin
    Для всех элементов меню которые открывают контейнер, прописываешь атрибут class="menu-trigger-open"
    Для всех кнопок которые закрывают контейнер, прописываешь атрибут class="menu-trigger-close"
    Для всех элементов (которые и открывают и закрывают) прописываешь атрибут menu-id="id управляемого элемента".
    Допустим для кнопки #menu-trigger-2 надо прописать "menu-id"="system-block-hid" и т.д.

    В итоге ссылка для открытия первого блока будет выглядеть следующим образом:
    <a href="#" id="menu-trigger-2" class="menu-trigger-open" menu-id="system-block-hid">Система ДПО ⬇</a>

    А ссылка для закрытия первого блока так:
    <a href="#" id="menu-trigger-a2" class="menu-trigger-close" menu-id="system-block-hid">⬆</a>


    Теперь для каждого блока (который будет показываться) пропишем атрибут class="menu-container". Также к каждому блоку добавим атрибут со значением, которое будет определять отступ для информации ниже. В твоем коде эти значения указаны тут:
    $( ".container" ).animate({
                 bottom: "+=200", // Вот это число надо указать для соответствующего блока ( у каждого они свои)
    }, 1000, function() {
                // Animation complete.
    });


    В итоге блок #system-block-hid получится таким:
    <div id="system-block-hid" class="menu-container" animate-container="200" style="display: none;">
    ... тут содержимое
    </div>

    По аналогии пропиши каждому блоку свои значения.

    Теперь тот код JS, который используется у тебя для открытия/закрытия блоков удали и вставь это:
    $(document).ready(function(){
    	function openContainer(menu, animateContainerVal) {
    		$(".menu-container.open").each(function (idx, element) {
    			let jElement = $(element);
    			closeContainer(jElement, jElement.attr("animate-container"), false);
    		});
    		menu.slideDown(400, function() {
    			menu.addClass("open");
    			$(".container").animate({
    				marginTop: animateContainerVal+"px"
    			}, 1000, function(){
    				// Animation complete
    			});
    		});
    	}
    
    	function closeContainer(menu, animateContainerVal, withAnimateContainer) {
    		menu.slideUp(400, function(){
    			menu.removeClass("open");
    			if(withAnimateContainer) {
    				$(".container").animate({
    					marginTop: "0px"
    				}, 1000, function(){
    					// Animation complete
    				});
    			}
    		});
    	}
    	
    	$(".menu-trigger-open").click(function(e) {
    		e.preventDefault();
    		let menu = $("#"+$(this).attr("menu-id")),
    		animateContainerVal = menu.attr("animate-container");
    		if(menu.hasClass("open")) {
    			closeContainer(menu, animateContainerVal, true);
    		} else {
    			openContainer(menu, animateContainerVal);
    		}
    	});
    
    	$(".menu-trigger-close").click(function (e) {
    		e.preventDefault();
    		let menu = $("#"+$(this).attr("menu-id")),
    		animateContainerVal = menu.attr("animate-container");
    		closeContainer(menu, animateContainerVal, true);
    	});
    });
    Ответ написан
    Комментировать
  • Как ограничить размер загружаемого файла в форме POST?

    @MiMitin
    Размер загружаемого файла настраивается в файле php.ini строчкой "upload_max_filesize = 10M" (без кавычек).

    В браузере можно проверить через javascript:
    let file = document.getElementById("inputfile").files[0];
    if(file.size > 10*1024*1024) {
        alert("Слишком большой файл");
        return;
    }

    Но в любом случае эта проверка весьма условна, т.к. отправить файл бОльшего размера все равно возможно.

    Можно на серверной стороне, но проверять уже загруженный файл такая себе затея. Если сильно хочется:
    if($_FILES['uploadfile']['size'] > 10*1024*1024) {
        exit("Файл слишком большой");
    }

    И все равно размер загружаемого файла будет зависеть от настройки в php.ini.
    Ответ написан
    2 комментария