Jquery file not loading

Jquery file not loading - javascript

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.

Related

Images overlapping with Masonry

I'm currently using jQuery Masonry and the imagesLoaded plugin on a WordPress theme, but images are still overlapping when I load the page.
The layout displays well only when I resize the page but otherwise it still looks bad.
Here's a screenshot of the layout when the page loads:
Here's my code for now:
jQuery(function ($) {
$('.gridContainer').imagesLoaded( function() {
var doneMasonry = false;
function doPostsMasonry() {
if (doneMasonry) {
return;
}
doneMasonry = true;
var masonry = $(".post-list.row");
var images = masonry.find('img');
var loadedImages = 0;
var debounceMasonryRefresh = jQuery.debounce(function () {
masonry.data().masonry.layout();
}, 500);
function imageLoaded() {
loadedImages++;
if (images.length === loadedImages && masonry.data().masonry) {
masonry.data().masonry.layout();
}
}
images.each(function () {
$(this).on('load', imageLoaded);
debounceMasonryRefresh();
});
var items = $(".post-list.row .post-list-item");
var index = items.length - 1;
items.each(function () {
$(this).css({
width: $(this).css('max-width')
})
});
if (masonry.length) {
masonry.masonry({
itemSelector: '.post-list-item',
percentPosition: true,
columnWidth: '.' + items.eq(index).attr('data-masonry-width')
});
}
}
if (window.innerWidth >= 768) {
doPostsMasonry();
}
$(window).resize(function () {
if (window.innerWidth >= 768) {
doPostsMasonry();
}
})
})
});
I also tried using the function layoutComplete (eg. $('.div').on('layoutComplete', function {})) but it does not work either.
You can have a look at the page live here: https://www.lesvoyagesdemma.fr/bonsplans

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');
}
}

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();
}
});

Animation ( bar fills up over time ) with Jquery (Suggestion)

I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!

http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)

There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)

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

Develop Reference

JavaScript is the programming language of the Web.

Jquery file not loading - javascript

Related

Images overlapping with Masonry

How do i refresh functions on page resize in jquery

Timeout Function to Prevent too many click animations

Animation ( bar fills up over time ) with Jquery (Suggestion)

jQuery issues (Safari/Chrome) with smooth scroll

Categories

Resources