Develop Reference

How do i refresh functions on page resize in jquery

DEMO :
i have a set of functions being used in RWD,
The issue I'am facing is every time i have to refresh the page to run the functions, is there a way to REFRESH FUNCTIONS .
iam using bootstrap, require.js
can someone shed some light on this, the functions why iam refreshing is because of custom components.
sample code :
$(function () {
function toggleNavbarMethod() {
if ($(window).width() > 1024) {
$('nav .score-megamenu-dropdown').on('mouseover', function () {
$('.dropdown-toggle', this).trigger('click');
}).on('mouseout', function () {
$('.dropdown-toggle', this).trigger('click').blur();
});
}
else {
$('nav .score-megamenu-dropdown').off('mouseover').off('mouseout');
}
}
toggleNavbarMethod();
$(window).resize(toggleNavbarMethod);
var PGBRAUN = PGBRAUN || {};
PGBRAUN = {
globalVars: {
onPageLoad: '',
MD_min_width: 992,
XS_max_width: 767,
SM_min_width: 768,
SM_max_width: 991
},
domReady: function () {
$('.mob-header').parent('.container').hide(); // hiding sign in and signup container in dt
},
preventLinks: function () {
/* anything needed to run at DOM load (not page load) would be declared here */
var stopFromLinking = ".score-header ul.header-category li:first-child, .score-footer ul.footer-social-share li:first-child, a.menu-links";
$(document).on('click', stopFromLinking, function (e) {
e.preventdefault();
})
},
megaMenuSP: function () {
if ($(window).width() < 991) {
/* Changing Menu slide-collapse attribute on ready */
$('.score-hamburger.navbar-toggle').attr('data-toggle', 'slide-collapse');
/* Adding of new div for slide container starts*/
$('.score-header').after($('<div id="navbar-height-col"></div>'));
$(".mob-header, .navbar-collapse").wrapAll("<div id='slidemenu'></div>");
//$('html .mob-header').prependTo('.navbar-collapse');
var slidewidth = '80%';
var navbarneg = '-' + slidewidth;
/* Adding of new div for slide container ends*/
$('#navbar-height-col').css({
"width": slidewidth,
"right": navbarneg
});
$('#slidemenu').css({
"width": '86.7%',
"right": navbarneg
});
$('.navbar-toggle').addClass('collapsed');
$('.page-wrapper').attr('id', 'page-content');
navVisible = 0;
/* Main Menu Button Hamburger starts */
$(document).on('click', '.navbar-toggle', function (e) {
//debugger;
/* Show Close Icon starts */
$(this).toggleClass('collapsed');
$(this).toggleClass('collapsed').attr('aria-expanded', 'true');
/* Show Close Icon ends */
/* Hiding Images from Ul dd start */
$('ul.dropdown-menu').find('.header-mega-menu-view-all-button, .header-mega-menu-img').hide();
/* Hiding Images from Ul dd ends */
/* Adding Class for Mobile View starts -> check can this be added on load */
$('.score-megamenu-dropdown').find('.menu-links').addClass('dropdown-toggle toggle-caret button-caret').attr('data-toggle', 'dropdown');
/* Adding Class for Mobile View ends */
/* Finding Mob Sign in Link and Prepending before Navigation starts */
// $('html .mob-header').prependTo('.collapse.navbar-collapse');
/* Finding Mob Sign in Link and Prepending before Navigation ends */
/* Show right side Menu starts */
$('.mob-header').toggle();
$('.navbar-collapse').toggle('collapse');
//$('.mob-header').show();
var selected = $(this).hasClass('slide-active');
$('#slidemenu').stop().animate({
//right: selected ? navbarneg : '0px'
right: selected ? navbarneg : '-15px'
});
$('#navbar-height-col, #page-content').stop().animate({
right: selected ? navbarneg : '0px'
});
$('#page-content').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.navbar-header').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.score-footer').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.score-footer .container').stop().animate({
right: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active', 'fast');
//$('body, #page-content, .navbar, .navbar-header, .score-footer, .score-footer .container').toggleClass('slide-active');
$('body, #page-content, .navbar, .navbar-header, .score-footer, .score-footer').toggleClass('slide-active');
//$('.score-footer .container').hide();
//$('.slide-menu-content').toggle();
//$("body").append('<div class="back-drop" style="position: fixed;height: 100%;width: 100%;top: 0;right:83%;z-index: 990;"><\/div>');
navVisible == 0 ? (navVisible = 1,
$("body").css("cursor", "pointer"),
$("body").append('<div class="back-drop" style="position: fixed;height: 100%;width: 100%;top: 0;right:83%;z-index: 990;"><\/div>')) : (navVisible = 0,
$("body").css("cursor", "inherit"),
$(".back-drop").remove())
//: (navVisible = 0, $("body").css("cursor", "inherit"), $(".back-drop").remove()
/* Show right side Menu ends */
});
$(document).on('click', '.back-drop, #navbar-height-col', function () {
$('.navbar-toggle.slide-active').trigger('click');
})
/* Main Menu Button Hamburger ends */
/* Sub Menu starts */
$('.header-mega-menu a').click(function (e) {
if ($(this).hasClass('menu-links')) {
if ($(this).hasClass('submenu-menu')) {
$(this).removeClass('submenu-menu');
$(this).next().next('.dropdown-menu').hide();
$(this).parents('.header-mega-menu').find('li').removeClass('open');
} else {
$('a.dropdown-toggle').removeClass('submenu-menu');
$(this).parents('.header-mega-menu').find('li').removeClass('open');
$(this).parent().addClass('open');
$(this).addClass('submenu-menu');
$('.dropdown-menu').hide();
$(this).next().next('.dropdown-menu').show();
}
}
if ($(this).hasClass('sub-menu-first-child')) {
if ($(this).hasClass('submenu-menu')) {
$(this).removeClass('submenu-menu');
//$(this).parent().next('.dropdown-menu').hide();
$(this).next('.dropdown-menu').hide();
} else {
$('a.sub-menu-first-child').removeClass('submenu-menu');
$(this).addClass('submenu-menu');
$('.header-mega-menu-content').find('.dropdown-menu').hide();
//$(this).parent().next('.dropdown-menu').show();
$(this).next('.dropdown-menu').show();
}
}
e.stopPropagation();
e.preventDefault();
})
/* Sub Menu ends */
}
var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header, .score-footer';
$(window).on("resize", function () {
if ($(window).width() < 991 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
},
promoBlockMatchHeight() {
$(".promo-match-height").each(function () {
var $promoleft = $(this).find(".score-left .caption");
var $promoRight = $(this).find(".score-right .caption");
$promoleft.height('');
$promoRight.height('');
var promoLeftHeight = $promoleft.innerHeight();
var promoRightHeight = $promoRight.innerHeight();
var heightVal = (promoLeftHeight == promoRightHeight) ? promoLeftHeight : promoRightHeight;
$promoleft.css({
"height": heightVal
});
$promoRight.css({
"height": heightVal
});
});
},
accordianList: function () {
$(".cate-navigator").find(".cat-nav-list-title").click(function (e) {
e.preventDefault();
var $content = $(this).nextAll(".cat-nav-list");
$(".cate-navigator").find(".cat-nav-list").not($content).hide();
//$(this).nextAll(".cat-nav-list").toggle();
$(this).nextAll(".cat-nav-list").toggleClass('display-block');
});
},
init: function () {
PGBRAUN.domReady();
PGBRAUN.preventLinks();
PGBRAUN.megaMenuSP();
PGBRAUN.promoBlockMatchHeight();
PGBRAUN.accordianList();
}/*,
onWindowResizeRefresh: function () {
PGBRAUN.init();
}*/
}
return PGBRAUN.init();
});

As I already mentioned in the comments, you should use unbind() function before you add the mouseover event to your 'nav .score-megamenu-dropdown' element, so it won't bind the same event X times you resize the window.
function toggleNavbarMethod() {
if ($(window).width() > 1024) {
$('nav .score-megamenu-dropdown').unbind('mouseover'); // unbind the event
$('nav .score-megamenu-dropdown').on('mouseover', function () {
$('.dropdown-toggle', this).trigger('click');
}).on('mouseout', function () {
$('.dropdown-toggle', this).trigger('click').blur();
});
}
else {
$('nav .score-megamenu-dropdown').off('mouseover').off('mouseout');
}
}

How to disable scrollify.js on mobile

I am creating new web and need help with JavaScript.
What I want is disable scrollify JS on mobile.
Tried almost everything, not success.
Here is my code:
<script>
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
$.scrollify.disable() // this function is for disable mobile
});
</script>
Thank you

