(function($) { $.fn.fullpage = function(options) { // Create some defaults, extending them with any options that were provided options = $.extend({ //navigation 'menu': false, 'anchors':[], 'navigation': false, 'navigationPosition': 'right', 'navigationColor': '#000', 'navigationTooltips': [], 'slidesNavigation': false, 'slidesNavPosition': 'bottom', 'scrollBar': false, //scrolling 'css3': true, 'scrollingSpeed': 700, 'autoScrolling': true, 'easing': 'easeInQuart', 'easingcss3': 'ease', 'loopBottom': false, 'loopTop': false, 'loopHorizontal': true, 'continuousVertical': false, 'normalScrollElements': null, 'scrollOverflow': false, 'touchSensitivity': 5, 'normalScrollElementTouchThreshold': 5, //Accessibility 'keyboardScrolling': true, 'animateAnchor': true, 'recordHistory': true, //design 'controlArrows': true, 'controlArrowColor': '#fff', "verticalCentered": true, 'resize': true, 'sectionsColor' : [], 'paddingTop': 0, 'paddingBottom': 0, 'fixedElements': null, 'responsive': 0, //Custom selectors 'sectionSelector': '.section', 'slideSelector': '.slide', //events 'afterLoad': null, 'onLeave': null, 'afterRender': null, 'afterResize': null, 'afterReBuild': null, 'afterSlideLoad': null, 'onSlideLeave': null }, options); displayWarnings(); //easeInQuart animation included in the plugin $.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }}); //Defines the delay to take place before being able to scroll to the next section //BE CAREFUL! Not recommened to change it under 400 for a good behavior in laptops and //Apple devices (laptops, mouses...) var scrollDelay = 600; $.fn.fullpage.setAutoScrolling = function(value, type){ setVariableState('autoScrolling', value, type); var element = $('.fp-section.active'); if(options.autoScrolling && !options.scrollBar){ $('html, body').css({ 'overflow' : 'hidden', 'height' : '100%' }); $.fn.fullpage.setRecordHistory(options.recordHistory, 'internal'); //for IE touch devices container.css({ '-ms-touch-action': 'none', 'touch-action': 'none' }); if(element.length){ //moving the container up silentScroll(element.position().top); } }else{ $('html, body').css({ 'overflow' : 'visible', 'height' : 'initial' }); $.fn.fullpage.setRecordHistory(false, 'internal'); //for IE touch devices container.css({ '-ms-touch-action': '', 'touch-action': '' }); silentScroll(0); //scrolling the page to the section with no animation $('html, body').scrollTop(element.position().top); } }; /** * Defines wheter to record the history for each hash change in the URL. */ $.fn.fullpage.setRecordHistory = function(value, type){ setVariableState('recordHistory', value, type); }; /** * Defines the scrolling speed */ $.fn.fullpage.setScrollingSpeed = function(value, type){ setVariableState('scrollingSpeed', value, type); }; /** * Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad. */ $.fn.fullpage.setMouseWheelScrolling = function (value){ if(value){ addMouseWheelHandler(); }else{ removeMouseWheelHandler(); } }; /** * Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures. * Optionally a second parameter can be used to specify the direction for which the action will be applied. * * @param directions string containing the direction or directions separated by comma. */ $.fn.fullpage.setAllowScrolling = function (value, directions){ if(typeof directions != 'undefined'){ directions = directions.replace(' ', '').split(','); $.each(directions, function (index, direction){ setIsScrollable(value, direction); }); } else if(value){ $.fn.fullpage.setMouseWheelScrolling(true); addTouchHandler(); }else{ $.fn.fullpage.setMouseWheelScrolling(false); removeTouchHandler(); } }; /** * Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys */ $.fn.fullpage.setKeyboardScrolling = function (value){ options.keyboardScrolling = value; }; $.fn.fullpage.moveSectionUp = function(){ var prev = $('.fp-section.active').prev('.fp-section'); //looping to the bottom if there's no more sections above if (!prev.length && (options.loopTop || options.continuousVertical)) { prev = $('.fp-section').last(); } if (prev.length) { scrollPage(prev, null, true); } }; $.fn.fullpage.moveSectionDown = function (){ var next = $('.fp-section.active').next('.fp-section'); //looping to the top if there's no more sections below if(!next.length && (options.loopBottom || options.continuousVertical)){ next = $('.fp-section').first(); } if(next.length){ scrollPage(next, null, false); } }; $.fn.fullpage.moveTo = function (section, slide){ var destiny = ''; if(isNaN(section)){ destiny = $('[data-anchor="'+section+'"]'); }else{ destiny = $('.fp-section').eq( (section -1) ); } if (typeof slide !== 'undefined'){ scrollPageAndSlide(section, slide); }else if(destiny.length > 0){ scrollPage(destiny); } }; $.fn.fullpage.moveSlideRight = function(){ moveSlide('next'); }; $.fn.fullpage.moveSlideLeft = function(){ moveSlide('prev'); }; /** * When resizing is finished, we adjust the slides sizes and positions */ $.fn.fullpage.reBuild = function(resizing){ isResizing = true; var windowsWidth = $(window).width(); windowsHeight = $(window).height(); //updating global var //text and images resizing if (options.resize) { resizeMe(windowsHeight, windowsWidth); } $('.fp-section').each(function(){ var scrollHeight = windowsHeight - parseInt($(this).css('padding-bottom')) - parseInt($(this).css('padding-top')); //adjusting the height of the table-cell for IE and Firefox if(options.verticalCentered){ $(this).find('.fp-tableCell').css('height', getTableHeight($(this)) + 'px'); } $(this).css('height', windowsHeight + 'px'); //resizing the scrolling divs if(options.scrollOverflow){ var slides = $(this).find('.fp-slide'); if(slides.length){ slides.each(function(){ createSlimScrolling($(this)); }); }else{ createSlimScrolling($(this)); } } //adjusting the position fo the FULL WIDTH slides... var slides = $(this).find('.fp-slides'); if (slides.length) { landscapeScroll(slides, slides.find('.fp-slide.active')); } }); //adjusting the position for the current section var destinyPos = $('.fp-section.active').position(); var activeSection = $('.fp-section.active'); //isn't it the first section? if(activeSection.index('.fp-section')){ scrollPage(activeSection); } isResizing = false; $.isFunction( options.afterResize ) && resizing && options.afterResize.call( this ) $.isFunction( options.afterReBuild ) && !resizing && options.afterReBuild.call( this ); } //flag to avoid very fast sliding for landscape sliders var slideMoving = false; var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|Windows Phone|Tizen|Bada)/); var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints)); var container = $(this); var windowsHeight = $(window).height(); var isMoving = false; var isResizing = false; var lastScrolledDestiny; var lastScrolledSlide; var nav; var wrapperSelector = 'fullpage-wrapper'; var isScrollAllowed = { 'up':true, 'down':true, 'left':true, 'right':true }; var originals = jQuery.extend(true, {}, options); //deep copy $.fn.fullpage.setAllowScrolling(true); //if css3 is not supported, it will use jQuery animations if(options.css3){ options.css3 = support3d(); } if($(this).length){ container.css({ 'height': '100%', 'position': 'relative' }); //adding a class to recognize the container internally in the code container.addClass(wrapperSelector); } //trying to use fullpage without a selector? else{ showError('error', "Error! Fullpage.js needs to be initialized with a selector. For example: $('#myContainer').fullpage();"); } //adding internal class names to void problem with common ones $(options.sectionSelector).each(function(){ $(this).addClass('fp-section'); }); $(options.slideSelector).each(function(){ $(this).addClass('fp-slide'); }); //creating the navigation dots if (options.navigation) { addVerticalNavigation(); } $('.fp-section').each(function(index){ var that = $(this); var slides = $(this).find('.fp-slide'); var numSlides = slides.length; //if no active section is defined, the 1st one will be the default one if(!index && $('.fp-section.active').length === 0) { $(this).addClass('active'); } $(this).css('height', windowsHeight + 'px'); if(options.paddingTop || options.paddingBottom){ $(this).css('padding', options.paddingTop + ' 0 ' + options.paddingBottom + ' 0'); } if (typeof options.sectionsColor[index] !== 'undefined') { $(this).css('background-color', options.sectionsColor[index]); } if (typeof options.anchors[index] !== 'undefined') { $(this).attr('data-anchor', options.anchors[index]); } // if there's any slide if (numSlides > 1) { var sliderWidth = numSlides * 100; var slideWidth = 100 / numSlides; slides.wrapAll('
'); slides.parent().wrap('
'); $(this).find('.fp-slidesContainer').css('width', sliderWidth + '%'); if(options.controlArrows){ createSlideArrows($(this)); } if(options.slidesNavigation){ addSlidesNavigation($(this), numSlides); } slides.each(function(index) { $(this).css('width', slideWidth + '%'); if(options.verticalCentered){ addTableClass($(this)); } }); var startingSlide = that.find('.fp-slide.active'); //if the slide won#t be an starting point, the default will be the first one if(startingSlide.length == 0){ slides.eq(0).addClass('active'); } //is there a starting point for a non-starting section? else{ silentLandscapeScroll(startingSlide); } }else{ if(options.verticalCentered){ addTableClass($(this)); } } }).promise().done(function(){ $.fn.fullpage.setAutoScrolling(options.autoScrolling, 'internal'); //the starting point is a slide? var activeSlide = $('.fp-section.active').find('.fp-slide.active'); //the active section isn't the first one? Is not the first slide of the first section? Then we load that section/slide by default. if( activeSlide.length && ($('.fp-section.active').index('.fp-section') != 0 || ($('.fp-section.active').index('.fp-section') == 0 && activeSlide.index() != 0))){ silentLandscapeScroll(activeSlide); } //fixed elements need to be moved out of the plugin container due to problems with CSS3. if(options.fixedElements && options.css3){ $(options.fixedElements).appendTo('body'); } //vertical centered of the navigation + first bullet active if(options.navigation){ nav.css('margin-top', '-' + (nav.height()/2) + 'px'); nav.find('li').eq($('.fp-section.active').index('.fp-section')).find('a').addClass('active'); } //moving the menu outside the main container if it is inside (avoid problems with fixed positions when using CSS3 tranforms) if(options.menu && options.css3 && $(options.menu).closest('.fullpage-wrapper').length){ $(options.menu).appendTo('body'); } if(options.scrollOverflow){ if(document.readyState === "complete"){ createSlimScrollingHandler(); } //after DOM and images are loaded $(window).on('load', createSlimScrollingHandler); }else{ $.isFunction( options.afterRender ) && options.afterRender.call( this); } responsive(); //getting the anchor link in the URL and deleting the `#` var value = window.location.hash.replace('#', '').split('/'); var destiny = value[0]; if(destiny.length){ var section = $('[data-anchor="'+destiny+'"]'); if(!options.animateAnchor && section.length){ if(options.autoScrolling){ silentScroll(section.position().top); } else{ silentScroll(0); setBodyClass(destiny); //scrolling the page to the section with no animation $('html, body').scrollTop(section.position().top); } activateMenuAndNav(destiny, null); $.isFunction( options.afterLoad ) && options.afterLoad.call( this, destiny, (section.index('.fp-section') + 1)); //updating the active class section.addClass('active').siblings().removeClass('active'); } } $(window).on('load', function() { scrollToAnchor(); }); }); /** * Creates the control arrows for the given section */ function createSlideArrows(section){ section.find('.fp-slides').after('
'); if(options.controlArrowColor!='#fff'){ section.find('.fp-controlArrow.fp-next').css('border-color', 'transparent transparent transparent '+options.controlArrowColor); section.find('.fp-controlArrow.fp-prev').css('border-color', 'transparent '+ options.controlArrowColor + ' transparent transparent'); } if(!options.loopHorizontal){ section.find('.fp-controlArrow.fp-prev').hide(); } } /** * Creates a vertical navigation bar. */ function addVerticalNavigation(){ $('body').append('
    '); nav = $('#fp-nav'); nav.css('color', options.navigationColor); nav.addClass(options.navigationPosition); for (var i = 0; i < $('.fp-section').length; i++) { var link = ''; if (options.anchors.length) { link = options.anchors[i]; } var li = '
  • '; // Only add tooltip if needed (defined by user) var tooltip = options.navigationTooltips[i]; if (tooltip != undefined && tooltip != '') { li += '
    ' + tooltip + '
    '; } li += '
  • '; nav.find('ul').append(li); } } function createSlimScrollingHandler(){ $('.fp-section').each(function(){ var slides = $(this).find('.fp-slide'); if(slides.length){ slides.each(function(){ createSlimScrolling($(this)); }); }else{ createSlimScrolling($(this)); } }); $.isFunction( options.afterRender ) && options.afterRender.call( this); } var scrollId; var scrollId2; var isScrolling = false; //when scrolling... $(window).on('scroll', scrollHandler); function scrollHandler(){ if(!options.autoScrolling || options.scrollBar){ var currentScroll = $(window).scrollTop(); var visibleSectionIndex = 0; var initial = Math.abs(currentScroll - $('.fp-section').first().offset().top); //taking the section which is showing more content in the viewport $('.fp-section').each(function(index){ var current = Math.abs(currentScroll - $(this).offset().top); if(current < initial){ visibleSectionIndex = index; initial = current; } }); //geting the last one, the current one on the screen var currentSection = $('.fp-section').eq(visibleSectionIndex); } if(!options.autoScrolling){ //executing only once the first time we reach the section if(!currentSection.hasClass('active')){ isScrolling = true; var leavingSection = $('.fp-section.active').index('.fp-section') + 1; var yMovement = getYmovement(currentSection); var anchorLink = currentSection.data('anchor'); var sectionIndex = currentSection.index('.fp-section') + 1; var activeSlide = currentSection.find('.fp-slide.active'); if(activeSlide.length){ var slideAnchorLink = activeSlide.data('anchor'); var slideIndex = activeSlide.index(); } currentSection.addClass('active').siblings().removeClass('active'); if(!isMoving){ $.isFunction( options.onLeave ) && options.onLeave.call( this, leavingSection, sectionIndex, yMovement); $.isFunction( options.afterLoad ) && options.afterLoad.call( this, anchorLink, sectionIndex); } activateMenuAndNav(anchorLink, 0); if(options.anchors.length && !isMoving){ //needed to enter in hashChange event when using the menu with anchor links lastScrolledDestiny = anchorLink; setState(slideIndex, slideAnchorLink, anchorLink, sectionIndex); } //small timeout in order to avoid entering in hashChange event when scrolling is not finished yet clearTimeout(scrollId); scrollId = setTimeout(function(){ isScrolling = false; }, 100); } } if(options.scrollBar){ //for the auto adjust of the viewport to fit a whole section clearTimeout(scrollId2); scrollId2 = setTimeout(function(){ if(!isMoving){ scrollPage(currentSection); } }, 1000); } } /** * Determines whether the active section or slide is scrollable through and scrolling bar */ function isScrollable(activeSection){ //if there are landscape slides, we check if the scrolling bar is in the current one or not if(activeSection.find('.fp-slides').length){ scrollable= activeSection.find('.fp-slide.active').find('.fp-scrollable'); }else{ scrollable = activeSection.find('.fp-scrollable'); } return scrollable; } /** * Determines the way of scrolling up or down: * by 'automatically' scrolling a section or by using the default and normal scrolling. */ function scrolling(type, scrollable){ if (!isScrollAllowed[type]){ return; } if(type == 'down'){ var check = 'bottom'; var scrollSection = $.fn.fullpage.moveSectionDown; }else{ var check = 'top'; var scrollSection = $.fn.fullpage.moveSectionUp; } if(scrollable.length > 0 ){ //is the scrollbar at the start/end of the scroll? if(isScrolled(check, scrollable)){ scrollSection(); }else{ return true; } }else{ // moved up/down scrollSection(); } } var touchStartY = 0; var touchStartX = 0; var touchEndY = 0; var touchEndX = 0; /* Detecting touch events * As we are changing the top property of the page on scrolling, we can not use the traditional way to detect it. * This way, the touchstart and the touch moves shows an small difference between them which is the * used one to determine the direction. */ function touchMoveHandler(event){ var e = event.originalEvent; // additional: if one of the normalScrollElements isn't within options.normalScrollElementTouchThreshold hops up the DOM chain if (!checkParentForNormalScrollElement(event.target)) { if(options.autoScrolling && !options.scrollBar){ //preventing the easing on iOS devices event.preventDefault(); } var activeSection = $('.fp-section.active'); var scrollable = isScrollable(activeSection); if (!isMoving && !slideMoving) { //if theres any # var touchEvents = getEventsPage(e); touchEndY = touchEvents['y']; touchEndX = touchEvents['x']; //if movement in the X axys is greater than in the Y and the currect section has slides... if (activeSection.find('.fp-slides').length && Math.abs(touchStartX - touchEndX) > (Math.abs(touchStartY - touchEndY))) { //is the movement greater than the minimum resistance to scroll? if (Math.abs(touchStartX - touchEndX) > ($(window).width() / 100 * options.touchSensitivity)) { if (touchStartX > touchEndX) { if(isScrollAllowed.right){ $.fn.fullpage.moveSlideRight(); //next } } else { if(isScrollAllowed.left){ $.fn.fullpage.moveSlideLeft(); //prev } } } } //vertical scrolling (only when autoScrolling is enabled) else if(options.autoScrolling && !options.scrollBar){ //is the movement greater than the minimum resistance to scroll? if (Math.abs(touchStartY - touchEndY) > ($(window).height() / 100 * options.touchSensitivity)) { if (touchStartY > touchEndY) { scrolling('down', scrollable); } else if (touchEndY > touchStartY) { scrolling('up', scrollable); } } } } } } /** * recursive function to loop up the parent nodes to check if one of them exists in options.normalScrollElements * Currently works well for iOS - Android might need some testing * @param {Element} el target element / jquery selector (in subsequent nodes) * @param {int} hop current hop compared to options.normalScrollElementTouchThreshold * @return {boolean} true if there is a match to options.normalScrollElements */ function checkParentForNormalScrollElement (el, hop) { hop = hop || 0; var parent = $(el).parent(); if (hop < options.normalScrollElementTouchThreshold && parent.is(options.normalScrollElements) ) { return true; } else if (hop == options.normalScrollElementTouchThreshold) { return false; } else { return checkParentForNormalScrollElement(parent, ++hop); } } function touchStartHandler(event){ var e = event.originalEvent; var touchEvents = getEventsPage(e); touchStartY = touchEvents['y']; touchStartX = touchEvents['x']; } /** * Detecting mousewheel scrolling * * http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html * http://www.sitepoint.com/html5-javascript-mouse-wheel/ */ function MouseWheelHandler(e) { if(options.autoScrolling){ // cross-browser wheel delta e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.deltaY || -e.detail))); //preventing to scroll the site on mouse wheel when scrollbar is present if(options.scrollBar){ e.preventDefault ? e.preventDefault() : e.returnValue = false; } var activeSection = $('.fp-section.active'); var scrollable = isScrollable(activeSection); if (!isMoving) { //if theres any # //scrolling down? if (delta < 0) { scrolling('down', scrollable); //scrolling up? }else { scrolling('up', scrollable); } } return false; } } function moveSlide(direction){ var activeSection = $('.fp-section.active'); var slides = activeSection.find('.fp-slides'); // more than one slide needed and nothing should be sliding if (!slides.length || slideMoving) { return; } var currentSlide = slides.find('.fp-slide.active'); var destiny = null; if(direction === 'prev'){ destiny = currentSlide.prev('.fp-slide'); }else{ destiny = currentSlide.next('.fp-slide'); } //isn't there a next slide in the secuence? if(!destiny.length){ //respect loopHorizontal settin if (!options.loopHorizontal) return; if(direction === 'prev'){ destiny = currentSlide.siblings(':last'); }else{ destiny = currentSlide.siblings(':first'); } } slideMoving = true; landscapeScroll(slides, destiny); } /** * Maintains the active slides in the viewport * (Because he `scroll` animation might get lost with some actions, such as when using continuousVertical) */ function keepSlidesPosition(){ $('.fp-slide.active').each(function(){ silentLandscapeScroll($(this)); }); } /** * Scrolls the site to the given element and scrolls to the slide if a callback is given. */ function scrollPage(element, callback, isMovementUp){ var dest = element.position(); if(typeof dest === "undefined"){ return; } //there's no element to scroll, leaving the function //local variables var v = { element: element, callback: callback, isMovementUp: isMovementUp, dest: dest, dtop: dest.top, yMovement: getYmovement(element), anchorLink: element.data('anchor'), sectionIndex: element.index('.fp-section'), activeSlide: element.find('.fp-slide.active'), activeSection: $('.fp-section.active'), leavingSection: $('.fp-section.active').index('.fp-section') + 1, //caching the value of isResizing at the momment the function is called //because it will be checked later inside a setTimeout and the value might change localIsResizing: isResizing }; //quiting when destination scroll is the same as the current one if((v.activeSection.is(element) && !isResizing) || (options.scrollBar && $(window).scrollTop() === v.dtop)){ return; } if(v.activeSlide.length){ var slideAnchorLink = v.activeSlide.data('anchor'); var slideIndex = v.activeSlide.index(); } // If continuousVertical && we need to wrap around if (options.autoScrolling && options.continuousVertical && typeof (v.isMovementUp) !== "undefined" && ((!v.isMovementUp && v.yMovement == 'up') || // Intending to scroll down but about to go up or (v.isMovementUp && v.yMovement == 'down'))) { // intending to scroll up but about to go down v = createInfiniteSections(v); } element.addClass('active').siblings().removeClass('active'); //preventing from activating the MouseWheelHandler event //more than once if the page is scrolling isMoving = true; setState(slideIndex, slideAnchorLink, v.anchorLink, v.sectionIndex); //callback (onLeave) if the site is not just resizing and readjusting the slides $.isFunction(options.onLeave) && !v.localIsResizing && options.onLeave.call(this, v.leavingSection, (v.sectionIndex + 1), v.yMovement); performMovement(v); //flag to avoid callingn `scrollPage()` twice in case of using anchor links lastScrolledDestiny = v.anchorLink; //avoid firing it twice (as it does also on scroll) if(options.autoScrolling){ activateMenuAndNav(v.anchorLink, v.sectionIndex) } } /** * Performs the movement (by CSS3 or by jQuery) */ function performMovement(v){ // using CSS3 translate functionality if (options.css3 && options.autoScrolling && !options.scrollBar) { if (v.anchorLink == 'footer') { footer_a = $('#section-footer').height(); footer_h = $('#footer-text').height(); var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)'; } else { var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)'; } transformContainer(translate3d, true); setTimeout(function () { afterSectionLoads(v); }, options.scrollingSpeed); } // using jQuery animate else{ var scrollSettings = getScrollSettings(v); $(scrollSettings.element).animate( scrollSettings.options , options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body` afterSectionLoads(v); }); } } /** * Gets the scrolling settings depending on the plugin autoScrolling option */ function getScrollSettings(v){ var scroll = {}; if(options.autoScrolling && !options.scrollBar){ scroll.options = { 'top': -v.dtop}; scroll.element = '.'+wrapperSelector; }else{ scroll.options = { 'scrollTop': v.dtop}; scroll.element = 'html, body'; } return scroll; } /** * Adds sections before or after the current one to create the infinite effect. */ function createInfiniteSections(v){ // Scrolling down if (!v.isMovementUp) { // Move all previous sections to after the active section $(".fp-section.active").after(v.activeSection.prevAll(".fp-section").get().reverse()); } else { // Scrolling up // Move all next sections to before the active section $(".fp-section.active").before(v.activeSection.nextAll(".fp-section")); } // Maintain the displayed position (now that we changed the element order) silentScroll($('.fp-section.active').position().top); // Maintain the active slides visible in the viewport keepSlidesPosition(); // save for later the elements that still need to be reordered v.wrapAroundElements = v.activeSection; // Recalculate animation variables v.dest = v.element.position(); v.dtop = v.dest.top; v.yMovement = getYmovement(v.element); return v; } /** * Fix section order after continuousVertical changes have been animated */ function continuousVerticalFixSectionOrder (v) { // If continuousVertical is in effect (and autoScrolling would also be in effect then), // finish moving the elements around so the direct navigation will function more simply if (!v.wrapAroundElements || !v.wrapAroundElements.length) { return; } if (v.isMovementUp) { $('.fp-section:first').before(v.wrapAroundElements); } else { $('.fp-section:last').after(v.wrapAroundElements); } silentScroll($('.fp-section.active').position().top); // Maintain the active slides visible in the viewport keepSlidesPosition(); }; /** * Actions to do once the section is loaded */ function afterSectionLoads (v){ continuousVerticalFixSectionOrder(v); //callback (afterLoad) if the site is not just resizing and readjusting the slides $.isFunction(options.afterLoad) && !v.localIsResizing && options.afterLoad.call(this, v.anchorLink, (v.sectionIndex + 1)); setTimeout(function () { isMoving = false; $.isFunction(v.callback) && v.callback.call(this); }, scrollDelay); } /** * Scrolls to the anchor in the URL when loading the site */ function scrollToAnchor(){ //getting the anchor link in the URL and deleting the `#` var value = window.location.hash.replace('#', '').split('/'); var section = value[0]; var slide = value[1]; if(section){ //if theres any # scrollPageAndSlide(section, slide); } } //detecting any change on the URL to scroll to the given anchor link //(a way to detect back history button as we play with the hashes on the URL) $(window).on('hashchange', hashChangeHandler); function hashChangeHandler(){ if(!isScrolling){ var value = window.location.hash.replace('#', '').split('/'); var section = value[0]; var slide = value[1]; if(section.length){ //when moving to a slide in the first section for the first time (first time to add an anchor to the URL) var isFirstSlideMove = (typeof lastScrolledDestiny === 'undefined'); var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' && typeof slide === 'undefined' && !slideMoving); /*in order to call scrollpage() only once for each destination at a time It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange` event is fired on every scroll too.*/ if ((section && section !== lastScrolledDestiny) && !isFirstSlideMove || isFirstScrollMove || (!slideMoving && lastScrolledSlide != slide )) { scrollPageAndSlide(section, slide); } } } } /** * Sliding with arrow keys, both, vertical and horizontal */ $(document).keydown(function(e) { //Moving the main page with the keyboard arrows if keyboard scrolling is enabled if (options.keyboardScrolling && options.autoScrolling) { //preventing the scroll with arrow keys if(e.which == 40 || e.which == 38){ e.preventDefault(); } if(!isMoving){ switch (e.which) { //up case 38: case 33: $.fn.fullpage.moveSectionUp(); break; //down case 40: case 34: $.fn.fullpage.moveSectionDown(); break; //Home case 36: $.fn.fullpage.moveTo(1); break; //End case 35: $.fn.fullpage.moveTo( $('.fp-section').length ); break; //left case 37: $.fn.fullpage.moveSlideLeft(); break; //right case 39: $.fn.fullpage.moveSlideRight(); break; default: return; // exit this handler for other keys } } } }); /** * Scrolls to the section when clicking the navigation bullet */ $(document).on('click touchstart', '#fp-nav a', function(e){ e.preventDefault(); var index = $(this).parent().index(); scrollPage($('.fp-section').eq(index)); }); /** * Scrolls the slider to the given slide destination for the given section */ $(document).on('click touchstart', '.fp-slidesNav a', function(e){ e.preventDefault(); var slides = $(this).closest('.fp-section').find('.fp-slides'); var destiny = slides.find('.fp-slide').eq($(this).closest('li').index()); landscapeScroll(slides, destiny); }); if(options.normalScrollElements){ $(document).on('mouseenter', options.normalScrollElements, function () { $.fn.fullpage.setMouseWheelScrolling(false); }); $(document).on('mouseleave', options.normalScrollElements, function(){ $.fn.fullpage.setMouseWheelScrolling(true); }); } /** * Scrolling horizontally when clicking on the slider controls. */ $('.fp-section').on('click touchstart', '.fp-controlArrow', function() { if ($(this).hasClass('fp-prev')) { $.fn.fullpage.moveSlideLeft(); } else { $.fn.fullpage.moveSlideRight(); } }); /** * Scrolls horizontal sliders. */ function landscapeScroll(slides, destiny){ var destinyPos = destiny.position(); var slidesContainer = slides.find('.fp-slidesContainer').parent(); var slideIndex = destiny.index(); var section = slides.closest('.fp-section'); var sectionIndex = section.index('.fp-section'); var anchorLink = section.data('anchor'); var slidesNav = section.find('.fp-slidesNav'); var slideAnchor = destiny.data('anchor'); //caching the value of isResizing at the momment the function is called //because it will be checked later inside a setTimeout and the value might change var localIsResizing = isResizing; if(options.onSlideLeave){ var prevSlideIndex = section.find('.fp-slide.active').index(); var xMovement = getXmovement(prevSlideIndex, slideIndex); //if the site is not just resizing and readjusting the slides if(!localIsResizing && xMovement!=='none'){ $.isFunction( options.onSlideLeave ) && options.onSlideLeave.call( this, anchorLink, (sectionIndex + 1), prevSlideIndex, xMovement); } } destiny.addClass('active').siblings().removeClass('active'); if(typeof slideAnchor === 'undefined'){ slideAnchor = slideIndex; } if(!options.loopHorizontal && options.controlArrows){ //hidding it for the fist slide, showing for the rest section.find('.fp-controlArrow.fp-prev').toggle(slideIndex!=0); //hidding it for the last slide, showing for the rest section.find('.fp-controlArrow.fp-next').toggle(!destiny.is(':last-child')); } //only changing the URL if the slides are in the current section (not for resize re-adjusting) if(section.hasClass('active')){ setState(slideIndex, slideAnchor, anchorLink, sectionIndex); } var afterSlideLoads = function(){ //if the site is not just resizing and readjusting the slides if(!localIsResizing){ $.isFunction( options.afterSlideLoad ) && options.afterSlideLoad.call( this, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex); } //letting them slide again slideMoving = false; }; if(options.css3){ var translate3d = 'translate3d(-' + destinyPos.left + 'px, 0px, 0px)'; addAnimation(slides.find('.fp-slidesContainer'), options.scrollingSpeed>0).css(getTransforms(translate3d)); setTimeout(function(){ afterSlideLoads(); }, options.scrollingSpeed, options.easing); }else{ slidesContainer.animate({ scrollLeft : destinyPos.left }, options.scrollingSpeed, options.easing, function() { afterSlideLoads(); }); } slidesNav.find('.active').removeClass('active'); slidesNav.find('li').eq(slideIndex).find('a').addClass('active'); } //when resizing the site, we adjust the heights of the sections, slimScroll... $(window).resize(resizeHandler); var previousHeight = windowsHeight; var resizeId; function resizeHandler(){ //checking if it needs to get responsive responsive(); // rebuild immediately on touch devices if (isTouchDevice) { //if the keyboard is visible if ($(document.activeElement).attr('type') !== 'text') { var currentHeight = $(window).height(); //making sure the change in the viewport size is enough to force a rebuild. (20 % of the window to avoid problems when hidding scroll bars) if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ){ $.fn.fullpage.reBuild(true); previousHeight = currentHeight; } } }else{ //in order to call the functions only when the resize is finished //http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing clearTimeout(resizeId); resizeId = setTimeout(function(){ $.fn.fullpage.reBuild(true); }, 500); } } /** * Checks if the site needs to get responsive and disables autoScrolling if so. * A class `fp-responsive` is added to the plugin's container in case the user wants to use it for his own responsive CSS. */ function responsive(){ if(options.responsive){ var isResponsive = container.hasClass('fp-responsive'); if ($(window).width() < options.responsive ){ if(!isResponsive){ $.fn.fullpage.setAutoScrolling(false, 'internal'); $('#fp-nav').hide(); container.addClass('fp-responsive'); } }else if(isResponsive){ $.fn.fullpage.setAutoScrolling(originals.autoScrolling, 'internal'); $('#fp-nav').show(); container.removeClass('fp-responsive'); } } } /** * Adds transition animations for the given element */ function addAnimation(element){ var transition = 'all ' + options.scrollingSpeed + 'ms ' + options.easingcss3; element.removeClass('fp-notransition'); return element.css({ '-webkit-transition': transition, 'transition': transition }); } /** * Remove transition animations for the given element */ function removeAnimation(element){ return element.addClass('fp-notransition'); } /** * Resizing of the font size depending on the window size as well as some of the images on the site. */ function resizeMe(displayHeight, displayWidth) { //Standard dimensions, for which the body font size is correct var preferredHeight = 825; var preferredWidth = 900; if (displayHeight < preferredHeight || displayWidth < preferredWidth) { var heightPercentage = (displayHeight * 100) / preferredHeight; var widthPercentage = (displayWidth * 100) / preferredWidth; var percentage = Math.min(heightPercentage, widthPercentage); var newFontSize = percentage.toFixed(2); $("body").css("font-size", newFontSize + '%'); } else { $("body").css("font-size", '100%'); } } /** * Activating the website navigation dots according to the given slide name. */ function activateNavDots(name, sectionIndex){ if(options.navigation){ $('#fp-nav').find('.active').removeClass('active'); if(name){ $('#fp-nav').find('a[href="#' + name + '"]').addClass('active'); }else{ $('#fp-nav').find('li').eq(sectionIndex).find('a').addClass('active'); } } } /** * Activating the website main menu elements according to the given slide name. */ function activateMenuElement(name){ if(options.menu){ $(options.menu).find('.active').removeClass('active'); $(options.menu).find('[data-menuanchor="'+name+'"]').addClass('active'); } } function activateMenuAndNav(anchor, index){ activateMenuElement(anchor); activateNavDots(anchor, index); } /** * Return a boolean depending on whether the scrollable element is at the end or at the start of the scrolling * depending on the given type. */ function isScrolled(type, scrollable){ if(type === 'top'){ return !scrollable.scrollTop(); }else if(type === 'bottom'){ return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight; } } /** * Retuns `up` or `down` depending on the scrolling movement to reach its destination * from the current section. */ function getYmovement(destiny){ var fromIndex = $('.fp-section.active').index('.fp-section'); var toIndex = destiny.index('.fp-section'); if( fromIndex == toIndex){ return 'none' } if(fromIndex > toIndex){ return 'up'; } return 'down'; } /** * Retuns `right` or `left` depending on the scrolling movement to reach its destination * from the current slide. */ function getXmovement(fromIndex, toIndex){ if( fromIndex == toIndex){ return 'none' } if(fromIndex > toIndex){ return 'left'; } return 'right'; } function createSlimScrolling(element){ //needed to make `scrollHeight` work under Opera 12 element.css('overflow', 'hidden'); //in case element is a slide var section = element.closest('.fp-section'); var scrollable = element.find('.fp-scrollable'); //if there was scroll, the contentHeight will be the one in the scrollable section if(scrollable.length){ var contentHeight = scrollable.get(0).scrollHeight; }else{ var contentHeight = element.get(0).scrollHeight; if(options.verticalCentered){ contentHeight = element.find('.fp-tableCell').get(0).scrollHeight; } } var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top')); //needs scroll? if ( contentHeight > scrollHeight) { //was there already an scroll ? Updating it if(scrollable.length){ scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px'); } //creating the scrolling else{ if(options.verticalCentered){ element.find('.fp-tableCell').wrapInner('
    '); }else{ element.wrapInner('
    '); } element.find('.fp-scrollable').slimScroll({ allowPageScroll: true, height: scrollHeight + 'px', size: '10px', alwaysVisible: true }); } } //removing the scrolling when it is not necessary anymore else{ removeSlimScroll(element); } //undo element.css('overflow', ''); } function removeSlimScroll(element){ element.find('.fp-scrollable').children().first().unwrap().unwrap(); element.find('.slimScrollBar').remove(); element.find('.slimScrollRail').remove(); } function addTableClass(element){ element.addClass('fp-table').wrapInner('
    '); } function getTableHeight(element){ var sectionHeight = windowsHeight; if(options.paddingTop || options.paddingBottom){ var section = element; if(!section.hasClass('fp-section')){ section = element.closest('.fp-section'); } var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom')); sectionHeight = (windowsHeight - paddings); } return sectionHeight; } /** * Adds a css3 transform property to the container class with or without animation depending on the animated param. */ function transformContainer(translate3d, animated){ if(animated){ addAnimation(container); }else{ removeAnimation(container); } container.css(getTransforms(translate3d)); //syncronously removing the class after the animation has been applied. setTimeout(function(){ container.removeClass('fp-notransition'); },10) } /** * Scrolls to the given section and slide */ function scrollPageAndSlide(destiny, slide){ if (typeof slide === 'undefined') { slide = 0; } if(isNaN(destiny)){ var section = $('[data-anchor="'+destiny+'"]'); }else{ var section = $('.fp-section').eq( (destiny -1) ); } //we need to scroll to the section and then to the slide if (destiny !== lastScrolledDestiny && !section.hasClass('active')){ scrollPage(section, function(){ scrollSlider(section, slide) }); } //if we were already in the section else{ scrollSlider(section, slide); } } /** * Scrolls the slider to the given slide destination for the given section */ function scrollSlider(section, slide){ if(typeof slide != 'undefined'){ var slides = section.find('.fp-slides'); var destiny = slides.find('[data-anchor="'+slide+'"]'); if(!destiny.length){ destiny = slides.find('.fp-slide').eq(slide); } if(destiny.length){ landscapeScroll(slides, destiny); } } } /** * Creates a landscape navigation bar with dots for horizontal sliders. */ function addSlidesNavigation(section, numSlides){ section.append('
      '); var nav = section.find('.fp-slidesNav'); //top or bottom nav.addClass(options.slidesNavPosition); for(var i=0; i< numSlides; i++){ nav.find('ul').append('
    • '); } //centering it nav.css('margin-left', '-' + (nav.width()/2) + 'px'); nav.find('li').first().find('a').addClass('active'); } /** * Sets the state of the website depending on the active section/slide. * It changes the URL hash when needed and updates the body class. */ function setState(slideIndex, slideAnchor, anchorLink, sectionIndex){ var sectionHash = ''; if(options.anchors.length){ //isn't it the first slide? if(slideIndex){ if(typeof anchorLink !== 'undefined'){ sectionHash = anchorLink; } //slide without anchor link? We take the index instead. if(typeof slideAnchor === 'undefined'){ slideAnchor = slideIndex; } lastScrolledSlide = slideAnchor; setUrlHash(sectionHash + '/' + slideAnchor); //first slide won't have slide anchor, just the section one }else if(typeof slideIndex !== 'undefined'){ lastScrolledSlide = slideAnchor; setUrlHash(anchorLink); } //section without slides else{ setUrlHash(anchorLink); } setBodyClass(location.hash); } else if(typeof slideIndex !== 'undefined'){ setBodyClass(sectionIndex + '-' + slideIndex); } else{ setBodyClass(String(sectionIndex)); } } /** * Sets the URL hash. */ function setUrlHash(url){ if(options.recordHistory){ location.hash = url; }else{ //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :) if(isTouchDevice || isTouch){ history.replaceState(undefined, undefined, "#" + url) }else{ var baseUrl = window.location.href.split('#')[0]; window.location.replace( baseUrl + '#' + url ); } } } /** * Sets a class for the body of the page depending on the active section / slide */ function setBodyClass(text){ //changing slash for dash to make it a valid CSS style text = text.replace('/', '-').replace('#',''); //removing previous anchor classes $("body")[0].className = $("body")[0].className.replace(/\b\s?fp-viewing-[^\s]+\b/g, ''); //adding the current anchor $("body").addClass("fp-viewing-" + text); } /** * Checks for translate3d support * @return boolean * http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support */ function support3d() { var el = document.createElement('p'), has3d, transforms = { 'webkitTransform':'-webkit-transform', 'OTransform':'-o-transform', 'msTransform':'-ms-transform', 'MozTransform':'-moz-transform', 'transform':'transform' }; // Add it to the body to get the computed style. document.body.insertBefore(el, null); for (var t in transforms) { if (el.style[t] !== undefined) { el.style[t] = "translate3d(1px,1px,1px)"; has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); } } document.body.removeChild(el); return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); } /** * Removes the auto scrolling action fired by the mouse wheel and trackpad. * After this function is called, the mousewheel and trackpad movements won't scroll through sections. */ function removeMouseWheelHandler(){ if (document.addEventListener) { document.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper document.removeEventListener('wheel', MouseWheelHandler, false); //Firefox } else { document.detachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8 } } /** * Adds the auto scrolling action for the mouse wheel and trackpad. * After this function is called, the mousewheel and trackpad movements will scroll through sections */ function addMouseWheelHandler(){ if (document.addEventListener) { document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper document.addEventListener("wheel", MouseWheelHandler, false); //Firefox } else { document.attachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8 } } /** * Adds the possibility to auto scroll through sections on touch devices. */ function addTouchHandler(){ if(isTouchDevice || isTouch){ //Microsoft pointers MSPointer = getMSPointer(); $(document).off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler); $(document).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler); } } /** * Removes the auto scrolling for touch devices. */ function removeTouchHandler(){ if(isTouchDevice || isTouch){ //Microsoft pointers MSPointer = getMSPointer(); $(document).off('touchstart ' + MSPointer.down); $(document).off('touchmove ' + MSPointer.move); } } /* * Returns and object with Microsoft pointers (for IE<11 and for IE >= 11) * http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx */ function getMSPointer(){ var pointer; //IE >= 11 & rest of browsers if(window.PointerEvent){ pointer = { down: "pointerdown", move: "pointermove"}; } //IE < 11 else{ pointer = { down: "MSPointerDown", move: "MSPointerMove"}; } return pointer; } /** * Gets the pageX and pageY properties depending on the browser. * https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854 */ function getEventsPage(e){ var events = new Array(); events['y'] = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY); events['x'] = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX); return events; } function silentLandscapeScroll(activeSlide){ $.fn.fullpage.setScrollingSpeed (0, 'internal'); landscapeScroll(activeSlide.closest('.fp-slides'), activeSlide); $.fn.fullpage.setScrollingSpeed(originals.scrollingSpeed, 'internal'); } function silentScroll(top){ if(options.scrollBar){ container.scrollTop(top); } else if (options.css3) { var translate3d = 'translate3d(0px, -' + top + 'px, 0px)'; transformContainer(translate3d, false); } else { container.css("top", -top); } } function getTransforms(translate3d){ return { '-webkit-transform': translate3d, '-moz-transform': translate3d, '-ms-transform':translate3d, 'transform': translate3d }; } function setIsScrollable(value, direction){ switch (direction){ case 'up': isScrollAllowed.up = value; break; case 'down': isScrollAllowed.down = value; break; case 'left': isScrollAllowed.left = value; break; case 'right': isScrollAllowed.right = value; break; case 'all': $.fn.fullpage.setAllowScrolling(value); } } /* * Destroys fullpage.js plugin events and optinally its html markup and styles */ $.fn.fullpage.destroy = function(all){ $.fn.fullpage.setAutoScrolling(false, 'internal'); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); $(window) .off('scroll', scrollHandler) .off('hashchange', hashChangeHandler) .off('resize', resizeHandler); $(document) .off('click', '#fp-nav a') .off('mouseenter', '#fp-nav li') .off('mouseleave', '#fp-nav li') .off('click', '.fp-slidesNav a') .off('mouseover', options.normalScrollElements) .off('mouseout', options.normalScrollElements); $('.fp-section') .off('click', '.fp-controlArrow'); //lets make a mess! if(all){ destroyStructure(); } }; /* * Removes inline styles added by fullpage.js */ function destroyStructure(){ //reseting the `top` or `translate` properties to 0 silentScroll(0); $('#fp-nav, .fp-slidesNav, .fp-controlArrow').remove(); //removing inline styles $('.fp-section').css( { 'height': '', 'background-color' : '', 'padding': '' }); $('.fp-slide').css( { 'width': '' }); container.css({ 'height': '', 'position': '', '-ms-touch-action': '', 'touch-action': '' }); //removing added classes $('.fp-section, .fp-slide').each(function(){ removeSlimScroll($(this)); $(this).removeClass('fp-table active'); }); removeAnimation(container); removeAnimation(container.find('.fp-easing')); //Unwrapping content container.find('.fp-tableCell, .fp-slidesContainer, .fp-slides').each(function(){ //unwrap not being use in case there's no child element inside and its just text $(this).replaceWith(this.childNodes); }); //scrolling the page to the top with no animation $('html, body').scrollTop(0); } /* * Sets the state for a variable with multiple states (original, and temporal) * Some variables such as `autoScrolling` or `recordHistory` might change automatically its state when using `responsive` or `autoScrolling:false`. * This function is used to keep track of both states, the original and the temporal one. * If type is not 'internal', then we assume the user is globally changing the variable. */ function setVariableState(variable, value, type){ options[variable] = value; if(type !== 'internal'){ originals[variable] = value; } } /** * Displays warnings */ function displayWarnings(){ // Disable mutually exclusive settings if (options.continuousVertical && (options.loopTop || options.loopBottom)) { options.continuousVertical = false; showError('warn', "Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled"); } if(options.continuousVertical && options.scrollBar){ options.continuousVertical = false; showError('warn', "Option `scrollBar` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled"); } //anchors can not have the same value as any element ID or NAME $.each(options.anchors, function(index, name){ if($('#' + name).length || $('[name="'+name+'"]').length ){ showError('error', "data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE)."); } }); } function showError(type, text){ console && console[type] && console[type]('fullPage: ' + text); } }; })(jQuery); $(function(){ if($(window).width()>1200){ $('#fullpage').fullpage({ anchors: ['page_1', 'page_2', 'page_3', 'footer'], afterLoad:function(anchorLink ,index){ $(".leftBtn li").eq(index-1).addClass("active").siblings().removeClass("active") if(index>=2){ $(".header").css({"background":"#fff","border-bottom":"4px solid #d6d6d6"}); $(".xf").show(); $(".playState").click(); }else{ $(".header").css({"background":"none","border-bottom":"none"}); $(".xf").hide(); } if($(window).width()>1200){ if(index==2){ $(".mleftHide1").addClass("left75_f2"); } if(index==3 || index==4){ $(".mleftHide2").addClass("left75_f2"); } if(index!=2){ $(".mleftHide1").removeClass("left75_f2"); } if(index!=3 && index!=4){ $(".mleftHide2").removeClass("left75_f2") } /*if(index==4 || index==1){ $(".leftBtn").hide(); }else{ $(".leftBtn").show(); }*/ } }, }); $(window).resize(function(){ autoScrolling() }) autoScrolling() function autoScrolling(){ var $ww = $(window).width(); $(".banner").width($ww) $(".banner .bd ul,.banner .bd ul li").width($ww) if($ww <= 1200){ $.fn.fullpage.setAutoScrolling(false); $("#section-footer").css("height","100%"); $("#section-footer .fp-tableCell").css("height","100%"); } else { $.fn.fullpage.setAutoScrolling(true); } } } }) $win_w = $(window).width(); function tt(){ location.reload(); } $(window).resize(function(){ if(($win_w<=1200 && $(window).width()>=1200) || ($win_w>=1200 && $(window).width()<=1200)){ setTimeout(function(){ tt() },1000) } setTimeout(function(){ $(".banner,.banner .bd ul,.banner .bd ul li").width($(window).width()) },1000) })