Ответы пользователя по тегу JavaScript
  • Адаптивный анимированный слайдер?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Прочитать описание к посту и найти Github разработчика.
    https://github.com/Cuberto/liquid-swipe
    Ответ написан
  • Как проверить "дочерность" кликнутого элемента?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Ход мыслей у вас правильный, но вот условие сокрытия вы написали не так. Например, вы пытаетесь вызвать .children(selector) у DOM-объекта, а не jQuery-объекта.

    У вас уже используется jQuery, так почему бы не использовать его методы?

    // Если меню не является e.target и e.target не находится внутри меню
    if (!$('.mobile-nav').is(e.target) && !$('.mobile-nav').find(e.target).length) {
        hideNav();
    }
    Ответ написан
    Комментировать
  • Условная конструкция и value?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    1. Обработчик у вас на кнопку не навесится, т.к. у кнопки нет класса, который вы указали в JS. Уберите точку, или добавьте кнопке класс.
    2. div не может иметь value, вместо этого используйте вместо этого data-аттрибут:<div class="time-wrap" data-value="25"></div>$('.time-wrap').data('value') == 25 или замените div на <input type="hidden" value="25">
    Ответ написан
    Комментировать
  • Как вызвать виджет сообщений ВК по своей ссылке?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    В качестве обработчиков событий я написал строчки, использующие jQuery, но вы можете и обычным JS управиться, если хотите.
    <span class="show_widget">Показать с помощью моей кнопки</span>
    <span class="hide_widget">Скрыть с помощью моей кнопки</span>
    <script type="text/javascript" src="//vk.com/js/api/openapi.js?151"></script>
    
    <!-- VK Widget -->
    <div id="vk_community_messages"></div>
    <script type="text/javascript">
        var widget = VK.Widgets.CommunityMessages("vk_community_messages", 120401514, {tooltipButtonText: "Я онлайн! Отвечу на все ваши вопросы."});
        $('.show_widget').click(function(){
            widget.expand();
        });
        $('.hide_widget').click(function(){
            widget.minimize();
        });
    </script>
    Ответ написан
    7 комментариев
  • Почему такая большая задержка перед началом анимации?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Изначально стоит класс blink_on, поэтому первый раз (после изначальной задержки в 6 секунд) просто удаляется класс, а уже через 12 начинается нормальная анимация.

    Если нужно чтобы функция начиналась сразу, то нужно ее объявить, вызвать, а уже потом назначить интервал.
    Ответ написан
    Комментировать
  • Как минимизировать скрипт jQuery?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Ну вот так, к примеру:
    $(document).ready(function(){
    	$("form").submit(function(event){
    		var $parent = $("#name, #email").parent().removeClass("has-success has-error");
    		//проверка поля name
    		$("#name").parent().addClass($("#name").val() ? "has-success" : "has-error");	
    		//проверка поля email
    		$("#email").parent().addClass($("#email").val() ? "has-success" : "has-error");	
    		// запрещаем отправлять, если есть хоть одна ошибка
    		if($parent.hasClass("has-error")) {
    			event.preventDefault();
    		}
    	});
    });


    А если циклом, то вот так можно (все внутри замыкания можно и в одну строку написать, но так нечитабельно будет):
    $(document).ready(function(){
    	$("form").submit(function(event){
    		$("#name, #email").each(function(){
    			$(this).parent()
    				.removeClass("has-success has-error")
    				.addClass($(this).val() ? "has-success" : "has-error")
    				.hasClass("has-error") 
    				&& event.preventDefault();
    		});
    	});
    });
    Ответ написан
  • После добавления класса через js, происходят плавные изменения, как сделать, чтобы изменения были резкими?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Ну у вас же указан transition, который и делает эти изменения плавными. Вы выбирайте уж, шашечки или ехать. Ну или с помощью jQuery отключайте предварительно transition, а потом включайте обратно
    Ответ написан
    Комментировать
  • Как вывести картинки одна на другой все разом и по клику на ссылку менять которая из них лежит "сверху" всех?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Вообще тут даже JS не особо нужен, можно управиться одними HTML+CSS.

    Как то так:
    <p>
    	Текст текст <a href="#one">ссыль1</a> текст <a href="#two">ссыль2</a>
    	Еще текст лорем ипсум <a href="#three">все дела</a> сит амет 
    	И еще <a href="#four">ссыль4</a>
    </p>
    <div class="slider">
    	<img id="one"   src="image1.jpg">
    	<img id="two"   src="image2.jpg">
    	<img id="three" src="image3.jpg">
    	<img id="four"  src="image4.jpg">
    </div>
    <style type="text/css">
    	.slider {
    		position: relative;
    		overflow: hidden;
    	}
    	.slider img {
    		display: none;
    		position: absolute;
    	}
    	.slider img:target {
    		display: inline;
    	}
    </style>

    CSS-transition по вкусу, для появления плавного можно использовать вместо display свойства width или opacity вместе с transition
    Ответ написан
  • Как сохранить в localstorage а не в кукисы?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    setItem
    getItem

    Cookies.set(messageClass, isVisible); => localStorage.setItem(messageClass, isVisible);

    (Cookies.get(messageClass) || false) == 'false' => localStorage.getItem(messageClass) != "true"
    Ответ написан
    3 комментария
  • Как сделать выдвигающееся меню справа?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Родителю нужно назначить overflow: hidden;
    Ответ написан
    1 комментарий
  • Не работают события у новых элементов, созданных createElement(). Почему?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Потому что на момент привязки события данного элемента не существовало. Привязывайте к родителю:
    $(".test").on("change", ".check_class", function(e) {
    	alert('123');
    });
    Ответ написан
    Комментировать
  • Переключение таба при клике на ссылку. Как сделать?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Если ваша ссылка ведет на ту же страницу, можно просто <a href="#tab1">
    $('a[href^="#tab"]').click(function(){
        $.ionTabs.setTab("Tabs_Group_name", "Tab_" + $(this).attr("href").replace('#tab', '') + "_name");
    });


    Но вообще, если без анимации ваши табы работают, то почему бы не наложить их друг на друга и не добавить немного CSS-магии?
    <div class="content">
        <div id="tab1">Beratung</div>
        <div id="tab2">Jahresabschluss</div>
        <div id="tab3">Finanzbuchhaltung</div>
        <div id="tab4">Lohn- und Gehaltsbuchführung</div>
        <div id="tab5">Steuererklärungen</div>
    </div>

    .content {
        position: relative;
    }
    .content > div {
        position: absolute;
        display: none;
        background: #eee;
        width: 100%;
    }
    .content > div:first-child,
    .content > div:target {
        display: block;
    }

    Можно и анимацию добавить, если добавить transition и вместо display оперировать width или opacity
    Ответ написан
    Комментировать
  • Почему не стоит реализовывать взаимодействие с элементами при onmousedown?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Потому что не мышью единой. Если вы обрабатываете onmousedown, то вам еще нужно и о других позаботиться, ontouchstart, и прочих. Клик более универсален в этом плане, к тому же, не каждый пользователь кликает на ссылку с желанием по ней перейти. Возможно, он промахнулся, а может хочет ее перетянуть. Не пытайтесь оптимизировать то, что не требует оптимизации, разница между onmousedown и onclick, если пользователь желает перейти по ссылке настолько незначительна, что ее никто не заметит.
    Другое дело, если вам необходимо обработать именно onmousedown. К примеру, для реализации долгого клика мышью, который бы открывал ваше контекстное меню. Вот именно для таких случаев это событие и существует.
    Ответ написан
    Комментировать
  • Как сделать, чтобы скролл у popup не был виден, но работал? И чтобы popup появлялся плавно?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    В общем-то нужно поместить скроллящийся контейнер в несролящийся, а дальше сделать так:
    .parent {
        overflow: hidden;
    }
    .child {
        margin-right: -20px;
        padding-right: 20px;
    }

    Ширина самого широкого скролла - 17px на современных системах (Windows 10 Chrome/FF)? 20px должно хватать и на старые. Что делает код: Расширяет контейнер со скроллом на 20px, а контенту в нем дает отступ. С помощью сокрытия переполнения родителя достигается эффект отсутствия скроллбара.

    Для плавности можете посмотреть в сторону $().animate() (ссыль) или в сторону шорткатов
    $().hide(200), $().show(200), $().fadeIn(200), $().fadeOut(200)
    , где 200 - длительность анимации в миллисекундах.
    Ответ написан
    Комментировать
  • Как сделать подобное мерцание на кнопке?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Ну, на данном сайте внутри кнопки есть элемент , который перемещается из одного места в другое через равные промежутки времени.
    Я бы сделал так:
    1. Кнопке назначаем position: relative;
    2. Создаем внутри нее псевдоэлемент с
    position: absolute;
    width: 1em;
    height: 1em;
    opacity: 0;
    border-radius: 0.5em;
    transform: scale(0);
    transition: all 1.5s linear
    и центрируем любым известным способом
    3. При наведении каждые N миллисекунд проверяем положение курсора внутри элемента, назначаем эти координаты через свойства top и left нашему псевдоэлементу и пишем ему произвольный scale и opacity, тем самым он будет расширяться от курсора. А способ затухания и сброса анимации на ваш вкус.
    Ответ написан
    Комментировать
  • Jquery событие для динамически изменяемого URL?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    $(document).ready(function(){ 
        $(window).on('hashchange', function(e){
            if (window.location.hash == '#4') {
                // Do smth
            }
        });
    }
    Ответ написан
  • Можете посоветовать онлайн-курсы по программированию?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    На code.org есть интересный курс по основам программирования в игровой форме.
    Ответ написан
  • Что поменять чтобы ajax подгрузка работала от скроллинга?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    1. Поменять $('body').on('click') на $('html, body').on('scroll')
    2. URL запроса запрятать вместо ссылки в какой-нибудь data-аттрибут на элементе с id. Например на контейнере того, что вы подгружаете.
    3. Добавить условие, чтобы callback выполнялся только при подходе к нижней границе контента. Тут есть несколько вариантов, сравнивать позицию нижней границу окна с позицией конца страницы, или определить элемент, при появлениии которого в поле зрения можно начинать подгрузку.
    4. Не забывайте, что до окончания подгрузки вам желательно больше не отправлять ajax-запросов, поэтому можно добавить флаг, который перед ajax будет устанавливаться в значение true, а на 'complete-событии ajax-а снова сбрасываться в false
    Ответ написан
    Комментировать
  • Как реализовать подсветку строки, чтобы текст можно было выделить и скопировать?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Дело в псевдоэлементе, который следует за .code-line. Он у вас перекрывает область выделения.

    Добавление к .code-line:after свойства pointer-events: none; поможет этого избежать.
    Ответ написан
    3 комментария