jQuery.scrollify({
touchScroll: false
});
touchScroll: A boolean to define whether Scrollify handles touch scroll events. True by default.

Why don't you check if it's mobile using userAgent and regex like this
You can execute your script only if it's not mobile
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these devices(userAgents)
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
});
}
You can try the below snippet in mobile SO site also. It's working
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these userAgents
console.log("Not Mobile..!");
}else{
console.log("This is Mobile");
}

check this code...
<script>
$(document).ready(function () {
var width = $(window).width();
var height = $(window).height();
if (width > 980 && height > 500) {
$(function () {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
});
} else {
$(".scroll").click(function (e) {
e.preventDefault();
});
$.scrollify.destroy();
}
$(window).resize(function () {
width = $(window).width();
height = $(window).height();
$(function () {
if (width > 980 && height > 500) {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
} else {
$.scrollify.destroy();
$(".scroll").click(function (e) {
e.preventDefault();
});
}
});
});
});

$.scrollify({
section : ".fullSec",
scrollSpeed:2000,
easing: "easeOutExpo",
offset : 0,
scrollbars: true,
setHeights: true,
updateHash: false,
afterResize: function() {
if( $(window).width() < 767) {
$.scrollify.disable()
}else{
$.scrollify.enable()
}
},
});

Timeout Function to Prevent too many click animations

