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
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.
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()
}
},
});
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! :)
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.