Robert Granlund
asked on
jQuery Scroll on Mobile devices
I have the following jQuery to add a smooth scroll to your browser window. It works great. However, on certain Mobile devices, like an iPad, it causes the scroll to go really slow. Does anyone know of a fix, or what I should adjust in the code to compensate?
<script>
/*
* Bones Scripts File
* Author: Eddie Machado
*
* This file should contain any js scripts you want to add to the site.
* Instead of calling it in the header or throwing it inside wp_head()
* this file will be called automatically in the footer so as not to
* slow the page load.
*
* There are a lot of example functions and tools in here. If you don't
* need any of it, just remove it. They are meant to be helpers and are
* not required. It's your world baby, you can do whatever you want.
*/
/*
* Get Viewport Dimensions
* returns object with viewport dimensions to match css in width and height properties
* ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript )
*/
function updateViewportDimensions() {
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
return { width:x,height:y };
}
// setting the viewport width
var viewport = updateViewportDimensions();
/*
* Throttle Resize-triggered Events
* Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
* ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
*/
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
timers[uniqueId] = setTimeout(callback, ms);
};
})();
// how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok.
var timeToWaitForLast = 100;
/*
* Here's an example so you can see how we're using the above function
*
* This is commented out so it won't work, but you can copy it and
* remove the comments.
*
*
*
* If we want to only do it on a certain page, we can setup checks so we do it
* as efficient as possible.
*
* if( typeof is_home === "undefined" ) var is_home = $('body').hasClass('home');
*
* This once checks to see if you're on the home page based on the body class
* We can then use that check to perform actions on the home page only
*
* When the window is resized, we perform this function
* $(window).resize(function () {
*
* // if we're on the home page, we wait the set amount (in function above) then fire the function
* if( is_home ) { waitForFinalEvent( function() {
*
* // update the viewport, in case the window size has changed
* viewport = updateViewportDimensions();
*
* // if we're above or equal to 768 fire this off
* if( viewport.width >= 768 ) {
* console.log('On home page and window sized to 768 width or more.');
* } else {
* // otherwise, let's do this instead
* console.log('Not on home page, or window sized to less than 768.');
* }
*
* }, timeToWaitForLast, "your-function-identifier-string"); }
* });
*
* Pretty cool huh? You can create functions like this to conditionally load
* content and other stuff dependent on the viewport.
* Remember that mobile devices and javascript aren't the best of friends.
* Keep it light and always make sure the larger viewports are doing the heavy lifting.
*
*/
/*
* We're going to swap out the gravatars.
* In the functions.php file, you can see we're not loading the gravatar
* images on mobile to save bandwidth. Once we hit an acceptable viewport
* then we can swap out those images since they are located in a data attribute.
*/
function loadGravatars() {
// set the viewport using the function above
viewport = updateViewportDimensions();
// if the viewport is tablet or larger, we load in the gravatars
if (viewport.width >= 768) {
jQuery('.comment img[data-gravatar]').each(function(){
jQuery(this).attr('src',jQuery(this).attr('data-gravatar'));
});
}
} // end function
/*
* Put all your regular jQuery in here.
*/
jQuery(document).ready(function($) {
/* Footer Calendar */
var int = setInterval(function() {
if ($('#footer-calendar').find('.picker__day').length > 0) {
clearInterval(int);
init_calendar();
}
}, 100);
function init_calendar() {
$('.picker__day').on("click", function(e) {
$('#footer-calendar').addClass('calendarstart');
});
}
////////////////////////////////////////GENERAL FUNCTIONS
// $(window).on('beforeunload', function() {
// $(window).scrollTop(0);
// });
$(window).on('load', function() {
$(window).scrollTop(0);
});
$('#homepage-section-3').css('margin-top', $(window).height() + 2700);
// Navigation
$('#menu-btn').on('click', function() {
if ($('#mainNav').hasClass('visible')) {
$('#mainNav').addClass('fade');
$('#menu-btn').toggleClass('visible');
$('body, html').toggleClass('open_menu');
setTimeout(
function() {
$('#mainNav').removeClass('visible');
$('#logo-white').toggleClass('visible');
$('header').toggleClass('visible');
$('#logo').toggleClass('invisible');
$('#mainNav').removeClass('fade');
}, 1000);
}
else {
$('#mainNav').addClass('visible');
$('#logo-white').toggleClass('visible');
$('header').toggleClass('visible');
$('#menu-btn').toggleClass('visible');
$('body, html').toggleClass('open_menu');
$('#logo').toggleClass('invisible');
}
});
function customScroll(e) {
}
window.addEventListener("keydown", function(e) {
// space and arrow keys
var section3visible = $('body').hasClass('all-visible');
//console.log(section3visible, 's3v');
if([34, 35, 40].indexOf(e.keyCode) > -1 ) {
e.preventDefault();
window.scrollBy(0,30);
//if (downCounter <= 25) {
//downCounter++;
//}
}
if([33, 36, 38].indexOf(e.keyCode) > -1 ) {
e.preventDefault();
window.scrollBy(0,-30);
//if (downCounter > 0) {
//downCounter--;
//}
}
}, false);
/*window.addEventListener('wheel', function(e) {
e.preventDefault();
wDelta = e.wheelDelta < 0 ? 'down' : 'up';
if (wDelta == 'down') {
window.scrollBy(0,30);
if (downCounter <= 25) {
downCounter++;
}
}
else if (wDelta == 'up') {
window.scrollBy(0,-30);
if (downCounter > 0) {
downCounter--;
}
}
}, false);
window.addEventListener('DOMMouseScroll', function(e) {
e.preventDefault();
wDelta = e.wheelDelta < 0 ? 'down' : 'up';
if (wDelta == 'down') {
window.scrollBy(0,30);
if (downCounter <= 25) {
downCounter++;
}
}
else if (wDelta == 'up') {
window.scrollBy(0,-30);
if (downCounter > 0) {
downCounter--;
}
}
}, false);*/
var scrollTimer, lastScrollFireTime = 0;
var prevScrollTop = 0;
$(window).on('scroll', function() {
var minScrollTime = 250;
var now = new Date().getTime();
function processScroll() {
if ($(window).scrollTop() >= prevScrollTop) {
//console.log($(window).scrollTop(), scrollTop);
//console.log('scroll down');
if (downCounter <= 25) {
downCounter++;
}
}
else {
// scrollDirection = "up";
//ready = 0;
//console.log('scroll up');
if (downCounter >= 1) {
downCounter--;
}
}
prevScrollTop = $(window).scrollTop();
}
if (!scrollTimer) {
if (now - lastScrollFireTime > (3 * minScrollTime)) {
//processScroll(); // fire immediately on first scroll
lastScrollFireTime = now;
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
lastScrollFireTime = new Date().getTime();
processScroll();
}, minScrollTime);
}
});
// window.addEventListener('DOMMouseScroll', function(e) {
// e.preventDefault
// }, false);
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
// deal with the page getting resized or scrolled
window.addEventListener("scroll", updatePosition, false);
window.addEventListener("resize", updatePosition, false);
// $('#homepage-section-3').css('margin-top', $(window).height() + 300);
// $('#homepage-section-3').css('height', $(window).height());
var scrollTop = $(document).scrollTop();
updatePosition();
$('header').removeClass('white-logo');
$(window).on('load',function(){
$('#loader').addClass('invisible');
})
var ready = 0;
var readyUp = 0;
var downCounter = 0;
var fired2 = false;
var fired3 = false;
function updatePosition() {
// add your code to update the position when your browser
// is resized or scrolled
//console.log(scrollTop);
var scrollDirection = "down";
var section3bottom = -100;
// Update scrollDirection
//console.log($(window).scrollTop());
//console.log(scrollTop);
if ($(window).scrollTop() >= scrollTop) {
scrollDirection = "down";
readyUp = 0;
}
else {
scrollDirection = "up";
ready = 0;
}
//console.log(downCounter, scrollDirection);
scrollTop = $(document).scrollTop();
//scrollTop = $('body').scrollTop();
//console.log(scrollDirection);
//Fade in background after scrolling element to top of window
var target = document.getElementById('homepage-section-3');
var pos = getPosition(target);
var anim1 = document.getElementById('canvas1');
var anim1pos = getPosition(anim1);
var anim2 = document.getElementById('canvas2');
var anim2pos = getPosition(anim2);
var anim3 = document.getElementById('canvas3');
var anim3pos = getPosition(anim3);
var redSection = document.getElementById('homepage-section-5');
var redSectionPos = getPosition(redSection);
//console.log(redSectionPos.y);
//console.log(pos.y, $(window).height());
if (pos.y < 0 && $(window).width() <= 768 || $(window).height() < 500) {
$('#homepage-section-3 img').addClass('visible');
}
if (redSectionPos.y != 0 && redSectionPos.y < 200 && $(window).width() >= 768 || $(window).height() <= 500) {
$('#customer1').addClass('visible');
setTimeout(function() {
$('#customer2').addClass('visible');
}, 100);
setTimeout(function() {
$('#customer3').addClass('visible');
}, 200);
setTimeout(function() {
$('#customer4').addClass('visible');
}, 300);
setTimeout(function() {
$('#customer5').addClass('visible');
}, 400);
setTimeout(function() {
$('#customer6').addClass('visible');
}, 600);
setTimeout(function() {
$('#customer7').addClass('visible');
}, 700);
setTimeout(function() {
$('#customer8').addClass('visible');
}, 800);
setTimeout(function() {
$('#customer9').addClass('visible');
}, 900);
setTimeout(function() {
$('#customer10').addClass('visible');
}, 1100);
setTimeout(function() {
$('#customer11').addClass('visible');
}, 1200);
setTimeout(function() {
$('#customer12').addClass('visible');
}, 1300);
setTimeout(function() {
$('#customer13').addClass('visible');
}, 1400);
setTimeout(function() {
$('#customer14').addClass('visible');
}, 1600);
setTimeout(function() {
$('#customer15').addClass('visible');
}, 1700);
setTimeout(function() {
$('#customer16').addClass('visible');
}, 1800);
setTimeout(function() {
$('#customer17').addClass('visible');
}, 2000);
setTimeout(function() {
$('#customer18').addClass('visible');
}, 2100);
setTimeout(function() {
$('#customer19').addClass('visible');
}, 2200);
setTimeout(function() {
$('#customer20').addClass('visible');
}, 2300);
setTimeout(function() {
$('#customer21').addClass('visible');
}, 2500);
setTimeout(function() {
$('#customer22').addClass('visible');
}, 2600);
setTimeout(function() {
$('#customer23').addClass('visible');
}, 2700);
setTimeout(function() {
$('#customer24').addClass('visible');
}, 2800);
setTimeout(function() {
$('#customer25').addClass('visible');
}, 3000);
setTimeout(function() {
$('#customer26').addClass('visible');
}, 3100);
setTimeout(function() {
$('#customer27').addClass('visible');
}, 3200);
setTimeout(function() {
$('#customer28').addClass('visible');
}, 3300);
setTimeout(function() {
$('#customer29').addClass('visible');
}, 3400);
setTimeout(function() {
$('#customer30').addClass('visible');
}, 3600);
setTimeout(function() {
$('#customer31').addClass('visible');
}, 3700);
setTimeout(function() {
$('#customer32').addClass('visible');
}, 3900);
}
// Desktop Animations
// Set Section 3 Top Margin based on window height && $(window).width() < 2200 || $(window).width() >= 2200
if ($(window).width() <= 768 || $(window).height() <= 500 ) {
$('#homepage-section-3').css('margin-top', 0);
$('#homepage-section-3').css('height', 'auto');
// $('#homepage-section-2').css('width', 'auto');
// $('#homepage-section-2').css('height', 'auto');
// if (anim1pos.y < 150) {
// animate1();
// }
// if (anim2pos.y < 150) {
// arrow();
// }
// if (anim3pos.y < 150) {
// animate3();
// }
var SVG1 = document.getElementById('gears-container');
var SVG1pos = getPosition(SVG1);
var SVG2 = document.getElementById('chart');
var SVG2pos = getPosition(SVG2);
var SVG3 = document.getElementById('hub');
var SVG3pos = getPosition(SVG3);
if (SVG1pos.y > 0 && SVG1pos.y < 200) {;
$('#gears-container').addClass('animated');
$('#gears-only').addClass('visible');
}
if (SVG2pos.y > 0 && SVG2pos.y < 200) {;
$('#chart').addClass('animated');
setTimeout(function() {
$('#chart').addClass('animation-complete');
}, 2500);
}
if (SVG3pos.y > 0 && SVG3pos.y < 200) {;
$('#hub').addClass('animated');
setTimeout(function() {
$('#hub').addClass('animation-complete');
}, 2000);
}
}
// Solution page
if($("body").hasClass('page-template-page-solutions')){
setTimeout(function(){
$('.animation_1').addClass('animated');
$('#gears-only').addClass('visible');
}, 400);
setTimeout(function(){
$('.animation_2').addClass('animated');
}, 800);
setTimeout(function(){
$('.animation_3').addClass('animated');
}, 1200);
}
// Invoice Automation page
if($("body").hasClass('page-template-page-solutions-sub1')){
setTimeout(function(){
$('.animation_1').addClass('animated');
$('#gears-only').addClass('visible');
}, 400);
}
// Dynamic Discounting page
if($("body").hasClass('page-template-page-solutions-sub2')){
setTimeout(function(){
$('.animation_2').addClass('animated');
}, 400);
}
// Supplier Central page
if($("body").hasClass('page-template-page-solutions-sub3')){
setTimeout(function(){
$('.animation_3').addClass('animated');
}, 400);
}
// End
if ($(window).width() > 768 && $(window).height() > 500) {
$('.page-template-homepage').css('height', $(window).height() + 1900);
if (fired2 == false) {
$('#homepage-section-3').css('margin-top', $(window).height() + 900);
}
$('#homepage-section-3').css('height', $(window).height() + 200);
var newHeight = $(window).height() - 120;
//$('#homepage-section-2').css('height', newHeight);
// Fade in Homepage Section 2 during scroll
//console.log(scrollDirection);
if (scrollDirection == "down" && scrollTop > 500) {
// var newWidth = $(window).width() - 120;
// $('#homepage-section-2').css('width', newWidth);
// $('#homepage-section-2 .homepage-section-content').css('width', newWidth);
// $('#homepage-section-2').addClass('visible');
// $('#homepage-section-1').addClass('invisible');
// setTimeout(
// function() {
// animate1();
// arrow();
// animate3();
// }, 3000);
// setTimeout(
// function() {
// $('.page-template-homepage').addClass('all-visible');
// }, 3000);
}
//console.log('posy', pos.y, 'fired2', fired2);
if (scrollDirection == "up" && pos.y > $(window).height() && pos.y != 0) {
// console.log('hit');
if (fired2 == true) {
$('#homepage-section-2').removeClass('visible');
$('#homepage-section-2').css('width', 0);
$('#homepage-section-1').removeClass('invisible');
$('#homepage-section-3').css('margin-top', $(window).height() + 2500);
$('.page-template-homepage').css('height', $(window).height() + 1900);
window.scrollTo(0,600);
setTimeout(
function() {
$('#intro-ticker h2').css('margin-top', -190);
$('#homepage-section-3').css('margin-top', $(window).height() + 1500);
}, 2000);
fired2 = false;
}
else {
}
}
var sectionThreeDisplay = $('#homepage-section-3').css('display');
if($('body').hasClass('page-template-homepage')){
var yOffset = $('#homepage-section-3').offset();
//console.log(yOffset.top, '.',scrollTop);
if (scrollDirection = "down" && scrollTop >= yOffset.top) {
// console.log(yOffset.top, '.',scrollTop);
$('body').addClass('static');
}
if (scrollDirection = "up" && scrollTop <= yOffset.top) {
// console.log(yOffset.top, '.',scrollTop);
$('body').removeClass('static');
}
}
var SVGs = document.getElementById('homepage-section-4');
var SVGpos = getPosition(SVGs);
// only for solution page we have created this script
if (SVGpos.y > 0 && SVGpos.y < 500) {;
$('.hover_effect .animation_1').addClass('animated');
setTimeout(function(){
$('.hover_effect .animation_1').addClass('animation-complete');
},1000)
setTimeout(function() {
$('.hover_effect .animation_2').addClass('animated');
setTimeout(function(){
$('.hover_effect .animation_2').addClass('animation-complete');
},1000)
}, 1000);
setTimeout(function() {
$('.hover_effect .animation_3').addClass('animated');
setTimeout(function(){
$('.hover_effect .animation_3').addClass('animation-complete');
},1000)
}, 2000);
// solution page animatin
}
$('.hover_effect .icon-circle').on('mouseover', function() {
var icon = $(this);
if (!(icon.hasClass('animation-complete'))) {
icon.removeClass('animated');
setTimeout(function() {
icon.addClass('animated');
}, 10);
}
});
}
}
}); /* end of as page load scripts */
$ = jQuery
if ($(window).width() > 768 ) {
$(document).ready(function(){
var ww = $(window).width()
var wh = $(window).height()
$('#homepage-section-2 .homepage-section-content').css({'width': ww -120});
});
$(window).on('load resize', function(){
var ww = $(window).width()
var wh = $(window).height()
//$('#homepage-section-2').css({'height':wh-120});
$('#homepage-section-2 .homepage-section-content').css({'width': ww -120});
});
}
// $('.icon-circle').mouseover(function() {
// $(this).addClass('hover-effect').removeClass('animation-complete animated');
// })
// $('.icon-circle').mouseout(function() {
// $(this).removeClass('hover-effect').addClass('animation-complete animated');
// })
/* 90% Automation Animation*/
if($('body').hasClass('page-template-homepage')){
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#7d7d7d";
ctx.beginPath();
ctx.arc(75,75,70,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#5d5d5d";
ctx.beginPath();
ctx.arc(75,75,57,0,2*Math.PI);
ctx.fill();
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame1 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame1;
})();
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var x1 = canvas1.width / 2;
var y1 = canvas1.height / 2;
var radius1 = 63;
var endPercent1 = 90;
var curPerc1 = 0;
var counterClockwise1 = false;
var circ1 = Math.PI * 2;
var quart1 = Math.PI / 2;
context1.lineWidth = 13;
context1.strokeStyle = '#d32128';
context1['imageSmoothingEnabled'] = false; /* standard */
context1['mozImageSmoothingEnabled'] = false; /* Firefox */
context1['oImageSmoothingEnabled'] = false; /* Opera */
context1['imageSmoothingEnabled'] = false; /* Safari */
context1['msImageSmoothingEnabled'] = false; /* IE */
function animate1(current) {
//context.clearRect(0, 0, canvas.width, canvas.height);
context1.beginPath();
context1.arc(x1, y1, radius1, -(quart1), ((circ1) * current) - quart1, false);
context1.stroke();
curPerc1++;
if (curPerc1 < endPercent1) {
requestAnimationFrame(function () {
animate1(curPerc1 / 100)
});
}
}
/* 3X Cost Savings Animation*/
var c = document.getElementById("canvas2");
var ctx2 = c.getContext("2d");
ctx2.fillStyle = "#7d7d7d";
ctx2.fillRect(50,26,50,40);
ctx2.fillRect(50,68,50,40);
ctx2.fillRect(50,110,50,40);
var cb = document.getElementById("canvas2b");
var ctx2b = cb.getContext("2d");
(function() {
var requestAnimationFrame2 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame2;
})();
var y = 150;
function arrow() {
if (y > 0) {
ctx2b.fillStyle = "#d32128";
ctx2b.clearRect(0, 0, 150, 150);
ctx2b.beginPath();
ctx2b.moveTo(75,y + 25);
ctx2b.lineTo(50,y + 50);
ctx2b.lineTo(68,y + 50);
ctx2b.lineTo(68,y + 150);
ctx2b.lineTo(82,y + 150);
ctx2b.lineTo(82,y + 50);
ctx2b.lineTo(100,y + 50);
ctx2b.fill();
//ctx2b.transform(1,0,0,1,0,-1);
y = y-2;
requestAnimationFrame(arrow);
}
}
/* 2% Annual Spend Animation*/
var c = document.getElementById("canvas3");
var ctx = c.getContext("2d");
ctx.fillStyle = "#7d7d7d";
ctx.beginPath();
ctx.arc(75,75,70,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#5d5d5d";
ctx.beginPath();
ctx.arc(75,75,57,0,2*Math.PI);
ctx.fill();
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame3 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame3;
})();
var canvas3 = document.getElementById('canvas3');
var context3 = canvas3.getContext('2d');
var x3 = canvas3.width / 2;
var y3 = canvas3.height / 2;
var radius3 = 63;
var endPercent3 = 4;
var curPerc3 = 0;
var counterClockwise3 = false;
var circ3 = Math.PI * 2;
var quart3 = Math.PI / 2;
context3.lineWidth = 13;
context3.strokeStyle = '#d32128';
context3['imageSmoothingEnabled'] = false; /* standard */
context3['mozImageSmoothingEnabled'] = false; /* Firefox */
context3['oImageSmoothingEnabled'] = false; /* Opera */
context3['imageSmoothingEnabled'] = false; /* Safari */
context3['msImageSmoothingEnabled'] = false; /* IE */
function animate3(current) {
//context.clearRect(0, 0, canvas.width, canvas.height);
context3.beginPath();
context3.arc(x3, y3, radius3, -(quart3), ((circ3) * current) - quart3, false);
context3.stroke();
curPerc3++;
if (curPerc3 < endPercent3) {
requestAnimationFrame(function () {
animate3(curPerc3 / 100)
});
}
}
}
// one time fade effect on scrolling/
$(window).on('load scroll', function(){
if($('#homepage-section-2').hasClass('visible')){
}
var whc = $(window).height() / 2;
var scTop = $(window).scrollTop();
// if(scTop > whc){
// $('#homepage-section-2').addClass('visible');
// $('#homepage-section-1').removeClass('visible');
// }
// else{
// $('#homepage-section-2').removeClass('visible');
// $('#homepage-section-1').addClass('visible');
// }
var intero = $('#intro-ticker h2');
intero.css({'top':-scTop /2})
if(scTop > 492){
intero.css({'top':'-246px'})
var window_w = $(window).width()
var scTop2 = $(window).scrollTop() -492;
$('#homepage-section-2').css({'width':scTop2*4}).addClass('visible');
}
else{
// intero.css({'top':'0'})
$('#homepage-section-2').css({'width':'0'}).removeClass('visible');
}
});
$(document).ready(function(){
setTimeout(function(){
setTimeout(function(){
$('.total_solution_text').fadeOut();
},500)
setTimeout(function(){
$('.seffect1').addClass('newm frist_item');
$('.frame_round img').removeClass('shaking shakeme');
$('.hilna').removeClass('hilna_remove');
//second
setTimeout(function(){
$('.seffect2').addClass('newm frist_item');
//third
//second
setTimeout(function(){
$('.seffect3').addClass('newm frist_item');
// inner effect
setTimeout(function(){
$('.seffect3').addClass('solution-animated');
setTimeout(function(){ $('.frame_round').fadeOut()
setTimeout(function(){
$('.hide_text_block').fadeIn();
},300)
},800);
}, 100);
}, 800);
}, 800);
}, 800);
}, 1200);
onended="videoEnded()"
$('.v-slider').on('ended',function(){
$(this).removeClass('active');
$(this).next().addClass('active').trigger('play');
if($(this).next().length==0) {
$('.v-slider:first-child').addClass('active').trigger('play');
}
});
if($(window).width() > 1023){
$('.hover_effect .icon-circle').mouseover(function() {
$(this).removeClass('animation-complete animated');
setTimeout(function() {
$('.hover_effect #hub').addClass('animation-complete');
}, 2000);
})
$('.hover_effect .icon-circle').mouseout(function() {
setTimeout(function() {
$(this).addClass('animation-complete animated');
}, 2000);
})
}
if($(window).width() < 1023){
$('.icon_effect').addClass('animation-complete animated anuto_animate');
}
// cloud page icon style effect
if($('body').hasClass('page-template-page-cloud')) {
$('.cloud-svg-container:nth-of-type(1)').addClass('visible');
console.log($('.cloud-svg-container:nth-of-type(1)').addClass('visible'));
setTimeout(function() {
$('.cloud-svg-container:nth-of-type(2)').addClass('visible');
}, 2000);
setTimeout(function() {
$('.cloud-svg-container:nth-of-type(3)').addClass('visible');
}, 3000);
setTimeout(function() {
$('.cloud-svg-container:nth-of-type(4)').addClass('visible');
}, 4000);
setTimeout(function() {
$('.cloud-svg-container:nth-of-type(5)').addClass('visible');
}, 5000);
setTimeout(function() {
$('.cloud-svg-container:nth-of-type(6)').addClass('visible');
}, 6000);
}
// the better way slogn toggle
$('.toggle_text i').on('click',function(){
$(this).parent().find('span').toggleClass('slogn_show');
})
$('.page-template-page-solutions-sub1-php,.page-template-page-solutions-sub2-php,.page-template-page-solutions-sub3-php').addClass('solution_sub_page');
// default hover animation add jquery
jQuery('.animated').animated({
animatedIn: 'animated-in',
offset: 0.8,
reverse: false,
mobileDisabled: true
});
});
var sections = $('section')
, nav = $('header')
, nav_height = nav.outerHeight();
$(window).on('scroll load', function () {
var cur_pos = $(this).scrollTop();
sections.each(function(e) {
var top = $(this).offset().top ,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active1');
sections.removeClass('active1');
$(this).addClass('active1');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active1');
var head = $('header');
if($('.white_header').hasClass('active1')){
head.removeClass('new_header').addClass('white-logo');
}
if($('.black_header').hasClass('active1')){
head.addClass('new_header').removeClass('white-logo');
}
if($('.default_header').hasClass('active1')){
head.removeClass('white-logo new_header default_header');
}
if($('#mobile-section').hasClass('active1')){
$('body').addClass('fix_mobile');
}
if($('#fixed-desable, #secondary-header, .parallax_parent').hasClass('active1')){
$('body').removeClass('fix_mobile');
}
if($('#color_fade').hasClass('active1')){
$('body').addClass('change_bg');
}
else{
$('body').removeClass('change_bg');
}
// if($('#color_fade').hasClass('active1')){
// }
}
if (cur_pos >= top && cur_pos <= bottom) {
if($('.page-template-page-cloud #section-3').hasClass('active1')){
$('body').addClass('fadeimg');
}
if($('.page-template-page-cloud .bottom-text').hasClass('active1')){
$('body').removeClass('fadeimg');
}
if($('.page-template-page-cloud #section-2').hasClass('active1')){
$('body').removeClass('fadeimg');
}
}
if($('.page-template-page-solutions .bottom-text').hasClass('active1')){
$('body').addClass('fadeimg');
}
});
// home page offset set
if($('body').hasClass('page-template-homepage-php')){
var Wt = $(window).scrollTop();
var ofT = $('.page-template-homepage-php #homepage-section-3').offset().top - $(window).height() / 1.2;
var autopage = ofT + $('.page-template-homepage-php #homepage-section-3').outerHeight();
if(Wt > ofT && Wt < autopage ){
$('.page-template-homepage-php #homepage-section-3').addClass('active1');
}
else{
$('.page-template-homepage-php #homepage-section-3').removeClass('active1');
}
}
if($('body').hasClass('solution_sub_page')){
var Wt = $(window).scrollTop();
var ofT = $('.advance_automation').offset().top - $(window).height() + $('.advance_automation').outerHeight();
var autopage = ofT + $('.advance_automation').outerHeight();
if(Wt > ofT && Wt < autopage ){
setTimeout(function(){
$('.delay_auto1').addClass('anuto_animate');
setTimeout(function(){
$('.delay_auto2').addClass('anuto_animate')
setTimeout(function(){
$('.delay_auto3').addClass('anuto_animate')
},300)
},300)
},300)
}
}
if($('body').hasClass('page-template-page-innovation-php')){
var Wt = $(window).scrollTop();
var ofT = $('.totalsol').offset().top - $(window).height() + $('.totalsol').outerHeight() /7.5 + 60;
var autopage = ofT + $('.totalsol').outerHeight();
if(Wt > ofT && Wt < autopage ){
setTimeout(function(){
$('.anmation-box').addClass('show_box');
setTimeout(function(){
$('.icon1').addClass('run_animatio');
setTimeout(function(){
$('.icon2').addClass('run_animatio');
setTimeout(function(){
$('.icon3').addClass('run_animatio');
setTimeout(function(){
$('.icon4, .icon5, .icon6').addClass('run_animatio');
$('#spinning_circle').removeClass('shaking shakeme');
setTimeout(function(){
$('.soltion_text').addClass('run_animatio');
setTimeout(function(){
$('.logo_fade').addClass('run_animatio');
$('#spinning_circle').removeClass('shaking shakeme');
},2000);
},500);
},500);
},500)
},500)
},500)
},300);
}
}
});
//white header
$(document).ready(function(){
// added js for icon hover issue resovled
if($('#main > section:first-child').hasClass('white_header')){
$('.header').addClass('white-logo');
}
})
$('.cloud-svg-container').on({
mouseenter: function() {
$($(this).find('object')[0].contentDocument).children().find('path').css({fill: 'white'});
},
mouseleave: function() {
$($(this).find('object')[0].contentDocument).children().find('path').css({fill: ''});
}
});
$(window).load(function() {
$(".page-template-page-customer #section-2").addClass("visible-img")
$('.page-template-page-customer #homepage-section-5 img#customer1').addClass('visible');
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer2').addClass('visible');
}, 100);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer3').addClass('visible');
}, 200);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer4').addClass('visible');
}, 300);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer5').addClass('visible');
}, 400);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer6').addClass('visible');
}, 600);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer7').addClass('visible');
}, 700);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer8').addClass('visible');
}, 800);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer9').addClass('visible');
}, 900);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer10').addClass('visible');
}, 1100);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer11').addClass('visible');
}, 1200);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer12').addClass('visible');
}, 1300);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer13').addClass('visible');
}, 1400);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer14').addClass('visible');
}, 1600);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer15').addClass('visible');
}, 1700);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer16').addClass('visible');
}, 1800);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer17').addClass('visible');
}, 2000);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer18').addClass('visible');
}, 2100);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer19').addClass('visible');
}, 2200);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer20').addClass('visible');
}, 2300);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer21').addClass('visible');
}, 2500);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer22').addClass('visible');
}, 2600);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer23').addClass('visible');
}, 2700);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer24').addClass('visible');
}, 2800);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer25').addClass('visible');
}, 3000);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer26').addClass('visible');
}, 3100);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer27').addClass('visible');
}, 3200);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer28').addClass('visible');
}, 3300);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer29').addClass('visible');
}, 3400);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer30').addClass('visible');
}, 3600);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer31').addClass('visible');
}, 3700);
setTimeout(function() {
$('.page-template-page-customer #homepage-section-5 img#customer32').addClass('visible');
}, 3900);
if($(window).width() < 1023){
$('.icon_effect').addClass('animation-complete animated anuto_animate');
animate1();
arrow();
animate3();
}
if($(window).width() > 1023){
$(window).on('scroll', function(){
console.log()
if($(window).scrollTop() > 500){
if($('.homepage-section-content').hasClass('scroll-canvas')){
$('.canvas-last-block').addClass('arrow_effect');
animate1();
arrow();
animate3();
$('.homepage-section-content').removeClass('scroll-canvas');
}
}
})
}
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 1000;
var distance = 300;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.