I have the below slide-in menu code I put together from scratch. I'm trying to add a timeout function to prevent too many slide-ins and slide-outs due to multiple clicking. Only one click per 200ms should actually trigger the animation. I tried and tried but could not figure this out. Help! :)
var togglerWidth = $('#mobile-menu-toggler').css('min-width');
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: "0px"
},
500,
'swing',
function () {
});
}
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width();
$('#mobile-menu-toggler').animate({
width: togglerWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: -menuWidth
},
500,
'swing',
function () {
});
}
var activate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
});
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
FIDDLE: http://jsfiddle.net/Lam9rwLg/2/

Use This Code. Timer is set for 2 seconds. Change as per required.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
var setFunction=function(){
$("#mobile-menu-toggler").bind('click',function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
Updated Link : http://jsfiddle.net/Lam9rwLg/5/

Hopefully the below code helps you. Please let me know if it's working as per your intention. Below is the updated javascript codes.
So it does:
Once the click event is clicked, the event subscription would be removed.
There would be setTimeout event to subscribe the event click again.
By doing that, the multiple clicking can be prevented.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$(function(){
TogglerClickSetup();
});
function TogglerClickSetup() {
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").off();
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
window.setTimeout(TogglerClickSetup, 500);
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});

On mouseenter on toggled class

I use a little jquery to change the class of my menu when I resize my browser. That works but when I want to use mouseenter on the new class it doesnt work.
This is my code for resizing:
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
});
This is the code for the mouseenter:
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
If I change nav-top to nav-left in my markup (when the menu has the class nav-left on document ready) the mouseenter works fine.

try this :
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
});

jQuery issues (Safari/Chrome) with smooth scroll

