$(function() { // show mobile menu only when page loaded document.getElementById('menu').style.opacity = '1'; // grab an element var head = document.getElementById('header'); // construct an instance of Headroom, passing the element var headroom = new Headroom(head, { offset: 200, tolerance: 5 }); // initialise headroom.init(); $('.phone').mask('+7(999)999-99-99'); var homeSlider = $('.home-slider').owlCarousel({ items: 1, loop: true, smartSpeed: 1000, nav: true, navText: ['', ''] }); $('.doctors-slider').slick({ slidesToShow: 3, centerMode: true, centerPadding: '60px', slidesToScroll: 1, autoplay: false, autoPlaySpeed: 5000, speed: 1000, dots: false, prevArrow: '.doctors-prev', nextArrow: '.doctors-next', responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); var reviewSlider = $('.reviews-slider').owlCarousel({ items: 1, loop: true, smartSpeed: 1000, nav: true, navText: ['', ''] }); $('.mfp-img').magnificPopup({ type: 'image', removalDelay: 300, mainClass: 'mfp-fade', fixedContentPos: false, callbacks: { elementParse: function(item) { // Function will fire for each target element // "item.el" is a target DOM element (if present) // "item.src" is a source that you may modify console.log(item); // Do whatever you want with "item" object } } }); $('.open-popup').magnificPopup({ type: 'inline', midClick: true, removalDelay: 500, fixedContentPos: false, mainClass: 'mfp-fade' }); $('.doctor-open-popup').click(function() { var doctorPopup = $(this) .parents('.doctor') .find('.doctor-popup'); // Open directly via API $.magnificPopup.open({ items: { src: doctorPopup, // can be a HTML string, jQuery object, or CSS selector type: 'inline' }, fixedContentPos: false, midClick: true, removalDelay: 500, mainClass: 'mfp-fade' }); }); $('.form').submit(function(e) { e.preventDefault(); var msg = $(this).serialize(); $('#callback').removeClass('active'); $.ajax({ type: 'POST', url: '/mail.php', data: msg, success: function(data) { $('#response .response-content').html(data); $.magnificPopup.open({ items: { src: '#response', // can be a HTML string, jQuery object, or CSS selector type: 'inline' }, fixedContentPos: false, removalDelay: 300, mainClass: 'mfp-fade', midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source. }); }, error: function(xhr, str) { alert('Возникла ошибка: ' + xhr.responseCode); } }); }); slideoutMenu(); dentalTabs(); }); function slideoutMenu() { var slideout = new Slideout({ panel: document.getElementById('page'), menu: document.getElementById('menu'), padding: 256, tolerance: 70, touch: false }); var fixed = document.getElementById('header'); var toggleMenu = document.getElementById('toggleMenu'); var pageScreen = document.getElementById('page-screen'); toggleMenu.addEventListener('click', function() { slideout.toggle(); this.classList.toggle('is-active'); pageScreen.classList.toggle('hidden'); }); slideout.on('translate', function(translated) { fixed.style.transform = 'translateX(' + translated + 'px)'; }); slideout.on('beforeopen', function() { fixed.style.transition = 'transform 300ms ease'; fixed.style.transform = 'translateX(256px)'; }); slideout.on('beforeclose', function() { fixed.style.transition = 'transform 300ms ease'; fixed.style.transform = 'translateX(0px)'; }); slideout.on('open', function() { fixed.style.transition = ''; }); slideout.on('close', function() { fixed.style.transition = ''; }); } function dentalTabs() { $('.dental-tabs__tab') .eq(0) .addClass('is-active'); $('.dental-tabs__content').addClass('hidden'); $('.dental-tabs__content') .eq(0) .removeClass('hidden'); $('.dental-tabs__tab').click(function() { $('.dental-tabs__tab').removeClass('is-active'); $(this).addClass('is-active'); var index = $(this).index(); $('.dental-tabs__content').addClass('hidden'); $('.dental-tabs__content') .eq(index) .removeClass('hidden'); }); } $(document).ready(function() { // document.getElementById('menu').style.opacity = '1'; });