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();
}
});
Related
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');
}
}
I'm trying to show and hide with toggle the entire side menu bar(#menu_links) when the browser is tunneled to less than 750px.
Does anyone know why the side menu bar (#menu_links) is not hidden by passing the edge of the browser when you click "#menu_button" when the browser size is less than 750?
https://menusel-169ba.firebaseapp.com/
$(document).ready(function () {
$('#menu_links').css({ width: '50px' });
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
// Muesrta panel de CAMBIAR CONTRASEÑA
$('a.test').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var timesClicked = 0;
$("#menu_button").click(function () {
timesClicked++
if (timesClicked % 2 == 0) {
$('#menu_links').animate({ width: '50px' }, 350);
$('.collapse-menu').removeClass('show');
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
} else {
$('#menu_links').animate({ width: '200px' }, 350);
$('.collapse-menu').addClass('show');
$('.collapse-menu').removeClass('hidden');
$('ul#menu_links li').hover(function () {
}, function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
});
}
console.log(timesClicked % 2);
});
var menu_buttonVar = document.querySelector("#menu_button"),
menu_linksVar = document.querySelector("#menu_links");
// checkWidth() BREACK-POINTS
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 750) {
console.log("screen width is less than 480");
menu_linksVar.style.left = "-50px";
$('#menu_button').click(function () {
$('#menu_links').animate({
left: '0px',
}, 0);
});
} // END if
else {
console.log("screen width is greater than or equal to 960");
menu_linksVar.style.left = "0px";
}
};
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
}); // END documentReady
Now my menu is ready and it works fine.
The next step is synthesize the code to work with the same functions but with less characters.
Here is the link:
https://menusel-169ba.firebaseapp.com/
Thank you.
The idea is to execute an animation while the cursor is over a div. I've done this other times but now the function with the animation receives a parameter and if I add the parameter the page blows up. Without that last call to the function the code doesn't crash the page.
Please check my code:
function OnHover() {
function Animation(obj) {
obj.stop().animate({ top: '20px' }, 600).animate({ top: '0px' }, 600, Animation(obj));
}
$('#infobox').hover(
function(event) {
$circle = $(event.target).children().first();
Animation($circle);
},
function(event) {
$circle = $(event.target).children();
$circle.stop();
}
);
}
I have used this workaround:
$target = undefined;
$("#wrapper .infobox").mouseenter(event, function animate() {
if (typeof $target == 'undefined')
$target = $(event.target).children();
$target.animate({ marginTop: "+=40px" }, 600);
$target.animate({ marginTop: "-=40px" }, 600, animate);
}
);
$("#wrapper .infobox").mouseleave(function() {
$target.stop(true, false).animate({ marginTop: '20px'}, 300);
$target = undefined;
}
);
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
I am a bit confused... I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn't load.
When I put it above the jquery.min.js file its loads fine but when its below it fails to load.
Im thinking there is something wrong with my jquery file.. but not sure what!
My Javascript file is:
/* =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/
$(document).ready(function () {
$('.project').mouseover(function ()
{
$(this).children('.cover').animate(
{
height: "172px"
});
$(this).children('.title').animate(
{
bottom: '-25px', height: "100px"
});
});
$('.project').mouseleave(function ()
{
$(this).children('.cover').animate(
{
height: "17px"
});
$(this).children('.title').animate(
{
bottom: "0px", height: "20px"
});
});
});
/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/
$(window).load(function () {
$("#contactArea").css('height', '0px');
$(".contact-hurry a").toggle(
function () {
$(this).text('Quick Contact Hide / Close [-]')
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
$("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
},
function () {
$(this).text('Quick Contact Show / Open [+]')
$("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
/* =======================================================================================================================================*/
// Mega Menu $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/
$(document).ready(function () {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 150;
//Calculate row
$(this).find("ul.floating").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 100, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
jQuery(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
/* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/
$(document).ready(function(){
$("#faqs tr:odd").addClass("odd");
$("#faqs tr:not(.odd)").hide();
$("#faqs tr:first-child").show();
$("#faqs tr.odd").click(function(){
$(this).next("tr").toggle('fast');
$(this).find(".arrow").toggleClass("up");
});
});
/* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/
/*
$(document).ready(function() {
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3900);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
});
});
*/
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
scroll : {
items : "page"
},
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});
I am not sure what you actually mean, but I give it a shot.
If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.
That is why including jquery must be done before everything else.