I'm building a site which is a single scroll with smoothscrolls and some more JS for some feature across the page.
On Google Chrome, this seems to work for me with no issues at all; although a few friends have mixed results. On Safari, there seems to be a few issues but, most of all, none of the smooth scrolling seems to work (most of the JS) until you are past the 'landing slide'
I have tried to debug this and check the web inspector console, but no errors are appearing.
Can anyone help?
My JS code is here: http://goo.gl/rcvJe and the site I am building here: http://goo.gl/0vQUe
Many thanks in advance,
R
// Resizing each slide height per height of window
$(document).ready(function() {
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
}
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
}
});
// Initialise the smooth scrolling on anchors
$(document).ready(function() {
$('a.smooth-scroll-no-offset').smoothScroll({
easing: 'swing',
speed: 500
});
});
$(document).ready(function() {
$('a.smooth-scroll').smoothScroll({
easing: 'swing',
speed: 500,
offset: 100
});
});
// Fitvid
$(document).ready(function(){
$('.video-container').fitVids();
});
// Remove arrow hint when near bottom
/*$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 700 ) {
$('.continue-down').fadeOut();
}
else {
$('.continue-down').fadeIn();
}
});*/
// Ajax subscribe form
$(function () {
$('#subForm').submit(function (e) {
e.preventDefault();
$.getJSON(
this.action + "?callback=?",
$(this).serialize(),
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else {
$('#subForm input[type=submit]').animate({opacity:0}).delay(2000).animate({opacity:1});
$('.confirmation-message').animate({opacity:1}).delay(2000).animate({opacity:0});;
$('#subForm').find('input[type=text]').val('');
}
});
});
});
// Some simple colours on hovers
$(document).ready(function() {
$('.menu-navigation-desktop ul li:nth-child(2) a').hover(function()
{ $('.site-intro a:nth-of-type(1)').css({'color':'#69B6D7','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(1)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(3) a').hover(function()
{ $('.site-intro a:nth-of-type(2)').css({'color':'#A396C0','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(2)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(4) a').hover(function()
{ $('.site-intro a:nth-of-type(3)').css({'color':'#777777','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(3)').css({'color':'#333333','border-bottom':'0'}); }
);
});
// Contact form styles and triggers
$(document).ready(function(){
var $c=$('.menu-navigation-desktop ul li:nth-child(5) a').css('background-color');
$('.contact-form').css('background-color',$c);
$('.menu-navigation-desktop li a.contact-form-action').click(function() {
$('.contact-form').toggle();
});
});
// Animations
$(document).ready(function() {
$('.map-icon').addClass('animated pulse');
});
// Mobile navigation
$(document).ready(function() {
$('.navigation-trigger').click(function() {
$('.menu-navigation-mobile ul').slideToggle('fast');
$('span', this).text($('span', this).text() == 'navigatedown' ? 'navigateup' : 'navigatedown');
});
});
// Design process slider
$(document).ready(function() {
var unslider = $('.design-process-slider').unslider({
delay: false,
keys: true,
dots: true,
fluid: true
});
});
$(document).ready(function() {
$('.design-process-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
});
// Sustainability slider
$(document).ready(function() {
var unslider2 = $('.sustainability-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.sustainability-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider2.data('unslider')['next']();
} else {
unslider2.data('unslider')['prev']();
};
});
});
// Testimonial slider
$(document).ready(function() {
var unslider3 = $('.testimonial-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.testimonial-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider3.data('unslider')['next']();
} else {
unslider3.data('unslider')['prev']();
};
});
});
// Map tip hovers
$(document).ready(function() {
$('.map-icon.one').hover(
function () {
$('.map-tip.one').fadeIn();
},
function () {
$('.map-tip.one').fadeOut();
}
);
$('.map-icon.two').hover(
function () {
$('.map-tip.two').fadeIn();
},
function () {
$('.map-tip.two').fadeOut();
}
);
$('.map-icon.three').hover(
function () {
$('.map-tip.three').fadeIn();
},
function () {
$('.map-tip.three').fadeOut();
}
);
$('.map-icon.four').hover(
function () {
$('.map-tip.four').fadeIn();
},
function () {
$('.map-tip.four').fadeOut();
}
);
});
// Testimonial circle cycles
$(document).ready(function() {
$('.testimonial-container').cycle();
});
//
$(document).ready(function() {
$('.menu-navigation-desktop ul li').click(function() {
$('.menu-navigation-desktop ul li').removeClass('active-slide');
$(this).addClass('active-slide');
});
});
$(document).ready(function() {
var sections = $('.each-slide-section-container'),
links = $('.menu-navigation-desktop ul li a'),
lis = $('.menu-navigation-desktop ul li');
$(window).scroll(function() {
var currentPosition = $(this).scrollTop();
links.removeClass('selected');
lis.removeClass('active-slide');
sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).height();
if (currentPosition >= top && currentPosition <= bottom) {
var link = $('a[href="#' + this.id + '"]');
link.addClass('selected');
link.parent().addClass('active-slide');
}
});
});
});
$(document).ready(function() {
$('.each-slide .design-spread-container .design-spread-element').hover(
function () {
$(this).animate({
opacity: 1
})
},
function () {
$(this).animate({
opacity: 0
})
}
);
});

This issue with smoothScroll solved my problem.
https://github.com/kswedberg/jquery-smooth-scroll/issues/29