|
|
| (155 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | {{UFAM-UEA_Brazil/CSS}} | | {{UFAM-UEA_Brazil/CSS}} |
| | {{UFAM-UEA_Brazil/FPCSS}} | | {{UFAM-UEA_Brazil/FPCSS}} |
| | + | {{UFAM-UEA_Brazil/menu-css}} |
| | | | |
| | <html> | | <html> |
| − |
| |
| | <head> | | <head> |
| | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| | | | |
| | | | |
| − | <style type="text/css"> | + | <style> |
| − | @CHARSET "ISO-8859-1";
| + | |
| − | /* Reset CSS
| + | |
| − | * --------------------------------------- */
| + | |
| − | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
| + | |
| − | form,fieldset,input,textarea,p,blockquote,th,td {
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | a{
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | table {
| + | |
| − | border-spacing: 0;
| + | |
| − | }
| + | |
| − | fieldset,img {
| + | |
| − | border: 0;
| + | |
| − | }
| + | |
| − | address,caption,cite,code,dfn,em,strong,th,var {
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | strong{
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | ol,ul {
| + | |
| − | list-style: none;
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | }
| + | |
| − | caption,th {
| + | |
| − | text-align: left;
| + | |
| | | | |
| − | }
| + | @font-face { |
| − | h1,h2,h3,h4,h5,h6 {
| + | font-family: wikiFontBold; |
| − | font-weight: normal;
| + | src: url(https://static.igem.org/mediawiki/2016/1/1a/UFAM-UEA-Brazil_ApexNew-Bold.otf); |
| − | font-size: 100%; | + | |
| − | margin:0; | + | |
| − | padding:0;
| + | |
| − | color:#444;
| + | |
| − | }
| + | |
| − | q:before,q:after {
| + | |
| − | content:'';
| + | |
| − | }
| + | |
| − | abbr,acronym { border: 0;
| + | |
| | } | | } |
| | | | |
| | + | .sectionL{ |
| | + | text-align:center; |
| | + | } |
| | | | |
| − | /* Custom CSS
| + | .sectionL{ |
| − | * --------------------------------------- */
| + | background-size: cover; |
| − | body{
| + | } |
| − | font-family: arial,helvetica; | + | |
| − | color: #333;
| + | h1{ |
| − | color: rgba(0,0,0,0.5);
| + | color: #fff; |
| − | }
| + | margin:0; |
| − | .wrap{
| + | padding:0.5em; |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | } |
| − | width: 960px;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | h1{
| + | |
| − | font-size: 6em;
| + | |
| − | }
| + | |
| − | p{
| + | |
| − | font-size: 2em; | + | |
| − | color:#444;
| + | |
| − | } | + | |
| − | .intro p{
| + | |
| − | width: 50%; | + | |
| − | margin: 0 auto; | + | |
| − | font-size: 1.5em;
| + | |
| − | }
| + | |
| − | .section{
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | #menu li {
| + | |
| − | display:inline-block;
| + | |
| − | margin: 5px;
| + | |
| − | color: #000; /* cor do texto do item selecionado*/
| + | |
| − | background:#fff;
| + | |
| − | background: rgba(255,255,255, 0.5);/* cor do background nao selecionado*/
| + | |
| − | -webkit-border-radius: 10px;
| + | |
| − | border-radius: 10px;
| + | |
| − | }
| + | |
| − | #menu li.active{
| + | |
| − | background:#fff;
| + | |
| − | background: rgba(0,0,0, 0.5);/* cor do background seleciodo mouse em cima*/
| + | |
| − | color: #000;
| + | |
| − | }
| + | |
| − | #menu li a{
| + | |
| − | text-decoration:none; | + | |
| − | color: #000;/* cor do texto do itens nao selecionado*/
| + | |
| − | }
| + | |
| − | #menu li.active a:hover{
| + | |
| − | color: #000; /* cor do texto do item selecionado mouse em cima*/
| + | |
| − | }
| + | |
| − | #menu li:hover{
| + | |
| − | background: rgba(255,255,255, 0.8);/* background item nao seleciodo mouse em cima */
| + | |
| − | }
| + | |
| − | #menu li a,
| + | |
| − | #menu li.active a{
| + | |
| − | padding: 9px 18px;
| + | |
| − | display:block;
| + | |
| − | }
| + | |
| − | #menu li.active a{
| + | |
| − | color: #fff;/* cor do texto do item selecionado mouse out*/
| + | |
| − | }
| + | |
| − | #menu{
| + | |
| − | position:fixed;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | height: 40px;
| + | |
| − | z-index: 70;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | margin:0;
| + | |
| − | } | + | |
| | | | |
| − | #infoMenu{ | + | #sectionL0 .intro p{ |
| − | height: 20px;
| + | font-size:0.8em; |
| − | color: #f2f2f2;
| + | |
| − | position:fixed;
| + | |
| − | z-index:70;
| + | |
| − | bottom:0;
| + | |
| − | width:100%;
| + | |
| − | text-align:right;
| + | |
| − | font-size:0.9em;
| + | |
| − | padding:8px 0 8px 0;
| + | |
| − | }
| + | |
| − | #infoMenu ul{
| + | |
| − | padding: 0 40px;
| + | |
| − | }
| + | |
| − | #infoMenu li a{
| + | |
| − | display: block;
| + | |
| − | margin: 0 22px 0 0;
| + | |
| − | color: #333;
| + | |
| − | }
| + | |
| − | #infoMenu li a:hover{
| + | |
| − | text-decoration:underline;
| + | |
| − | }
| + | |
| − | #infoMenu li{
| + | |
| − | display:inline-block;
| + | |
| − | position:relative;
| + | |
| | } | | } |
| | + | |
| | + | #myVideo{ |
| | + | position: absolute; |
| | + | right: 0; |
| | + | bottom: 0; |
| | + | top:0; |
| | + | right:0; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | background-size: 100% 100%; |
| | + | background-color: black; /* in case the video doesn't fit the whole page*/ |
| | + | background-image: /* our video */; |
| | + | background-position: center center; |
| | + | background-size: contain; |
| | + | object-fit: cover; /*cover video background */ |
| | + | z-index:3; |
| | + | } |
| | | | |
| − | /* Demos Menu
| |
| − | * --------------------------------------- */
| |
| − | #demosMenu{
| |
| − | position:fixed;
| |
| − | bottom: 10px;
| |
| − | right:10px;
| |
| − | z-index: 999;
| |
| − | }
| |
| − |
| |
| − | .readMore {
| |
| − | text-align:center;
| |
| − | background-color:transparent;
| |
| − | padding:15px;
| |
| − | }
| |
| − |
| |
| − | .readMore a{
| |
| − | text-align:center;
| |
| − | text-decoration:none;
| |
| − | color:#000;
| |
| − | padding:10px;
| |
| − | background: rgba(255,255,255, 0.5);
| |
| − | -webkit-border-radius: 10px;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| − |
| |
| − | .readMore a:hover{
| |
| − | color:#fff;
| |
| − | background: rgba(0,0,0, 0.8);
| |
| − | padding:5px;
| |
| − | -webkit-border-radius: 10px;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| | | | |
| | | | |
| − | .readMore li:hover{
| + | /* Layer with position absolute in order to have it over the video |
| − | background: rgba(255,255,255, 0.8);/* background item nao seleciodo mouse em cima */ | + | * --------------------------------------- */ |
| − | } | + | #sectionL0 .layer{ |
| | + | position: absolute; |
| | + | z-index: 4; |
| | + | width: 25%; |
| | + | left: 37%; |
| | + | top: 65%; |
| | + | } |
| | | | |
| − | <style>
| + | #sectionL0 .layer h1{ |
| | + | font-size: 2.3em; |
| | + | color:#363636; |
| | + | font-family: wikiFontBold; |
| | + | } |
| | + | |
| | + | /*solves problem with overflowing video in Mac with Chrome */ |
| | + | #sectionL0{ |
| | + | overflow: hidden; |
| | | | |
| − | <meta name= "viewport" content = "initial-scale=1.0, width= device-width" />
| + | #sectionL0 .layer{ |
| | + | position: absolute; |
| | + | z-index: 999; |
| | + | width: 100%; |
| | + | left: 0; |
| | + | text-align:center; |
| | + | } |
| | + | |
| | + | |
| | + | </style> |
| | | | |
| | | | |
| | </head> | | </head> |
| − |
| |
| | <body> | | <body> |
| | + | <header style="background-color:rgba(0, 0, 0, 0.5);"> |
| | + | <a href="https://www.facebook.com/ManausnoiGEM/" target="blank"><img class="redes" style="margin-left:20px" src="https://static.igem.org/mediawiki/2016/c/cb/Ufam_uea_face.png"/></a> |
| | + | <a href="https://www.instagram.com/igem.ufam/" target="blank"><img class="redes" src="https://static.igem.org/mediawiki/2016/b/ba/Ufam_uea_insta.png"/></a> |
| | + | |
| | + | <nav class="nav-collapse"> |
| | + | <ul> |
| | + | |
| | + | <li class="menu-item" ><a href="/Team:UFAM-UEA_Brazil/Project"><img id="menu-project-img-en" src="https://static.igem.org/mediawiki/2016/thumb/d/d6/UFAM_UEA_ICON_ENG_1.png/567px-UFAM_UEA_ICON_ENG_1.png" height=4em width=4em/></a></li> |
| | + | |
| | + | |
| | + | <li class="menu-item" ><a href="/Team:UFAM-UEA_Brazil/Judging"><img src="https://static.igem.org/mediawiki/2016/6/60/UFAM_UEA_ICON_ENG_2.png"/></a></li> |
| | + | |
| | + | |
| | + | <li class="menu-item" ><a href="/Team:UFAM-UEA_Brazil/Parts"><img src="https://static.igem.org/mediawiki/2016/thumb/9/91/UFAM_UEA_ICON_ENG_3.png/567px-UFAM_UEA_ICON_ENG_3.png"/></a></li> |
| | + | |
| | + | |
| | + | <li class="menu-item" ><a href="/Team:UFAM-UEA_Brazil/HumanPractices"><img id ="menu-humanPractices-img-en" src="https://static.igem.org/mediawiki/2016/thumb/c/c8/UFAM_UEA_ICON_ENG_4.png/800px-UFAM_UEA_ICON_ENG_4.png"/></a></li> |
| | | | |
| − | <ul id="menu"> | + | |
| − | <li data- menuanchor="slidePage"><a href=" #slidePage">Home</ a></ li> | + | < li class="menu- item"><a href="/ Team:UFAM-UEA_Brazil/ MathModeling">< img src=" https:// static.igem.org/ mediawiki/2016/ thumb/c/cf/UFAM_UEA_ICON_ENG_5.png/800px- UFAM_UEA_ICON_ENG_5.png" /></a></li> |
| − | <li data-menuanchor="projectPage"><a href="#projectPage">Project</a></li>
| + | |
| − | <li data-menuanchor="resultsPage"><a href="#resultsPage">Results</a></li>
| + | |
| − | <li data-menuanchor="partsPage"><a href="#partsPage">Parts</a></li>
| + | <li class=" menu-item"><a href="/ Team:UFAM-UEA_Brazil/ Team" >< img src=" https:// static.igem.org/mediawiki/2016/thumb/8/88/UFAM_UEA_ICON_ENG_6.png/567px- UFAM_UEA_ICON_ENG_6.png" /></a></li> |
| − | <li data-menuanchor=" mathModelingPage"><a href=" #mathModelingPage">Math Modeling</ a></ li> | + | </ul> |
| − | <li data-menuanchor="outReachPage"><a href="#outReachPage">Out Reach</a></li>
| + | </nav> |
| − | <li data-menuanchor="teamPage"><a href="#teamPage">Team</a></li>
| + | </header> |
| − | <li data-menuanchor="contactPage"><a href="#contactPage">Contact</a></li>
| + | |
| − | </ul> | + | |
| | | | |
| | <div id="fullpage"> | | <div id="fullpage"> |
| | | | |
| − | <div class="section " id="section0"> | + | <div class="sectionL " id="sectionL0"> |
| − | <h1>Hydrargium</h1> | + | |
| − | <p>A revolutionary method to Hg bioremediation in E. coli</p>
| + | <video autoplay loop muted id="myVideo"> |
| − | </div>
| + | <source src="https://static.igem.org/mediawiki/2016/2/28/Ufam_uea_home_movie.mp4" type="video/mp4"> |
| − |
| + | <source src="https://static.igem.org/mediawiki/2016/7/77/Ufam_uea_homewebm.webm" type="video/webm"> |
| − | <div class=" section" id=" section1" > | + | </video> |
| − | <div class="intro">
| + | <div class=" navegationImg" ><a id=" downArrow" href=" #">< img src="https:/ /static. igem. org/mediawiki/2016/c/c5/Ufam_uea_brazil_arrow_down.png" style="width: 3em;heigth:3em"/></a ></ div> |
| − | <h1>Project</h1>
| + | |
| − | <p>Synthetic Biology allow us design new biological system for a specific function. We built an innovative system in Escherichia coli for mercury (Hg) bioremediation. Our project consists in two steps: designing a new promoter regulated by Hg and mer operon. To learn more about our project click below.</p>
| + | <div class="layer"> |
| − |
| + | <h1><b>BREAKING</br></br>THEM ALL</b></h1> |
| − | <p class="readMore"><a href="#">Read more</a></p>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | | | |
| − | <div class="section" id="section2"> | + | <div class="sectionL" id="sectionL1"> |
| | <div class="intro"> | | <div class="intro"> |
| − |
| + | <h1>ABSTRACT</h1> |
| − | <div class="slide" id="slideResultMolecularDesign"> | + | |
| − | <h2>Results</h2>
| + | <p style="font-size: 1em;">Mercury is a highly toxic metal which is present in our everyday-life. In Amazon, mercury is widely used in industries and mining. Due to the absence of a strict regulation, it’s estimated that there are about 3000 tons of mercury contaminating Amazon's biodiversity and native populations. Our main goal is to develop revolutionary bioremediation methods, structured as: design and characterization of new promoters regulated by MerR; Mer operon expression improvement; a synthetic phytochelatin and it's expression in the outer membrane; first iGEM genome sequencing of a mercury resistant bacteria from Amazon. As second part of our design we built the first (real!) bioreactor to treat mercury contaminated water using our chassis carrying our synthetic genetic circuits! We achieved the ultimate proof of concept and it was the first step to have this SynBio system working out there in the real world. Beyond the bench, we grounded our efforts on an integrated outreach by raising discussions between governmental entities. We reached stakeholders who had the chance to know more about mercury issues in Amazon! From kids to prosecutors and politicians; from high school grounds to collegiate students; featuring biobricks in genetic engineering subject; we did shake the structures of traditional teaching with our fun and efficient methods spreading the word of synthetic biology! Check this out! </p> |
| − | <h1>Molecular Design</h1>
| + | |
| − | < p class=" readMore"><a href="#"> Read more</ a></ p> | + | < div class=" navegationImg"><a id="downArrowTwo" href="#">< img src="https://static.igem.org/mediawiki/2016/c/c5/Ufam_uea_brazil_arrow_down.png" style="width:3em;heigth:3em"/></ a></div> |
| − | </div>
| + | |
| | | | |
| − | <div class="slide" id="slideResultMeasurement">
| |
| − | <h2>Results</h2>
| |
| − | <h1>Measurement</h1>
| |
| − | <p class="readMore"><a href="#">Read more</a></p>
| |
| − | </div>
| |
| − |
| |
| | </div> | | </div> |
| | </div> | | </div> |
| | | | |
| − | <div class="section" id="section3"> | + | <div class="sectionL" id="sectionL2"> |
| − | <div class="intro">
| + | |
| − | <h1>Parts</h1>
| + | |
| − | <p>We built a library of new parts which are essential for the design of new biological circuits for mercury bioremediation, going from regulatory protein gene to structural region of enzymes. To see all the biobricks click below.</p>
| + | |
| | | | |
| − | <p class="readMore"><a href="#">Read more</a></p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="section" id="section4">
| |
| | <div class="intro"> | | <div class="intro"> |
| − | <h1>Math Modeling</h1> | + | <video id="videoAbstract" width="940" height="360" controls> |
| − | | + | <source src="https://static.igem.org/mediawiki/2016/2/21/UFAM_UEA_HOME_%281%29.mp4" type="video/mp4"> |
| | + | </video> |
| | + | <div class="navegationImg"><a id="downArrowTres" href="#"><img src="https://static.igem.org/mediawiki/2016/c/c5/Ufam_uea_brazil_arrow_down.png" style="width:3em;heigth:3em"/></a></div> |
| | </div> | | </div> |
| − | </div>
| |
| − |
| |
| − | <div class="section" id="section5">
| |
| − | <div class="intro">
| |
| − | <h1>Out Reach</h1>
| |
| − | <p>School lectures seems to be quite stressful sometimes and because students miss the focus quickly. The school evasion is easily noticed. We developed a program of practical classes that get out of that ordinary line. We did a program with funny and interactive lectures related to biological themes, synthetic biology and genetic engineering. We had a huge success. Check this out!</p>
| |
| | | | |
| − | <p class="readMore"><a href="#">Read more</a></p>
| |
| − | </div>
| |
| | </div> | | </div> |
| − |
| |
| − | <div class="section" id="section6">
| |
| − | <p class="readMore"><a href="#">View Team</a></p>
| |
| − | </div>
| |
| − |
| |
| − | <div class="section" id="section7">
| |
| − | <h1>Contact</h1>
| |
| − | </div>
| |
| − |
| |
| | | | |
| − | </div>
| |
| | | | |
| | + | <div class="sectionL" id="sectionL3"> |
| | + | |
| | + | <div class="intro"> |
| | + | |
| | + | <h1 style="padding:0.5em">SPONSORS</h1> |
| | + | <div class="c-col-s" style="background:#fff"> |
| | + | |
| | + | <div class="col-s"><div class="img-col-s"><img style="width:7em; heigth:14em" src="https://static.igem.org/mediawiki/2016/2/23/Ufam_uea_ufam.png"></div></div> |
| | | | |
| − | </body> | + | <div class="col-s"><div class="img-col-s"><img src="https://static.igem.org/mediawiki/2016/thumb/7/7a/Ufam_uea_uea.png/960px-Ufam_uea_uea.png"></div></div> |
| | + | |
| | + | <div class="col-s"><div class="img-col-s"><img style="width:5em; heigth:10em" src="https://static.igem.org/mediawiki/2016/e/e3/Ufam_uea_bic.png"></div></div> |
| | | | |
| − | <script> | + | <div class="col-s"><div class="img-col-s"><img style="width:6em; heigth:12em" src="https://static.igem.org/mediawiki/2016/2/2b/Ufam_uea_bionorte.png"></div></div> |
| | | | |
| − | $(document).ready(function(){
| + | <div class="col-s"><div class="img-col-s"><img src="https://static.igem.org/mediawiki/2016/9/93/Ufam_uea_btg.png" style="width:6em"></div></div> |
| − | $("#demosMenu").change(function(){
| + | |
| − | window.location.href = $(this).find("option:selected").attr("id") + '.html';
| + | |
| − | });
| + | |
| − | });
| + | |
| | | | |
| − | </script> | + | <div class="col-s"><div class="img-col-s"><img style="width:7em; heigth:10em" src="https://static.igem.org/mediawiki/2016/thumb/0/0b/Ufam_uea_cprm.png/1200px-Ufam_uea_cprm.png"></div></div> |
| − | <script type="text/javascript"> | + | |
| | | | |
| − | /*!
| |
| − | * fullPage 2.7.7
| |
| − | * https://github.com/alvarotrigo/fullPage.js
| |
| − | * @license MIT licensed
| |
| − | *
| |
| − | * Copyright (C) 2015 alvarotrigo.com - A project by Alvaro Trigo
| |
| − | */
| |
| − | (function(global, factory) {
| |
| − | 'use strict';
| |
| − | if (typeof define === 'function' && define.amd) {
| |
| − | define(['jquery'], function($) {
| |
| − | return factory($, global, global.document, global.Math);
| |
| − | });
| |
| − | } else if (typeof exports !== 'undefined') {
| |
| − | module.exports = factory(require('jquery'), global, global.document, global.Math);
| |
| − | } else {
| |
| − | factory(jQuery, global, global.document, global.Math);
| |
| − | }
| |
| − | })(typeof window !== 'undefined' ? window : this, function($, window, document, Math, undefined) {
| |
| − | 'use strict';
| |
| | | | |
| − | // keeping central set of classnames and selectors
| + | </div> |
| − | var WRAPPER = 'fullpage-wrapper';
| + | |
| − | var WRAPPER_SEL = '.' + WRAPPER;
| + | |
| | | | |
| − | // slimscroll
| + | <div class="c-col-s" style="background:#fff"> |
| − | var SCROLLABLE = 'fp-scrollable';
| + | |
| − | var SCROLLABLE_SEL = '.' + SCROLLABLE;
| + | |
| − | var SLIMSCROLL_BAR_SEL = '.slimScrollBar';
| + | |
| − | var SLIMSCROLL_RAIL_SEL = '.slimScrollRail';
| + | |
| | | | |
| − | // util
| + | <div class="col-s"><div class="img-col-s"><img style="width:5em; heigth:11em" src="https://static.igem.org/mediawiki/2016/thumb/e/ee/Ufam_uea_cristalia.png/900px-Ufam_uea_cristalia.png" style="width:6em"></div></div> |
| − | var RESPONSIVE = 'fp-responsive';
| + | |
| − | var NO_TRANSITION = 'fp-notransition';
| + | |
| − | var DESTROYED = 'fp-destroyed';
| + | |
| − | var ENABLED = 'fp-enabled';
| + | |
| − | var VIEWING_PREFIX = 'fp-viewing';
| + | |
| − | var ACTIVE = 'active';
| + | |
| − | var ACTIVE_SEL = '.' + ACTIVE;
| + | |
| | | | |
| − | // section
| + | <div class="col-s"><div class="img-col-s"><img style="width:7em; heigth:5em" src="https://static.igem.org/mediawiki/2016/thumb/1/13/Ufam_uea_google.png/1200px-Ufam_uea_google.png" style="width:6em"></div></div> |
| − | var SECTION_DEFAULT_SEL = '.section';
| + | |
| − | var SECTION = 'fp-section';
| + | |
| − | var SECTION_SEL = '.' + SECTION;
| + | |
| − | var SECTION_ACTIVE_SEL = SECTION_SEL + ACTIVE_SEL;
| + | |
| − | var SECTION_FIRST_SEL = SECTION_SEL + ':first';
| + | |
| − | var SECTION_LAST_SEL = SECTION_SEL + ':last';
| + | |
| − | var TABLE_CELL = 'fp-tableCell';
| + | |
| − | var TABLE_CELL_SEL = '.' + TABLE_CELL;
| + | |
| − | var AUTO_HEIGHT = 'fp-auto-height';
| + | |
| − | var AUTO_HEIGHT_SEL = '.fp-auto-height';
| + | |
| − | var NORMAL_SCROLL = 'fp-normal-scroll';
| + | |
| − | var NORMAL_SCROLL_SEL = '.fp-normal-scroll';
| + | |
| | | | |
| − | // section nav
| + | <div class="col-s"><div class="img-col-s"><img style="width:8em; heigth:5em" src="https://static.igem.org/mediawiki/2016/thumb/9/94/Ufam_uea_linax.jpg/1200px-Ufam_uea_linax.jpg"></div></div> |
| − | var SECTION_NAV = 'fp-nav';
| + | |
| − | var SECTION_NAV_SEL = '#' + SECTION_NAV;
| + | |
| − | var SECTION_NAV_TOOLTIP = 'fp-tooltip';
| + | |
| − | var SECTION_NAV_TOOLTIP_SEL='.'+SECTION_NAV_TOOLTIP;
| + | |
| − | var SHOW_ACTIVE_TOOLTIP = 'fp-show-active';
| + | |
| | | | |
| − | // slide
| + | <div class="col-s"><div class="img-col-s"><img style="width:5em; heigth:9em" src="https://static.igem.org/mediawiki/2016/thumb/d/d4/Ufam_uea_natura.png/900px-Ufam_uea_natura.png"></div></div> |
| − | var SLIDE_DEFAULT_SEL = '.slide';
| + | |
| − | var SLIDE = 'fp-slide';
| + | |
| − | var SLIDE_SEL = '.' + SLIDE;
| + | |
| − | var SLIDE_ACTIVE_SEL = SLIDE_SEL + ACTIVE_SEL;
| + | |
| − | var SLIDES_WRAPPER = 'fp-slides';
| + | |
| − | var SLIDES_WRAPPER_SEL = '.' + SLIDES_WRAPPER;
| + | |
| − | var SLIDES_CONTAINER = 'fp-slidesContainer';
| + | |
| − | var SLIDES_CONTAINER_SEL = '.' + SLIDES_CONTAINER;
| + | |
| − | var TABLE = 'fp-table';
| + | |
| | | | |
| − | // slide nav
| + | <div class="col-s"><div class="img-col-s"><img style="width:7em; heigth:10em" src="https://static.igem.org/mediawiki/2016/0/00/Ufam_uea_protec.png"></div></div> |
| − | var SLIDES_NAV = 'fp-slidesNav';
| + | |
| − | var SLIDES_NAV_SEL = '.' + SLIDES_NAV;
| + | |
| − | var SLIDES_NAV_LINK_SEL = SLIDES_NAV_SEL + ' a';
| + | |
| − | var SLIDES_ARROW = 'fp-controlArrow';
| + | |
| − | var SLIDES_ARROW_SEL = '.' + SLIDES_ARROW;
| + | |
| − | var SLIDES_PREV = 'fp-prev';
| + | |
| − | var SLIDES_PREV_SEL = '.' + SLIDES_PREV;
| + | |
| − | var SLIDES_ARROW_PREV = SLIDES_ARROW + ' ' + SLIDES_PREV;
| + | |
| − | var SLIDES_ARROW_PREV_SEL = SLIDES_ARROW_SEL + SLIDES_PREV_SEL;
| + | |
| − | var SLIDES_NEXT = 'fp-next';
| + | |
| − | var SLIDES_NEXT_SEL = '.' + SLIDES_NEXT;
| + | |
| − | var SLIDES_ARROW_NEXT = SLIDES_ARROW + ' ' + SLIDES_NEXT;
| + | |
| − | var SLIDES_ARROW_NEXT_SEL = SLIDES_ARROW_SEL + SLIDES_NEXT_SEL;
| + | |
| | | | |
| − | var $window = $(window);
| + | <div class="col-s"><div class="img-col-s"><img style="width:10em; heigth:6em" src="https://static.igem.org/mediawiki/2016/8/81/Ufam_uea_sofape.png"></div></div> |
| − | var $document = $(document);
| + | |
| | | | |
| − | var defaultScrollHandler;
| + | </div><!-- /row --> |
| | | | |
| − | $.fn.fullpage = function(options) {
| |
| | | | |
| − | // common jQuery objects
| |
| − | var $htmlBody = $('html, body');
| |
| − | var $body = $('body');
| |
| | | | |
| − | var FP = $.fn.fullpage;
| |
| − | // Create some defaults, extending them with any options that were provided
| |
| − | options = $.extend({
| |
| − | //navigation
| |
| − | menu: false,
| |
| − | anchors:[],
| |
| − | lockAnchors: false,
| |
| − | navigation: false,
| |
| − | navigationPosition: 'right',
| |
| − | navigationTooltips: [],
| |
| − | showActiveTooltip: false,
| |
| − | slidesNavigation: false,
| |
| − | slidesNavPosition: 'bottom',
| |
| − | scrollBar: false,
| |
| − | hybrid: false,
| |
| | | | |
| − | //scrolling
| |
| − | css3: true,
| |
| − | scrollingSpeed: 700,
| |
| − | autoScrolling: true,
| |
| − | fitToSection: true,
| |
| − | fitToSectionDelay: 1000,
| |
| − | easing: 'easeInOutCubic',
| |
| − | easingcss3: 'ease',
| |
| − | loopBottom: false,
| |
| − | loopTop: false,
| |
| − | loopHorizontal: true,
| |
| − | continuousVertical: false,
| |
| − | normalScrollElements: null,
| |
| − | scrollOverflow: false,
| |
| − | scrollOverflowHandler: defaultScrollHandler,
| |
| − | touchSensitivity: 5,
| |
| − | normalScrollElementTouchThreshold: 5,
| |
| | | | |
| − | //Accessibility
| + | <div class="navegationImg"><a id="backTop" href="#"><img src="https://static.igem.org/mediawiki/2016/5/56/UFAM_UEA_BACKTOTOP.png" style="width:3em;heigth:3em"/></a></div> |
| − | keyboardScrolling: true,
| + | </div> |
| − | animateAnchor: true,
| + | |
| − | recordHistory: true,
| + | </div> |
| | + | |
| | + | </div> |
| | | | |
| − | //design
| |
| − | controlArrows: true,
| |
| − | controlArrowColor: '#fff',
| |
| − | verticalCentered: true,
| |
| − | resize: false,
| |
| − | sectionsColor : [],
| |
| − | paddingTop: 0,
| |
| − | paddingBottom: 0,
| |
| − | fixedElements: null,
| |
| − | responsive: 0, //backwards compabitility with responsiveWiddth
| |
| − | responsiveWidth: 0,
| |
| − | responsiveHeight: 0,
| |
| | | | |
| − | //Custom selectors
| + | </body> |
| − | sectionSelector: SECTION_DEFAULT_SEL,
| + | |
| − | slideSelector: SLIDE_DEFAULT_SEL,
| + | |
| − | | + | |
| − | | + | |
| − | //events
| + | |
| − | afterLoad: null,
| + | |
| − | onLeave: null,
| + | |
| − | afterRender: null,
| + | |
| − | afterResize: null,
| + | |
| − | afterReBuild: null,
| + | |
| − | afterSlideLoad: null,
| + | |
| − | onSlideLeave: null
| + | |
| − | }, options);
| + | |
| − | | + | |
| − | displayWarnings();
| + | |
| − | | + | |
| − | //easeInOutCubic animation included in the plugin
| + | |
| − | $.extend($.easing,{ easeInOutCubic: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b;}});
| + | |
| − | | + | |
| − | //TO BE REMOVED in future versions. Maintained temporaly for backwards compatibility.
| + | |
| − | $.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }});
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets the autoScroll option.
| + | |
| − | * It changes the scroll bar visibility and the history of the site as a result.
| + | |
| − | */
| + | |
| − | FP.setAutoScrolling = function(value, type){
| + | |
| − | setVariableState('autoScrolling', value, type);
| + | |
| − | | + | |
| − | var element = $(SECTION_ACTIVE_SEL);
| + | |
| − | | + | |
| − | if(options.autoScrolling && !options.scrollBar){
| + | |
| − | $htmlBody.css({
| + | |
| − | 'overflow' : 'hidden',
| + | |
| − | 'height' : '100%'
| + | |
| − | });
| + | |
| − | | + | |
| − | FP.setRecordHistory(originals.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{
| + | |
| − | $htmlBody.css({
| + | |
| − | 'overflow' : 'visible',
| + | |
| − | 'height' : 'initial'
| + | |
| − | });
| + | |
| − | | + | |
| − | FP.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
| + | |
| − | if (element.length) {
| + | |
| − | $htmlBody.scrollTop(element.position().top);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Defines wheter to record the history for each hash change in the URL.
| + | |
| − | */
| + | |
| − | FP.setRecordHistory = function(value, type){
| + | |
| − | setVariableState('recordHistory', value, type);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Defines the scrolling speed
| + | |
| − | */
| + | |
| − | FP.setScrollingSpeed = function(value, type){
| + | |
| − | setVariableState('scrollingSpeed', value, type);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets fitToSection
| + | |
| − | */
| + | |
| − | FP.setFitToSection = function(value, type){
| + | |
| − | setVariableState('fitToSection', value, type);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets lockAnchors
| + | |
| − | */
| + | |
| − | FP.setLockAnchors = function(value){
| + | |
| − | options.lockAnchors = value;
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
| + | |
| − | */
| + | |
| − | FP.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.
| + | |
| − | */
| + | |
| − | FP.setAllowScrolling = function (value, directions){
| + | |
| − | if(typeof directions !== 'undefined'){
| + | |
| − | directions = directions.replace(/ /g,'').split(',');
| + | |
| − | | + | |
| − | $.each(directions, function (index, direction){
| + | |
| − | setIsScrollAllowed(value, direction, 'm');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | else if(value){
| + | |
| − | FP.setMouseWheelScrolling(true);
| + | |
| − | addTouchHandler();
| + | |
| − | }else{
| + | |
| − | FP.setMouseWheelScrolling(false);
| + | |
| − | removeTouchHandler();
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys
| + | |
| − | */
| + | |
| − | FP.setKeyboardScrolling = function (value, directions){
| + | |
| − | if(typeof directions !== 'undefined'){
| + | |
| − | directions = directions.replace(/ /g,'').split(',');
| + | |
| − | | + | |
| − | $.each(directions, function (index, direction){
| + | |
| − | setIsScrollAllowed(value, direction, 'k');
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | options.keyboardScrolling = value;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Moves the page up one section.
| + | |
| − | */
| + | |
| − | FP.moveSectionUp = function(){
| + | |
| − | var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL);
| + | |
| − | | + | |
| − | //looping to the bottom if there's no more sections above
| + | |
| − | if (!prev.length && (options.loopTop || options.continuousVertical)) {
| + | |
| − | prev = $(SECTION_SEL).last();
| + | |
| − | }
| + | |
| − | | + | |
| − | if (prev.length) {
| + | |
| − | scrollPage(prev, null, true);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Moves the page down one section.
| + | |
| − | */
| + | |
| − | FP.moveSectionDown = function (){
| + | |
| − | var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);
| + | |
| − | | + | |
| − | //looping to the top if there's no more sections below
| + | |
| − | if(!next.length &&
| + | |
| − | (options.loopBottom || options.continuousVertical)){
| + | |
| − | next = $(SECTION_SEL).first();
| + | |
| − | }
| + | |
| − | | + | |
| − | if(next.length){
| + | |
| − | scrollPage(next, null, false);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Moves the page to the given section and slide with no animation.
| + | |
| − | * Anchors or index positions can be used as params.
| + | |
| − | */
| + | |
| − | FP.silentMoveTo = function(sectionAnchor, slideAnchor){
| + | |
| − | requestAnimFrame(function(){
| + | |
| − | FP.setScrollingSpeed (0, 'internal');
| + | |
| − | });
| + | |
| − | | + | |
| − | FP.moveTo(sectionAnchor, slideAnchor)
| + | |
| − | | + | |
| − | requestAnimFrame(function(){
| + | |
| − | FP.setScrollingSpeed (originals.scrollingSpeed, 'internal');
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Moves the page to the given section and slide.
| + | |
| − | * Anchors or index positions can be used as params.
| + | |
| − | */
| + | |
| − | FP.moveTo = function (sectionAnchor, slideAnchor){
| + | |
| − | var destiny = getSectionByAnchor(sectionAnchor);
| + | |
| − | | + | |
| − | if (typeof slideAnchor !== 'undefined'){
| + | |
| − | scrollPageAndSlide(sectionAnchor, slideAnchor);
| + | |
| − | }else if(destiny.length > 0){
| + | |
| − | scrollPage(destiny);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Slides right the slider of the active section.
| + | |
| − | * Optional `section` param.
| + | |
| − | */
| + | |
| − | FP.moveSlideRight = function(section){
| + | |
| − | moveSlide('next', section);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Slides left the slider of the active section.
| + | |
| − | * Optional `section` param.
| + | |
| − | */
| + | |
| − | FP.moveSlideLeft = function(section){
| + | |
| − | moveSlide('prev', section);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * When resizing is finished, we adjust the slides sizes and positions
| + | |
| − | */
| + | |
| − | FP.reBuild = function(resizing){
| + | |
| − | if(container.hasClass(DESTROYED)){ return; } //nothing to do if the plugin was destroyed
| + | |
| − | | + | |
| − | isResizing = true;
| + | |
| − | requestAnimFrame(function(){
| + | |
| − | isResizing = true;
| + | |
| − | });
| + | |
| − | | + | |
| − | var windowsWidth = $window.outerWidth();
| + | |
| − | windowsHeight = $window.height(); //updating global var
| + | |
| − | | + | |
| − | //text resizing
| + | |
| − | if (options.resize) {
| + | |
| − | resizeMe(windowsHeight, windowsWidth);
| + | |
| − | }
| + | |
| − | | + | |
| − | $(SECTION_SEL).each(function(){
| + | |
| − | var slidesWrap = $(this).find(SLIDES_WRAPPER_SEL);
| + | |
| − | var slides = $(this).find(SLIDE_SEL);
| + | |
| − | | + | |
| − | //adjusting the height of the table-cell for IE and Firefox
| + | |
| − | if(options.verticalCentered){
| + | |
| − | $(this).find(TABLE_CELL_SEL).css('height', getTableHeight($(this)) + 'px');
| + | |
| − | }
| + | |
| − | | + | |
| − | $(this).css('height', windowsHeight + 'px');
| + | |
| − | | + | |
| − | //resizing the scrolling divs
| + | |
| − | if(options.scrollOverflow){
| + | |
| − | if(slides.length){
| + | |
| − | slides.each(function(){
| + | |
| − | createSlimScrolling($(this));
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | createSlimScrolling($(this));
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //adjusting the position fo the FULL WIDTH slides...
| + | |
| − | if (slides.length > 1) {
| + | |
| − | landscapeScroll(slidesWrap, slidesWrap.find(SLIDE_ACTIVE_SEL));
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | var activeSection = $(SECTION_ACTIVE_SEL);
| + | |
| − | var sectionIndex = activeSection.index(SECTION_SEL);
| + | |
| − | | + | |
| − | //isn't it the first section?
| + | |
| − | if(sectionIndex){
| + | |
| − | //adjusting the position for the current section
| + | |
| − | FP.silentMoveTo(sectionIndex + 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | isResizing = false;
| + | |
| − | requestAnimFrame(function(){
| + | |
| − | isResizing = false;
| + | |
| − | });
| + | |
| − | $.isFunction( options.afterResize ) && resizing && options.afterResize.call(container);
| + | |
| − | $.isFunction( options.afterReBuild ) && !resizing && options.afterReBuild.call(container);
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Turns fullPage.js to normal scrolling mode when the viewport `width` or `height`
| + | |
| − | * are smaller than the set limit values.
| + | |
| − | */
| + | |
| − | FP.setResponsive = function (active){
| + | |
| − | var isResponsive = $body.hasClass(RESPONSIVE);
| + | |
| − | | + | |
| − | if(active){
| + | |
| − | if(!isResponsive){
| + | |
| − | FP.setAutoScrolling(false, 'internal');
| + | |
| − | FP.setFitToSection(false, 'internal');
| + | |
| − | $(SECTION_NAV_SEL).hide();
| + | |
| − | $body.addClass(RESPONSIVE);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | else if(isResponsive){
| + | |
| − | FP.setAutoScrolling(originals.autoScrolling, 'internal');
| + | |
| − | FP.setFitToSection(originals.autoScrolling, 'internal');
| + | |
| − | $(SECTION_NAV_SEL).show();
| + | |
| − | $body.removeClass(RESPONSIVE);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //flag to avoid very fast sliding for landscape sliders
| + | |
| − | var slideMoving = false;
| + | |
| − | | + | |
| − | var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
| + | |
| − | var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
| + | |
| − | var container = $(this);
| + | |
| − | var windowsHeight = $window.height();
| + | |
| − | var isResizing = false;
| + | |
| − | var isWindowFocused = true;
| + | |
| − | var lastScrolledDestiny;
| + | |
| − | var lastScrolledSlide;
| + | |
| − | var canScroll = true;
| + | |
| − | var scrollings = [];
| + | |
| − | var nav;
| + | |
| − | var controlPressed;
| + | |
| − | var isScrollAllowed = {};
| + | |
| − | isScrollAllowed.m = { 'up':true, 'down':true, 'left':true, 'right':true };
| + | |
| − | isScrollAllowed.k = $.extend(true,{}, isScrollAllowed.m);
| + | |
| − | var originals = $.extend(true, {}, options); //deep copy
| + | |
| − | | + | |
| − | //timeouts
| + | |
| − | var resizeId;
| + | |
| − | var afterSectionLoadsId;
| + | |
| − | var afterSlideLoadsId;
| + | |
| − | var scrollId;
| + | |
| − | var scrollId2;
| + | |
| − | var keydownId;
| + | |
| − | | + | |
| − | if($(this).length){
| + | |
| − | init();
| + | |
| − | bindEvents();
| + | |
| − | }
| + | |
| − | | + | |
| − | function init(){
| + | |
| − | //if css3 is not supported, it will use jQuery animations
| + | |
| − | if(options.css3){
| + | |
| − | options.css3 = support3d();
| + | |
| − | }
| + | |
| − | | + | |
| − | options.scrollBar = options.scrollBar || options.hybrid;
| + | |
| − | | + | |
| − | | + | |
| − | setOptionsFromDOM();
| + | |
| − | | + | |
| − | prepareDom();
| + | |
| − | FP.setAllowScrolling(true);
| + | |
| − | | + | |
| − | //due to https://github.com/alvarotrigo/fullPage.js/issues/1502
| + | |
| − | windowsHeight = $window.height();
| + | |
| − | | + | |
| − | FP.setAutoScrolling(options.autoScrolling, 'internal');
| + | |
| − | | + | |
| − | //the starting point is a slide?
| + | |
| − | var activeSlide = $(SECTION_ACTIVE_SEL).find(SLIDE_ACTIVE_SEL);
| + | |
| − | | + | |
| − | //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 && ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) !== 0 || ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) === 0 && activeSlide.index() !== 0))){
| + | |
| − | silentLandscapeScroll(activeSlide);
| + | |
| − | }
| + | |
| − | | + | |
| − | responsive();
| + | |
| − | | + | |
| − | //setting the class for the body element
| + | |
| − | setBodyClass();
| + | |
| − | | + | |
| − | $window.on('load', function() {
| + | |
| − | scrollToAnchor();
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | function bindEvents(){
| + | |
| − | $window
| + | |
| − | //when scrolling...
| + | |
| − | .on('scroll', scrollHandler)
| + | |
| − | | + | |
| − | //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)
| + | |
| − | .on('hashchange', hashChangeHandler)
| + | |
| − | | + | |
| − | //when opening a new tab (ctrl + t), `control` won't be pressed when comming back.
| + | |
| − | .blur(blurHandler)
| + | |
| − | | + | |
| − | //when resizing the site, we adjust the heights of the sections, slimScroll...
| + | |
| − | .resize(resizeHandler);
| + | |
| − | | + | |
| − | container
| + | |
| − | //binding the mousemove when the mouse's middle button is released
| + | |
| − | .mousedown(mouseDownHandler)
| + | |
| − | | + | |
| − | //unbinding the mousemove when the mouse's middle button is released
| + | |
| − | .mouseup(mouseUpHandler);
| + | |
| − | | + | |
| − | $document
| + | |
| − | //Sliding with arrow keys, both, vertical and horizontal
| + | |
| − | .keydown(keydownHandler)
| + | |
| − | | + | |
| − | //to prevent scrolling while zooming
| + | |
| − | .keyup(keyUpHandler)
| + | |
| − | | + | |
| − | //Scrolls to the section when clicking the navigation bullet
| + | |
| − | .on('click touchstart', SECTION_NAV_SEL + ' a', sectionBulletHandler)
| + | |
| − | | + | |
| − | //Scrolls the slider to the given slide destination for the given section
| + | |
| − | .on('click touchstart', SLIDES_NAV_LINK_SEL, slideBulletHandler)
| + | |
| − | | + | |
| − | .on('click', SECTION_NAV_TOOLTIP_SEL, tooltipTextHandler);
| + | |
| − | | + | |
| − | //Scrolling horizontally when clicking on the slider controls.
| + | |
| − | $(SECTION_SEL).on('click touchstart', SLIDES_ARROW_SEL, slideArrowHandler);
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Applying normalScroll elements.
| + | |
| − | * Ignoring the scrolls over the specified selectors.
| + | |
| − | */
| + | |
| − | if(options.normalScrollElements){
| + | |
| − | $document.on('mouseenter', options.normalScrollElements, function () {
| + | |
| − | FP.setMouseWheelScrolling(false);
| + | |
| − | });
| + | |
| − | | + | |
| − | $document.on('mouseleave', options.normalScrollElements, function(){
| + | |
| − | FP.setMouseWheelScrolling(true);
| + | |
| − | });
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Setting options from DOM elements if they are not provided.
| + | |
| − | */
| + | |
| − | function setOptionsFromDOM(){
| + | |
| − | //no anchors option? Checking for them in the DOM attributes
| + | |
| − | if(!options.anchors.length){
| + | |
| − | options.anchors = $(options.sectionSelector + '[data-anchor]').map(function(){
| + | |
| − | return $(this).data('anchor').toString();
| + | |
| − | }).get();
| + | |
| − | }
| + | |
| − | | + | |
| − | //no tooltipos option? Checking for them in the DOM attributes
| + | |
| − | if(!options.navigationTooltips.length){
| + | |
| − | options.navigationTooltips = $(options.sectionSelector + '[data-tooltip]').map(function(){
| + | |
| − | return $(this).data('tooltip').toString();
| + | |
| − | }).get();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Works over the DOM structure to set it up for the current fullpage optionss.
| + | |
| − | */
| + | |
| − | function prepareDom(){
| + | |
| − | container.css({
| + | |
| − | 'height': '100%',
| + | |
| − | 'position': 'relative'
| + | |
| − | });
| + | |
| − | | + | |
| − | //adding a class to recognize the container internally in the code
| + | |
| − | container.addClass(WRAPPER);
| + | |
| − | $('html').addClass(ENABLED);
| + | |
| − | | + | |
| − | container.removeClass(DESTROYED); //in case it was destroyed before initilizing it again
| + | |
| − | | + | |
| − | addInternalSelectors();
| + | |
| − | | + | |
| − | //styling the sections / slides / menu
| + | |
| − | $(SECTION_SEL).each(function(index){
| + | |
| − | var section = $(this);
| + | |
| − | var slides = section.find(SLIDE_SEL);
| + | |
| − | var numSlides = slides.length;
| + | |
| − | | + | |
| − | styleSection(section, index);
| + | |
| − | styleMenu(section, index);
| + | |
| − | | + | |
| − | // if there's any slide
| + | |
| − | if (numSlides > 0) {
| + | |
| − | styleSlides(section, slides, numSlides);
| + | |
| − | }else{
| + | |
| − | if(options.verticalCentered){
| + | |
| − | addTableClass(section);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | //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 + active bullet
| + | |
| − | if(options.navigation){
| + | |
| − | addVerticalNavigation();
| + | |
| − | }
| + | |
| − | | + | |
| − | if(options.scrollOverflow){
| + | |
| − | if(document.readyState === 'complete'){
| + | |
| − | createSlimScrollingHandler();
| + | |
| − | }
| + | |
| − | //after DOM and images are loaded
| + | |
| − | $window.on('load', createSlimScrollingHandler);
| + | |
| − | }else{
| + | |
| − | afterRenderActions();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Styles the horizontal slides for a section.
| + | |
| − | */
| + | |
| − | function styleSlides(section, slides, numSlides){
| + | |
| − | var sliderWidth = numSlides * 100;
| + | |
| − | var slideWidth = 100 / numSlides;
| + | |
| − | | + | |
| − | slides.wrapAll('<div class="' + SLIDES_CONTAINER + '" />');
| + | |
| − | slides.parent().wrap('<div class="' + SLIDES_WRAPPER + '" />');
| + | |
| − | | + | |
| − | section.find(SLIDES_CONTAINER_SEL).css('width', sliderWidth + '%');
| + | |
| − | | + | |
| − | if(numSlides > 1){
| + | |
| − | if(options.controlArrows){
| + | |
| − | createSlideArrows(section);
| + | |
| − | }
| + | |
| − | | + | |
| − | if(options.slidesNavigation){
| + | |
| − | addSlidesNavigation(section, numSlides);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | slides.each(function(index) {
| + | |
| − | $(this).css('width', slideWidth + '%');
| + | |
| − | | + | |
| − | if(options.verticalCentered){
| + | |
| − | addTableClass($(this));
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | var startingSlide = section.find(SLIDE_ACTIVE_SEL);
| + | |
| − | | + | |
| − | //if the slide won't be an starting point, the default will be the first one
| + | |
| − | //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( startingSlide.length && ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) !== 0 || ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) === 0 && startingSlide.index() !== 0))){
| + | |
| − | silentLandscapeScroll(startingSlide);
| + | |
| − | }else{
| + | |
| − | slides.eq(0).addClass(ACTIVE);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Styling vertical sections
| + | |
| − | */
| + | |
| − | function styleSection(section, index){
| + | |
| − | //if no active section is defined, the 1st one will be the default one
| + | |
| − | if(!index && $(SECTION_ACTIVE_SEL).length === 0) {
| + | |
| − | section.addClass(ACTIVE);
| + | |
| − | }
| + | |
| − | | + | |
| − | section.css('height', windowsHeight + 'px');
| + | |
| − | | + | |
| − | if(options.paddingTop){
| + | |
| − | section.css('padding-top', options.paddingTop);
| + | |
| − | }
| + | |
| − | | + | |
| − | if(options.paddingBottom){
| + | |
| − | section.css('padding-bottom', options.paddingBottom);
| + | |
| − | }
| + | |
| − | | + | |
| − | if (typeof options.sectionsColor[index] !== 'undefined') {
| + | |
| − | section.css('background-color', options.sectionsColor[index]);
| + | |
| − | }
| + | |
| − | | + | |
| − | if (typeof options.anchors[index] !== 'undefined') {
| + | |
| − | section.attr('data-anchor', options.anchors[index]);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets the data-anchor attributes to the menu elements and activates the current one.
| + | |
| − | */
| + | |
| − | function styleMenu(section, index){
| + | |
| − | if (typeof options.anchors[index] !== 'undefined') {
| + | |
| − | //activating the menu / nav element on load
| + | |
| − | if(section.hasClass(ACTIVE)){
| + | |
| − | activateMenuAndNav(options.anchors[index], index);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //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(WRAPPER_SEL).length){
| + | |
| − | $(options.menu).appendTo($body);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Adds internal classes to be able to provide customizable selectors
| + | |
| − | * keeping the link with the style sheet.
| + | |
| − | */
| + | |
| − | function addInternalSelectors(){
| + | |
| − | //adding internal class names to void problem with common ones
| + | |
| − | $(options.sectionSelector).each(function(){
| + | |
| − | $(this).addClass(SECTION);
| + | |
| − | });
| + | |
| − | $(options.slideSelector).each(function(){
| + | |
| − | $(this).addClass(SLIDE);
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Creates the control arrows for the given section
| + | |
| − | */
| + | |
| − | function createSlideArrows(section){
| + | |
| − | section.find(SLIDES_WRAPPER_SEL).after('<div class="' + SLIDES_ARROW_PREV + '"></div><div class="' + SLIDES_ARROW_NEXT + '"></div>');
| + | |
| − | | + | |
| − | if(options.controlArrowColor!='#fff'){
| + | |
| − | section.find(SLIDES_ARROW_NEXT_SEL).css('border-color', 'transparent transparent transparent '+options.controlArrowColor);
| + | |
| − | section.find(SLIDES_ARROW_PREV_SEL).css('border-color', 'transparent '+ options.controlArrowColor + ' transparent transparent');
| + | |
| − | }
| + | |
| − | | + | |
| − | if(!options.loopHorizontal){
| + | |
| − | section.find(SLIDES_ARROW_PREV_SEL).hide();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Creates a vertical navigation bar.
| + | |
| − | */
| + | |
| − | function addVerticalNavigation(){
| + | |
| − | $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
| + | |
| − | var nav = $(SECTION_NAV_SEL);
| + | |
| − | | + | |
| − | nav.addClass(function() {
| + | |
| − | return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
| + | |
| − | });
| + | |
| − | | + | |
| − | for (var i = 0; i < $(SECTION_SEL).length; i++) {
| + | |
| − | var link = '';
| + | |
| − | if (options.anchors.length) {
| + | |
| − | link = options.anchors[i];
| + | |
| − | }
| + | |
| − | | + | |
| − | var li = '<li><a href="#' + link + '"><span></span></a>';
| + | |
| − | | + | |
| − | // Only add tooltip if needed (defined by user)
| + | |
| − | var tooltip = options.navigationTooltips[i];
| + | |
| − | | + | |
| − | if (typeof tooltip !== 'undefined' && tooltip !== '') {
| + | |
| − | li += '<div class="' + SECTION_NAV_TOOLTIP + ' ' + options.navigationPosition + '">' + tooltip + '</div>';
| + | |
| − | }
| + | |
| − | | + | |
| − | li += '</li>';
| + | |
| − | | + | |
| − | nav.find('ul').append(li);
| + | |
| − | }
| + | |
| − | | + | |
| − | //centering it vertically
| + | |
| − | $(SECTION_NAV_SEL).css('margin-top', '-' + ($(SECTION_NAV_SEL).height()/2) + 'px');
| + | |
| − | | + | |
| − | //activating the current active section
| + | |
| − | $(SECTION_NAV_SEL).find('li').eq($(SECTION_ACTIVE_SEL).index(SECTION_SEL)).find('a').addClass(ACTIVE);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Creates the slim scroll scrollbar for the sections and slides inside them.
| + | |
| − | */
| + | |
| − | function createSlimScrollingHandler(){
| + | |
| − | $(SECTION_SEL).each(function(){
| + | |
| − | var slides = $(this).find(SLIDE_SEL);
| + | |
| − | | + | |
| − | if(slides.length){
| + | |
| − | slides.each(function(){
| + | |
| − | createSlimScrolling($(this));
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | createSlimScrolling($(this));
| + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | afterRenderActions();
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Actions and callbacks to fire afterRender
| + | |
| − | */
| + | |
| − | function afterRenderActions(){
| + | |
| − | var section = $(SECTION_ACTIVE_SEL);
| + | |
| − | | + | |
| − | section.addClass('completely');
| + | |
| − | | + | |
| − | if(options.scrollOverflowHandler.afterRender){
| + | |
| − | options.scrollOverflowHandler.afterRender(section);
| + | |
| − | }
| + | |
| − | lazyLoad(section);
| + | |
| − | playMedia(section);
| + | |
| − | | + | |
| − | $.isFunction( options.afterLoad ) && options.afterLoad.call(section, section.data('anchor'), (section.index(SECTION_SEL) + 1));
| + | |
| − | $.isFunction( options.afterRender ) && options.afterRender.call(container);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | var isScrolling = false;
| + | |
| − | var lastScroll = 0;
| + | |
| − | | + | |
| − | //when scrolling...
| + | |
| − | function scrollHandler(){
| + | |
| − | var currentSection;
| + | |
| − | | + | |
| − | if(!options.autoScrolling || options.scrollBar){
| + | |
| − | var currentScroll = $window.scrollTop();
| + | |
| − | var scrollDirection = getScrollDirection(currentScroll);
| + | |
| − | var visibleSectionIndex = 0;
| + | |
| − | var screen_mid = currentScroll + ($window.height() / 2.0);
| + | |
| − | | + | |
| − | //taking the section which is showing more content in the viewport
| + | |
| − | var sections = document.querySelectorAll(SECTION_SEL);
| + | |
| − | for (var i = 0; i < sections.length; ++i) {
| + | |
| − | var section = sections[i];
| + | |
| − | | + | |
| − | // Pick the the last section which passes the middle line of the screen.
| + | |
| − | if (section.offsetTop <= screen_mid)
| + | |
| − | {
| + | |
| − | visibleSectionIndex = i;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | if(isCompletelyInViewPort(scrollDirection)){
| + | |
| − | if(!$(SECTION_ACTIVE_SEL).hasClass('completely')){
| + | |
| − | $(SECTION_ACTIVE_SEL).addClass('completely').siblings().removeClass('completely');
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //geting the last one, the current one on the screen
| + | |
| − | currentSection = $(sections).eq(visibleSectionIndex);
| + | |
| − | | + | |
| − | //setting the visible section as active when manually scrolling
| + | |
| − | //executing only once the first time we reach the section
| + | |
| − | if(!currentSection.hasClass(ACTIVE)){
| + | |
| − | isScrolling = true;
| + | |
| − | var leavingSection = $(SECTION_ACTIVE_SEL);
| + | |
| − | var leavingSectionIndex = leavingSection.index(SECTION_SEL) + 1;
| + | |
| − | var yMovement = getYmovement(currentSection);
| + | |
| − | var anchorLink = currentSection.data('anchor');
| + | |
| − | var sectionIndex = currentSection.index(SECTION_SEL) + 1;
| + | |
| − | var activeSlide = currentSection.find(SLIDE_ACTIVE_SEL);
| + | |
| − | | + | |
| − | if(activeSlide.length){
| + | |
| − | var slideAnchorLink = activeSlide.data('anchor');
| + | |
| − | var slideIndex = activeSlide.index();
| + | |
| − | }
| + | |
| − | | + | |
| − | if(canScroll){
| + | |
| − | currentSection.addClass(ACTIVE).siblings().removeClass(ACTIVE);
| + | |
| − | | + | |
| − | $.isFunction( options.onLeave ) && options.onLeave.call( leavingSection, leavingSectionIndex, sectionIndex, yMovement);
| + | |
| − | | + | |
| − | $.isFunction( options.afterLoad ) && options.afterLoad.call( currentSection, anchorLink, sectionIndex);
| + | |
| − | lazyLoad(currentSection);
| + | |
| − | | + | |
| − | activateMenuAndNav(anchorLink, sectionIndex - 1);
| + | |
| − | | + | |
| − | if(options.anchors.length){
| + | |
| − | //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.fitToSection){
| + | |
| − | //for the auto adjust of the viewport to fit a whole section
| + | |
| − | clearTimeout(scrollId2);
| + | |
| − | | + | |
| − | scrollId2 = setTimeout(function(){
| + | |
| − | //checking fitToSection again in case it was set to false before the timeout delay
| + | |
| − | if(canScroll && options.fitToSection){
| + | |
| − | //allows to scroll to an active section and
| + | |
| − | //if the section is already active, we prevent firing callbacks
| + | |
| − | if($(SECTION_ACTIVE_SEL).is(currentSection)){
| + | |
| − | requestAnimFrame(function(){
| + | |
| − | isResizing = true;
| + | |
| − | });
| + | |
| − | }
| + | |
| − | scrollPage(currentSection);
| + | |
| − | | + | |
| − | requestAnimFrame(function(){
| + | |
| − | isResizing = false;
| + | |
| − | });
| + | |
| − | }
| + | |
| − | }, options.fitToSectionDelay);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Determines whether the active section has seen in its whole or not.
| + | |
| − | */
| + | |
| − | function isCompletelyInViewPort(movement){
| + | |
| − | var top = $(SECTION_ACTIVE_SEL).position().top;
| + | |
| − | var bottom = top + $window.height();
| + | |
| − | | + | |
| − | if(movement == 'up'){
| + | |
| − | return bottom >= ($window.scrollTop() + $window.height());
| + | |
| − | }
| + | |
| − | return top <= $window.scrollTop();
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets the directon of the the scrolling fired by the scroll event.
| + | |
| − | */
| + | |
| − | function getScrollDirection(currentScroll){
| + | |
| − | var direction = currentScroll > lastScroll ? 'down' : 'up';
| + | |
| − | | + | |
| − | lastScroll = currentScroll;
| + | |
| − | | + | |
| − | return direction;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 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.m[type]){
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | var check, scrollSection;
| + | |
| − | | + | |
| − | if(type == 'down'){
| + | |
| − | check = 'bottom';
| + | |
| − | scrollSection = FP.moveSectionDown;
| + | |
| − | }else{
| + | |
| − | check = 'top';
| + | |
| − | scrollSection = FP.moveSectionUp;
| + | |
| − | }
| + | |
| − | | + | |
| − | if(scrollable.length > 0 ){
| + | |
| − | //is the scrollbar at the start/end of the scroll?
| + | |
| − | if(options.scrollOverflowHandler.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) && isReallyTouch(e) ) {
| + | |
| − | | + | |
| − | if(options.autoScrolling){
| + | |
| − | //preventing the easing on iOS devices
| + | |
| − | event.preventDefault();
| + | |
| − | }
| + | |
| − | | + | |
| − | var activeSection = $(SECTION_ACTIVE_SEL);
| + | |
| − | var scrollable = options.scrollOverflowHandler.scrollable(activeSection);
| + | |
| − | | + | |
| − | if (canScroll && !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(SLIDES_WRAPPER_SEL).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.outerWidth() / 100 * options.touchSensitivity)) {
| + | |
| − | if (touchStartX > touchEndX) {
| + | |
| − | if(isScrollAllowed.m.right){
| + | |
| − | FP.moveSlideRight(); //next
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | if(isScrollAllowed.m.left){
| + | |
| − | FP.moveSlideLeft(); //prev
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //vertical scrolling (only when autoScrolling is enabled)
| + | |
| − | else if(options.autoScrolling){
| + | |
| − | | + | |
| − | //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);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen
| + | |
| − | * this way we make sure that is really a touch event what IE is detecting.
| + | |
| − | */
| + | |
| − | function isReallyTouch(e){
| + | |
| − | //if is not IE || IE is detecting `touch` or `pen`
| + | |
| − | return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse';
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Handler for the touch start event.
| + | |
| − | */
| + | |
| − | function touchStartHandler(event){
| + | |
| − | var e = event.originalEvent;
| + | |
| − | | + | |
| − | //stopping the auto scroll to adjust to a section
| + | |
| − | if(options.fitToSection){
| + | |
| − | $htmlBody.stop();
| + | |
| − | }
| + | |
| − | | + | |
| − | if(isReallyTouch(e)){
| + | |
| − | var touchEvents = getEventsPage(e);
| + | |
| − | touchStartY = touchEvents.y;
| + | |
| − | touchStartX = touchEvents.x;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets the average of the last `number` elements of the given array.
| + | |
| − | */
| + | |
| − | function getAverage(elements, number){
| + | |
| − | var sum = 0;
| + | |
| − | | + | |
| − | //taking `number` elements from the end to make the average, if there are not enought, 1
| + | |
| − | var lastElements = elements.slice(Math.max(elements.length - number, 1));
| + | |
| − | | + | |
| − | for(var i = 0; i < lastElements.length; i++){
| + | |
| − | sum = sum + lastElements[i];
| + | |
| − | }
| + | |
| − | | + | |
| − | return Math.ceil(sum/number);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Detecting mousewheel scrolling
| + | |
| − | *
| + | |
| − | * http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
| + | |
| − | * http://www.sitepoint.com/html5-javascript-mouse-wheel/
| + | |
| − | */
| + | |
| − | var prevTime = new Date().getTime();
| + | |
| − | | + | |
| − | function MouseWheelHandler(e) {
| + | |
| − | var curTime = new Date().getTime();
| + | |
| − | var isNormalScroll = $('.completely').hasClass(NORMAL_SCROLL);
| + | |
| − | | + | |
| − | //autoscrolling and not zooming?
| + | |
| − | if(options.autoScrolling && !controlPressed && !isNormalScroll){
| + | |
| − | // cross-browser wheel delta
| + | |
| − | e = e || window.event;
| + | |
| − | var value = e.wheelDelta || -e.deltaY || -e.detail;
| + | |
| − | var delta = Math.max(-1, Math.min(1, value));
| + | |
| − | | + | |
| − | var horizontalDetection = typeof e.wheelDeltaX !== 'undefined' || typeof e.deltaX !== 'undefined';
| + | |
| − | var isScrollingVertically = (Math.abs(e.wheelDeltaX) < Math.abs(e.wheelDelta)) || (Math.abs(e.deltaX ) < Math.abs(e.deltaY) || !horizontalDetection);
| + | |
| − | | + | |
| − | //Limiting the array to 150 (lets not waste memory!)
| + | |
| − | if(scrollings.length > 149){
| + | |
| − | scrollings.shift();
| + | |
| − | }
| + | |
| − | | + | |
| − | //keeping record of the previous scrollings
| + | |
| − | scrollings.push(Math.abs(value));
| + | |
| − | | + | |
| − | //preventing to scroll the site on mouse wheel when scrollbar is present
| + | |
| − | if(options.scrollBar){
| + | |
| − | e.preventDefault ? e.preventDefault() : e.returnValue = false;
| + | |
| − | }
| + | |
| − | | + | |
| − | var activeSection = $(SECTION_ACTIVE_SEL);
| + | |
| − | var scrollable = options.scrollOverflowHandler.scrollable(activeSection);
| + | |
| − | | + | |
| − | //time difference between the last scroll and the current one
| + | |
| − | var timeDiff = curTime-prevTime;
| + | |
| − | prevTime = curTime;
| + | |
| − | | + | |
| − | //haven't they scrolled in a while?
| + | |
| − | //(enough to be consider a different scrolling action to scroll another section)
| + | |
| − | if(timeDiff > 200){
| + | |
| − | //emptying the array, we dont care about old scrollings for our averages
| + | |
| − | scrollings = [];
| + | |
| − | }
| + | |
| − | | + | |
| − | if(canScroll){
| + | |
| − | var averageEnd = getAverage(scrollings, 10);
| + | |
| − | var averageMiddle = getAverage(scrollings, 70);
| + | |
| − | var isAccelerating = averageEnd >= averageMiddle;
| + | |
| − | | + | |
| − | //to avoid double swipes...
| + | |
| − | if(isAccelerating && isScrollingVertically){
| + | |
| − | //scrolling down?
| + | |
| − | if (delta < 0) {
| + | |
| − | scrolling('down', scrollable);
| + | |
| − | | + | |
| − | //scrolling up?
| + | |
| − | }else {
| + | |
| − | scrolling('up', scrollable);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | return false;
| + | |
| − | }
| + | |
| − | | + | |
| − | if(options.fitToSection){
| + | |
| − | //stopping the auto scroll to adjust to a section
| + | |
| − | $htmlBody.stop();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Slides a slider to the given direction.
| + | |
| − | * Optional `section` param.
| + | |
| − | */
| + | |
| − | function moveSlide(direction, section){
| + | |
| − | var activeSection = typeof section === 'undefined' ? $(SECTION_ACTIVE_SEL) : section;
| + | |
| − | var slides = activeSection.find(SLIDES_WRAPPER_SEL);
| + | |
| − | var numSlides = slides.find(SLIDE_SEL).length;
| + | |
| − | | + | |
| − | // more than one slide needed and nothing should be sliding
| + | |
| − | if (!slides.length || slideMoving || numSlides < 2) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | var currentSlide = slides.find(SLIDE_ACTIVE_SEL);
| + | |
| − | var destiny = null;
| + | |
| − | | + | |
| − | if(direction === 'prev'){
| + | |
| − | destiny = currentSlide.prev(SLIDE_SEL);
| + | |
| − | }else{
| + | |
| − | destiny = currentSlide.next(SLIDE_SEL);
| + | |
| − | }
| + | |
| − | | + | |
| − | //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(){
| + | |
| − | $(SLIDE_ACTIVE_SEL).each(function(){
| + | |
| − | silentLandscapeScroll($(this), 'internal');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | //IE < 10 pollify for requestAnimationFrame
| + | |
| − | window.requestAnimFrame = function(){
| + | |
| − | return window.requestAnimationFrame ||
| + | |
| − | window.webkitRequestAnimationFrame ||
| + | |
| − | window.mozRequestAnimationFrame ||
| + | |
| − | window.oRequestAnimationFrame ||
| + | |
| − | window.msRequestAnimationFrame ||
| + | |
| − | function(callback){ callback() }
| + | |
| − | }();
| + | |
| − | | + | |
| − | var previousDestTop = 0;
| + | |
| − | /**
| + | |
| − | * Returns the destination Y position based on the scrolling direction and
| + | |
| − | * the height of the section.
| + | |
| − | */
| + | |
| − | function getDestinationPosition(dest, element){
| + | |
| − | //top of the desination will be at the top of the viewport
| + | |
| − | var position = dest.top;
| + | |
| − | | + | |
| − | //scrolling down ? The bottom of the destination will be at the bottom of the viewport
| + | |
| − | if( dest.top > previousDestTop){
| + | |
| − | position = position - windowsHeight + element.outerHeight();
| + | |
| − | }
| + | |
| − | | + | |
| − | /*
| + | |
| − | Keeping record of the last scrolled position to determine the scrolling direction.
| + | |
| − | No conventional methods can be used as the scroll bar might not be present
| + | |
| − | AND the section might not be active if it is auto-height and didnt reach the middle
| + | |
| − | of the viewport.
| + | |
| − | */
| + | |
| − | previousDestTop = position;
| + | |
| − | return position;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Scrolls the site to the given element and scrolls to the slide if a callback is given.
| + | |
| − | */
| + | |
| − | function scrollPage(element, callback, isMovementUp){
| + | |
| − | //requestAnimFrame is used in order to prevent a Chrome 44 bug (http://stackoverflow.com/a/31961816/1081396)
| + | |
| − | requestAnimFrame(function(){
| + | |
| − | var dest = element.position();
| + | |
| − | if(typeof dest === 'undefined'){ return; } //there's no element to scroll, leaving the function
| + | |
| − | | + | |
| − | var dtop = getDestinationPosition(dest, element);
| + | |
| − | | + | |
| − | //local variables
| + | |
| − | var v = {
| + | |
| − | element: element,
| + | |
| − | callback: callback,
| + | |
| − | isMovementUp: isMovementUp,
| + | |
| − | dest: dest,
| + | |
| − | dtop: dtop,
| + | |
| − | yMovement: getYmovement(element),
| + | |
| − | anchorLink: element.data('anchor'),
| + | |
| − | sectionIndex: element.index(SECTION_SEL),
| + | |
| − | activeSlide: element.find(SLIDE_ACTIVE_SEL),
| + | |
| − | activeSection: $(SECTION_ACTIVE_SEL),
| + | |
| − | leavingSection: $(SECTION_ACTIVE_SEL).index(SECTION_SEL) + 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 && !element.hasClass(AUTO_HEIGHT) )){ 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);
| + | |
| − | }
| + | |
| − | | + | |
| − | //callback (onLeave) if the site is not just resizing and readjusting the slides
| + | |
| − | if($.isFunction(options.onLeave) && !v.localIsResizing){
| + | |
| − | if(options.onLeave.call(v.activeSection, v.leavingSection, (v.sectionIndex + 1), v.yMovement) === false){
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | stopMedia(v.activeSection);
| + | |
| − | | + | |
| − | element.addClass(ACTIVE).siblings().removeClass(ACTIVE);
| + | |
| − | lazyLoad(element);
| + | |
| − | | + | |
| − | //preventing from activating the MouseWheelHandler event
| + | |
| − | //more than once if the page is scrolling
| + | |
| − | canScroll = false;
| + | |
| − | | + | |
| − | setState(slideIndex, slideAnchorLink, v.anchorLink, v.sectionIndex);
| + | |
| − | | + | |
| − | 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)
| + | |
| − | 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) {
| + | |
| − | var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
| + | |
| − | transformContainer(translate3d, true);
| + | |
| − | | + | |
| − | //even when the scrollingSpeed is 0 there's a little delay, which might cause the
| + | |
| − | //scrollingSpeed to change in case of using silentMoveTo();
| + | |
| − | if(options.scrollingSpeed){
| + | |
| − | afterSectionLoadsId = setTimeout(function () {
| + | |
| − | afterSectionLoads(v);
| + | |
| − | }, options.scrollingSpeed);
| + | |
| − | }else{
| + | |
| − | afterSectionLoads(v);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | // 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`
| + | |
| − | if(options.scrollBar){
| + | |
| − | | + | |
| − | /* Hack!
| + | |
| − | The timeout prevents setting the most dominant section in the viewport as "active" when the user
| + | |
| − | scrolled to a smaller section by using the mousewheel (auto scrolling) rather than draging the scroll bar.
| + | |
| − | | + | |
| − | When using scrollBar:true It seems like the scroll events still getting propagated even after the scrolling animation has finished.
| + | |
| − | */
| + | |
| − | setTimeout(function(){
| + | |
| − | afterSectionLoads(v);
| + | |
| − | },30);
| + | |
| − | }else{
| + | |
| − | 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 = WRAPPER_SEL;
| + | |
| − | }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
| + | |
| − | $(SECTION_ACTIVE_SEL).after(v.activeSection.prevAll(SECTION_SEL).get().reverse());
| + | |
| − | }
| + | |
| − | else { // Scrolling up
| + | |
| − | // Move all next sections to before the active section
| + | |
| − | $(SECTION_ACTIVE_SEL).before(v.activeSection.nextAll(SECTION_SEL));
| + | |
| − | }
| + | |
| − | | + | |
| − | // Maintain the displayed position (now that we changed the element order)
| + | |
| − | silentScroll($(SECTION_ACTIVE_SEL).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) {
| + | |
| − | $(SECTION_FIRST_SEL).before(v.wrapAroundElements);
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $(SECTION_LAST_SEL).after(v.wrapAroundElements);
| + | |
| − | }
| + | |
| − | | + | |
| − | silentScroll($(SECTION_ACTIVE_SEL).position().top);
| + | |
| − | | + | |
| − | // Maintain the active slides visible in the viewport
| + | |
| − | keepSlidesPosition();
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /**
| + | |
| − | * Actions to do once the section is loaded.
| + | |
| − | */
| + | |
| − | function afterSectionLoads (v){
| + | |
| − | continuousVerticalFixSectionOrder(v);
| + | |
| − | | + | |
| − | v.element.find('.fp-scrollable').mouseover();
| + | |
| − | | + | |
| − | //callback (afterLoad) if the site is not just resizing and readjusting the slides
| + | |
| − | $.isFunction(options.afterLoad) && !v.localIsResizing && options.afterLoad.call(v.element, v.anchorLink, (v.sectionIndex + 1));
| + | |
| − | | + | |
| − | playMedia(v.element);
| + | |
| − | v.element.addClass('completely').siblings().removeClass('completely');
| + | |
| − | | + | |
| − | canScroll = true;
| + | |
| − | | + | |
| − | $.isFunction(v.callback) && v.callback.call(this);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Lazy loads image, video and audio elements.
| + | |
| − | */
| + | |
| − | function lazyLoad(destiny){
| + | |
| − | var destiny = getSlideOrSection(destiny);
| + | |
| − | | + | |
| − | destiny.find('img[data-src], source[data-src], audio[data-src]').each(function(){
| + | |
| − | $(this).attr('src', $(this).data('src'));
| + | |
| − | $(this).removeAttr('data-src');
| + | |
| − | | + | |
| − | if($(this).is('source')){
| + | |
| − | $(this).closest('video').get(0).load();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Plays video and audio elements.
| + | |
| − | */
| + | |
| − | function playMedia(destiny){
| + | |
| − | var destiny = getSlideOrSection(destiny);
| + | |
| − | | + | |
| − | //playing HTML5 media elements
| + | |
| − | destiny.find('video, audio').each(function(){
| + | |
| − | var element = $(this).get(0);
| + | |
| − | | + | |
| − | if( element.hasAttribute('autoplay') && typeof element.play === 'function' ) {
| + | |
| − | element.play();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Stops video and audio elements.
| + | |
| − | */
| + | |
| − | function stopMedia(destiny){
| + | |
| − | var destiny = getSlideOrSection(destiny);
| + | |
| − | | + | |
| − | //stopping HTML5 media elements
| + | |
| − | destiny.find('video, audio').each(function(){
| + | |
| − | var element = $(this).get(0);
| + | |
| − | | + | |
| − | if( !element.hasAttribute('data-ignore') && typeof element.pause === 'function' ) {
| + | |
| − | element.pause();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets the active slide (or section) for the given section
| + | |
| − | */
| + | |
| − | function getSlideOrSection(destiny){
| + | |
| − | var slide = destiny.find(SLIDE_ACTIVE_SEL);
| + | |
| − | if( slide.length ) {
| + | |
| − | destiny = $(slide);
| + | |
| − | }
| + | |
| − | | + | |
| − | return destiny;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 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 #
| + | |
| − | if(options.animateAnchor){
| + | |
| − | scrollPageAndSlide(section, slide);
| + | |
| − | }else{
| + | |
| − | FP.silentMoveTo(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)
| + | |
| − | */
| + | |
| − | function hashChangeHandler(){
| + | |
| − | if(!isScrolling && !options.lockAnchors){
| + | |
| − | var value = window.location.hash.replace('#', '').split('/');
| + | |
| − | var section = value[0];
| + | |
| − | var slide = value[1];
| + | |
| − | | + | |
| − | //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);
| + | |
| − | | + | |
| − | | + | |
| − | if(section.length){
| + | |
| − | /*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
| + | |
| − | function keydownHandler(e) {
| + | |
| − | | + | |
| − | clearTimeout(keydownId);
| + | |
| − | | + | |
| − | var activeElement = $(':focus');
| + | |
| − | | + | |
| − | if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
| + | |
| − | options.keyboardScrolling && options.autoScrolling){
| + | |
| − | var keyCode = e.which;
| + | |
| − | | + | |
| − | //preventing the scroll with arrow keys & spacebar & Page Up & Down keys
| + | |
| − | var keyControls = [40, 38, 32, 33, 34];
| + | |
| − | if($.inArray(keyCode, keyControls) > -1){
| + | |
| − | e.preventDefault();
| + | |
| − | }
| + | |
| − | | + | |
| − | controlPressed = e.ctrlKey;
| + | |
| − | | + | |
| − | keydownId = setTimeout(function(){
| + | |
| − | onkeydown(e);
| + | |
| − | },150);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | function tooltipTextHandler(){
| + | |
| − | $(this).prev().trigger('click');
| + | |
| − | }
| + | |
| − | | + | |
| − | //to prevent scrolling while zooming
| + | |
| − | function keyUpHandler(e){
| + | |
| − | if(isWindowFocused){ //the keyup gets fired on new tab ctrl + t in Firefox
| + | |
| − | controlPressed = e.ctrlKey;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //binding the mousemove when the mouse's middle button is released
| + | |
| − | function mouseDownHandler(e){
| + | |
| − | //middle button
| + | |
| − | if (e.which == 2){
| + | |
| − | oldPageY = e.pageY;
| + | |
| − | container.on('mousemove', mouseMoveHandler);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //unbinding the mousemove when the mouse's middle button is released
| + | |
| − | function mouseUpHandler(e){
| + | |
| − | //middle button
| + | |
| − | if (e.which == 2){
| + | |
| − | container.off('mousemove');
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //Scrolling horizontally when clicking on the slider controls.
| + | |
| − | function slideArrowHandler(){
| + | |
| − | var section = $(this).closest(SECTION_SEL);
| + | |
| − | | + | |
| − | if ($(this).hasClass(SLIDES_PREV)) {
| + | |
| − | if(isScrollAllowed.m.left){
| + | |
| − | FP.moveSlideLeft(section);
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | if(isScrollAllowed.m.right){
| + | |
| − | FP.moveSlideRight(section);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //when opening a new tab (ctrl + t), `control` won't be pressed when comming back.
| + | |
| − | function blurHandler(){
| + | |
| − | isWindowFocused = false;
| + | |
| − | controlPressed = false;
| + | |
| − | }
| + | |
| − | | + | |
| − | //Scrolls to the section when clicking the navigation bullet
| + | |
| − | function sectionBulletHandler(e){
| + | |
| − | e.preventDefault();
| + | |
| − | var index = $(this).parent().index();
| + | |
| − | scrollPage($(SECTION_SEL).eq(index));
| + | |
| − | }
| + | |
| − | | + | |
| − | //Scrolls the slider to the given slide destination for the given section
| + | |
| − | function slideBulletHandler(e){
| + | |
| − | e.preventDefault();
| + | |
| − | var slides = $(this).closest(SECTION_SEL).find(SLIDES_WRAPPER_SEL);
| + | |
| − | var destiny = slides.find(SLIDE_SEL).eq($(this).closest('li').index());
| + | |
| − | | + | |
| − | landscapeScroll(slides, destiny);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Keydown event
| + | |
| − | */
| + | |
| − | function onkeydown(e){
| + | |
| − | var shiftPressed = e.shiftKey;
| + | |
| − | | + | |
| − | switch (e.which) {
| + | |
| − | //up
| + | |
| − | case 38:
| + | |
| − | case 33:
| + | |
| − | if(isScrollAllowed.k.up){
| + | |
| − | FP.moveSectionUp();
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | //down
| + | |
| − | case 32: //spacebar
| + | |
| − | if(shiftPressed && isScrollAllowed.k.up){
| + | |
| − | FP.moveSectionUp();
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | case 40:
| + | |
| − | case 34:
| + | |
| − | if(isScrollAllowed.k.down){
| + | |
| − | FP.moveSectionDown();
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | //Home
| + | |
| − | case 36:
| + | |
| − | if(isScrollAllowed.k.up){
| + | |
| − | FP.moveTo(1);
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | //End
| + | |
| − | case 35:
| + | |
| − | if(isScrollAllowed.k.down){
| + | |
| − | FP.moveTo( $(SECTION_SEL).length );
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | //left
| + | |
| − | case 37:
| + | |
| − | if(isScrollAllowed.k.left){
| + | |
| − | FP.moveSlideLeft();
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | //right
| + | |
| − | case 39:
| + | |
| − | if(isScrollAllowed.k.right){
| + | |
| − | FP.moveSlideRight();
| + | |
| − | }
| + | |
| − | break;
| + | |
| − | | + | |
| − | default:
| + | |
| − | return; // exit this handler for other keys
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Detecting the direction of the mouse movement.
| + | |
| − | * Used only for the middle button of the mouse.
| + | |
| − | */
| + | |
| − | var oldPageY = 0;
| + | |
| − | function mouseMoveHandler(e){
| + | |
| − | // moving up
| + | |
| − | if(canScroll){
| + | |
| − | if (e.pageY < oldPageY){
| + | |
| − | FP.moveSectionUp();
| + | |
| − | | + | |
| − | // moving downw
| + | |
| − | }else if(e.pageY > oldPageY){
| + | |
| − | FP.moveSectionDown();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | oldPageY = e.pageY;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Scrolls horizontal sliders.
| + | |
| − | */
| + | |
| − | function landscapeScroll(slides, destiny){
| + | |
| − | var destinyPos = destiny.position();
| + | |
| − | var slideIndex = destiny.index();
| + | |
| − | var section = slides.closest(SECTION_SEL);
| + | |
| − | var sectionIndex = section.index(SECTION_SEL);
| + | |
| − | var anchorLink = section.data('anchor');
| + | |
| − | var slidesNav = section.find(SLIDES_NAV_SEL);
| + | |
| − | var slideAnchor = getAnchor(destiny);
| + | |
| − | var prevSlide = section.find(SLIDE_ACTIVE_SEL);
| + | |
| − | | + | |
| − | //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 = prevSlide.index();
| + | |
| − | var xMovement = getXmovement(prevSlideIndex, slideIndex);
| + | |
| − | | + | |
| − | //if the site is not just resizing and readjusting the slides
| + | |
| − | if(!localIsResizing && xMovement!=='none'){
| + | |
| − | if($.isFunction( options.onSlideLeave )){
| + | |
| − | if(options.onSlideLeave.call( prevSlide, anchorLink, (sectionIndex + 1), prevSlideIndex, xMovement, slideIndex ) === false){
| + | |
| − | slideMoving = false;
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | stopMedia(prevSlide);
| + | |
| − | | + | |
| − | destiny.addClass(ACTIVE).siblings().removeClass(ACTIVE);
| + | |
| − | if(!localIsResizing){
| + | |
| − | lazyLoad(destiny);
| + | |
| − | }
| + | |
| − | | + | |
| − | if(!options.loopHorizontal && options.controlArrows){
| + | |
| − | //hidding it for the fist slide, showing for the rest
| + | |
| − | section.find(SLIDES_ARROW_PREV_SEL).toggle(slideIndex!==0);
| + | |
| − | | + | |
| − | //hidding it for the last slide, showing for the rest
| + | |
| − | section.find(SLIDES_ARROW_NEXT_SEL).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( destiny, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex);
| + | |
| − | }
| + | |
| − | playMedia(destiny);
| + | |
| − | | + | |
| − | //letting them slide again
| + | |
| − | slideMoving = false;
| + | |
| − | };
| + | |
| − | | + | |
| − | if(options.css3){
| + | |
| − | var translate3d = 'translate3d(-' + Math.round(destinyPos.left) + 'px, 0px, 0px)';
| + | |
| − | | + | |
| − | addAnimation(slides.find(SLIDES_CONTAINER_SEL), options.scrollingSpeed>0).css(getTransforms(translate3d));
| + | |
| − | | + | |
| − | afterSlideLoadsId = setTimeout(function(){
| + | |
| − | afterSlideLoads();
| + | |
| − | }, options.scrollingSpeed, options.easing);
| + | |
| − | }else{
| + | |
| − | slides.animate({
| + | |
| − | scrollLeft : Math.round(destinyPos.left)
| + | |
| − | }, options.scrollingSpeed, options.easing, function() {
| + | |
| − | | + | |
| − | afterSlideLoads();
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | slidesNav.find(ACTIVE_SEL).removeClass(ACTIVE);
| + | |
| − | slidesNav.find('li').eq(slideIndex).find('a').addClass(ACTIVE);
| + | |
| − | }
| + | |
| − | | + | |
| − | var previousHeight = windowsHeight;
| + | |
| − | | + | |
| − | //when resizing the site, we adjust the heights of the sections, slimScroll...
| + | |
| − | function resizeHandler(){
| + | |
| − | //checking if it needs to get responsive
| + | |
| − | responsive();
| + | |
| − | | + | |
| − | // rebuild immediately on touch devices
| + | |
| − | if (isTouchDevice) {
| + | |
| − | var activeElement = $(document.activeElement);
| + | |
| − | | + | |
| − | //if the keyboard is NOT visible
| + | |
| − | if (!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select')) {
| + | |
| − | 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) ){
| + | |
| − | FP.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(){
| + | |
| − | FP.reBuild(true);
| + | |
| − | }, 350);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 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(){
| + | |
| − | var widthLimit = options.responsive || options.responsiveWidth; //backwards compatiblity
| + | |
| − | var heightLimit = options.responsiveHeight;
| + | |
| − | | + | |
| − | //only calculating what we need. Remember its called on the resize event.
| + | |
| − | var isBreakingPointWidth = widthLimit && $window.outerWidth() < widthLimit;
| + | |
| − | var isBreakingPointHeight = heightLimit && $window.height() < heightLimit;
| + | |
| − | | + | |
| − | if(widthLimit && heightLimit){
| + | |
| − | FP.setResponsive(isBreakingPointWidth || isBreakingPointHeight);
| + | |
| − | }
| + | |
| − | else if(widthLimit){
| + | |
| − | FP.setResponsive(isBreakingPointWidth);
| + | |
| − | }
| + | |
| − | else if(heightLimit){
| + | |
| − | FP.setResponsive(isBreakingPointHeight);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Adds transition animations for the given element
| + | |
| − | */
| + | |
| − | function addAnimation(element){
| + | |
| − | var transition = 'all ' + options.scrollingSpeed + 'ms ' + options.easingcss3;
| + | |
| − | | + | |
| − | element.removeClass(NO_TRANSITION);
| + | |
| − | return element.css({
| + | |
| − | '-webkit-transition': transition,
| + | |
| − | 'transition': transition
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove transition animations for the given element
| + | |
| − | */
| + | |
| − | function removeAnimation(element){
| + | |
| − | return element.addClass(NO_TRANSITION);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 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){
| + | |
| − | $(SECTION_NAV_SEL).find(ACTIVE_SEL).removeClass(ACTIVE);
| + | |
| − | if(name){
| + | |
| − | $(SECTION_NAV_SEL).find('a[href="#' + name + '"]').addClass(ACTIVE);
| + | |
| − | }else{
| + | |
| − | $(SECTION_NAV_SEL).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_SEL).removeClass(ACTIVE);
| + | |
| − | $(options.menu).find('[data-menuanchor="'+name+'"]').addClass(ACTIVE);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets to active the current menu and vertical nav items.
| + | |
| − | */
| + | |
| − | function activateMenuAndNav(anchor, index){
| + | |
| − | activateMenuElement(anchor);
| + | |
| − | activateNavDots(anchor, index);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Retuns `up` or `down` depending on the scrolling movement to reach its destination
| + | |
| − | * from the current section.
| + | |
| − | */
| + | |
| − | function getYmovement(destiny){
| + | |
| − | var fromIndex = $(SECTION_ACTIVE_SEL).index(SECTION_SEL);
| + | |
| − | var toIndex = destiny.index(SECTION_SEL);
| + | |
| − | 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');
| + | |
| − | | + | |
| − | var scrollOverflowHandler = options.scrollOverflowHandler;
| + | |
| − | var wrap = scrollOverflowHandler.wrapContent();
| + | |
| − | //in case element is a slide
| + | |
| − | var section = element.closest(SECTION_SEL);
| + | |
| − | var scrollable = scrollOverflowHandler.scrollable(element);
| + | |
| − | var contentHeight;
| + | |
| − | | + | |
| − | //if there was scroll, the contentHeight will be the one in the scrollable section
| + | |
| − | if(scrollable.length){
| + | |
| − | contentHeight = scrollOverflowHandler.scrollHeight(element);
| + | |
| − | }else{
| + | |
| − | contentHeight = element.get(0).scrollHeight;
| + | |
| − | if(options.verticalCentered){
| + | |
| − | contentHeight = element.find(TABLE_CELL_SEL).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){
| + | |
| − | scrollOverflowHandler.update(element, scrollHeight);
| + | |
| − | }
| + | |
| − | //creating the scrolling
| + | |
| − | else{
| + | |
| − | if(options.verticalCentered){
| + | |
| − | element.find(TABLE_CELL_SEL).wrapInner(wrap);
| + | |
| − | }else{
| + | |
| − | element.wrapInner(wrap);
| + | |
| − | }
| + | |
| − | scrollOverflowHandler.create(element, scrollHeight);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | //removing the scrolling when it is not necessary anymore
| + | |
| − | else{
| + | |
| − | scrollOverflowHandler.remove(element);
| + | |
| − | }
| + | |
| − | | + | |
| − | //undo
| + | |
| − | element.css('overflow', '');
| + | |
| − | }
| + | |
| − | | + | |
| − | function addTableClass(element){
| + | |
| − | element.addClass(TABLE).wrapInner('<div class="' + TABLE_CELL + '" style="height:' + getTableHeight(element) + 'px;" />');
| + | |
| − | }
| + | |
| − | | + | |
| − | function getTableHeight(element){
| + | |
| − | var sectionHeight = windowsHeight;
| + | |
| − | | + | |
| − | if(options.paddingTop || options.paddingBottom){
| + | |
| − | var section = element;
| + | |
| − | if(!section.hasClass(SECTION)){
| + | |
| − | section = element.closest(SECTION_SEL);
| + | |
| − | }
| + | |
| − | | + | |
| − | 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(NO_TRANSITION);
| + | |
| − | },10);
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets a section by its anchor / index
| + | |
| − | */
| + | |
| − | function getSectionByAnchor(sectionAnchor){
| + | |
| − | //section
| + | |
| − | var section = container.find(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
| + | |
| − | if(!section.length){
| + | |
| − | section = $(SECTION_SEL).eq( (sectionAnchor -1) );
| + | |
| − | }
| + | |
| − | | + | |
| − | return section;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets a slide inside a given section by its anchor / index
| + | |
| − | */
| + | |
| − | function getSlideByAnchor(slideAnchor, section){
| + | |
| − | var slides = section.find(SLIDES_WRAPPER_SEL);
| + | |
| − | var slide = slides.find(SLIDE_SEL + '[data-anchor="'+slideAnchor+'"]');
| + | |
| − | | + | |
| − | if(!slide.length){
| + | |
| − | slide = slides.find(SLIDE_SEL).eq(slideAnchor);
| + | |
| − | }
| + | |
| − | | + | |
| − | return slide;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Scrolls to the given section and slide anchors
| + | |
| − | */
| + | |
| − | function scrollPageAndSlide(destiny, slide){
| + | |
| − | var section = getSectionByAnchor(destiny);
| + | |
| − | | + | |
| − | //default slide
| + | |
| − | if (typeof slide === 'undefined') {
| + | |
| − | slide = 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | //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, slideAnchor){
| + | |
| − | if(typeof slideAnchor !== 'undefined'){
| + | |
| − | var slides = section.find(SLIDES_WRAPPER_SEL);
| + | |
| − | var destiny = getSlideByAnchor(slideAnchor, section);
| + | |
| − | | + | |
| − | if(destiny.length){
| + | |
| − | landscapeScroll(slides, destiny);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Creates a landscape navigation bar with dots for horizontal sliders.
| + | |
| − | */
| + | |
| − | function addSlidesNavigation(section, numSlides){
| + | |
| − | section.append('<div class="' + SLIDES_NAV + '"><ul></ul></div>');
| + | |
| − | var nav = section.find(SLIDES_NAV_SEL);
| + | |
| − | | + | |
| − | //top or bottom
| + | |
| − | nav.addClass(options.slidesNavPosition);
| + | |
| − | | + | |
| − | for(var i=0; i< numSlides; i++){
| + | |
| − | nav.find('ul').append('<li><a href="#"><span></span></a></li>');
| + | |
| − | }
| + | |
| − | | + | |
| − | //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 && !options.lockAnchors){
| + | |
| − | | + | |
| − | //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();
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 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){
| + | |
| − | window.history.replaceState(undefined, undefined, '#' + url);
| + | |
| − | }else{
| + | |
| − | var baseUrl = window.location.href.split('#')[0];
| + | |
| − | window.location.replace( baseUrl + '#' + url );
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Gets the anchor for the given slide / section. Its index will be used if there's none.
| + | |
| − | */
| + | |
| − | function getAnchor(element){
| + | |
| − | var anchor = element.data('anchor');
| + | |
| − | var index = element.index();
| + | |
| − | | + | |
| − | //Slide without anchor link? We take the index instead.
| + | |
| − | if(typeof anchor === 'undefined'){
| + | |
| − | anchor = index;
| + | |
| − | }
| + | |
| − | | + | |
| − | return anchor;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Sets a class for the body of the page depending on the active section / slide
| + | |
| − | */
| + | |
| − | function setBodyClass(){
| + | |
| − | var section = $(SECTION_ACTIVE_SEL);
| + | |
| − | var slide = section.find(SLIDE_ACTIVE_SEL);
| + | |
| − | | + | |
| − | var sectionAnchor = getAnchor(section);
| + | |
| − | var slideAnchor = getAnchor(slide);
| + | |
| − | | + | |
| − | var sectionIndex = section.index(SECTION_SEL);
| + | |
| − | | + | |
| − | var text = String(sectionAnchor);
| + | |
| − | | + | |
| − | if(slide.length){
| + | |
| − | text = text + '-' + slideAnchor;
| + | |
| − | }
| + | |
| − | | + | |
| − | //changing slash for dash to make it a valid CSS style
| + | |
| − | text = text.replace('/', '-').replace('#','');
| + | |
| − | | + | |
| − | //removing previous anchor classes
| + | |
| − | var classRe = new RegExp('\\b\\s?' + VIEWING_PREFIX + '-[^\\s]+\\b', "g");
| + | |
| − | $body[0].className = $body[0].className.replace(classRe, '');
| + | |
| − | | + | |
| − | //adding the current anchor
| + | |
| − | $body.addClass(VIEWING_PREFIX + '-' + 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
| + | |
| − | document.removeEventListener('MozMousePixelScroll', MouseWheelHandler, false); //old 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
| + | |
| − | * https://developer.mozilla.org/en-US/docs/Web/Events/wheel
| + | |
| − | */
| + | |
| − | function addMouseWheelHandler(){
| + | |
| − | var prefix = '';
| + | |
| − | var _addEventListener;
| + | |
| − | | + | |
| − | if (window.addEventListener){
| + | |
| − | _addEventListener = "addEventListener";
| + | |
| − | }else{
| + | |
| − | _addEventListener = "attachEvent";
| + | |
| − | prefix = 'on';
| + | |
| − | }
| + | |
| − | | + | |
| − | // detect available wheel event
| + | |
| − | var support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
| + | |
| − | document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
| + | |
| − | 'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
| + | |
| − | | + | |
| − | | + | |
| − | if(support == 'DOMMouseScroll'){
| + | |
| − | document[ _addEventListener ](prefix + 'MozMousePixelScroll', MouseWheelHandler, false);
| + | |
| − | }
| + | |
| − | | + | |
| − | //handle MozMousePixelScroll in older Firefox
| + | |
| − | else{
| + | |
| − | document[ _addEventListener ](prefix + support, MouseWheelHandler, false);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Adds the possibility to auto scroll through sections on touch devices.
| + | |
| − | */
| + | |
| − | function addTouchHandler(){
| + | |
| − | if(isTouchDevice || isTouch){
| + | |
| − | //Microsoft pointers
| + | |
| − | var MSPointer = getMSPointer();
| + | |
| − | | + | |
| − | $(WRAPPER_SEL).off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
| + | |
| − | $(WRAPPER_SEL).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Removes the auto scrolling for touch devices.
| + | |
| − | */
| + | |
| − | function removeTouchHandler(){
| + | |
| − | if(isTouchDevice || isTouch){
| + | |
| − | //Microsoft pointers
| + | |
| − | var MSPointer = getMSPointer();
| + | |
| − | | + | |
| − | $(WRAPPER_SEL).off('touchstart ' + MSPointer.down);
| + | |
| − | $(WRAPPER_SEL).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 = [];
| + | |
| − | | + | |
| − | 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);
| + | |
| − | | + | |
| − | //in touch devices with scrollBar:true, e.pageY is detected, but we have to deal with touch events. #1008
| + | |
| − | if(isTouch && isReallyTouch(e) && options.scrollBar){
| + | |
| − | events.y = e.touches[0].pageY;
| + | |
| − | events.x = e.touches[0].pageX;
| + | |
| − | }
| + | |
| − | | + | |
| − | return events;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Slides silently (with no animation) the active slider to the given slide.
| + | |
| − | */
| + | |
| − | function silentLandscapeScroll(activeSlide, noCallbacks){
| + | |
| − | FP.setScrollingSpeed (0, 'internal');
| + | |
| − | | + | |
| − | if(typeof noCallbacks !== 'undefined'){
| + | |
| − | //preventing firing callbacks afterSlideLoad etc.
| + | |
| − | isResizing = true;
| + | |
| − | }
| + | |
| − | | + | |
| − | landscapeScroll(activeSlide.closest(SLIDES_WRAPPER_SEL), activeSlide);
| + | |
| − | | + | |
| − | if(typeof noCallbacks !== 'undefined'){
| + | |
| − | isResizing = false;
| + | |
| − | }
| + | |
| − | | + | |
| − | FP.setScrollingSpeed(originals.scrollingSpeed, 'internal');
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Scrolls silently (with no animation) the page to the given Y position.
| + | |
| − | */
| + | |
| − | 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);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Returns the cross-browser transform string.
| + | |
| − | */
| + | |
| − | function getTransforms(translate3d){
| + | |
| − | return {
| + | |
| − | '-webkit-transform': translate3d,
| + | |
| − | '-moz-transform': translate3d,
| + | |
| − | '-ms-transform':translate3d,
| + | |
| − | 'transform': translate3d
| + | |
| − | };
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Allowing or disallowing the mouse/swipe scroll in a given direction. (not for keyboard)
| + | |
| − | * @type m (mouse) or k (keyboard)
| + | |
| − | */
| + | |
| − | function setIsScrollAllowed(value, direction, type){
| + | |
| − | switch (direction){
| + | |
| − | case 'up': isScrollAllowed[type].up = value; break;
| + | |
| − | case 'down': isScrollAllowed[type].down = value; break;
| + | |
| − | case 'left': isScrollAllowed[type].left = value; break;
| + | |
| − | case 'right': isScrollAllowed[type].right = value; break;
| + | |
| − | case 'all':
| + | |
| − | if(type == 'm'){
| + | |
| − | FP.setAllowScrolling(value);
| + | |
| − | }else{
| + | |
| − | FP.setKeyboardScrolling(value);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /*
| + | |
| − | * Destroys fullpage.js plugin events and optinally its html markup and styles
| + | |
| − | */
| + | |
| − | FP.destroy = function(all){
| + | |
| − | FP.setAutoScrolling(false, 'internal');
| + | |
| − | FP.setAllowScrolling(false);
| + | |
| − | FP.setKeyboardScrolling(false);
| + | |
| − | container.addClass(DESTROYED);
| + | |
| − | | + | |
| − | clearTimeout(afterSlideLoadsId);
| + | |
| − | clearTimeout(afterSectionLoadsId);
| + | |
| − | clearTimeout(resizeId);
| + | |
| − | clearTimeout(scrollId);
| + | |
| − | clearTimeout(scrollId2);
| + | |
| − | | + | |
| − | $window
| + | |
| − | .off('scroll', scrollHandler)
| + | |
| − | .off('hashchange', hashChangeHandler)
| + | |
| − | .off('resize', resizeHandler);
| + | |
| − | | + | |
| − | $document
| + | |
| − | .off('click', SECTION_NAV_SEL + ' a')
| + | |
| − | .off('mouseenter', SECTION_NAV_SEL + ' li')
| + | |
| − | .off('mouseleave', SECTION_NAV_SEL + ' li')
| + | |
| − | .off('click', SLIDES_NAV_LINK_SEL)
| + | |
| − | .off('mouseover', options.normalScrollElements)
| + | |
| − | .off('mouseout', options.normalScrollElements);
| + | |
| − | | + | |
| − | $(SECTION_SEL)
| + | |
| − | .off('click', SLIDES_ARROW_SEL);
| + | |
| − | | + | |
| − | clearTimeout(afterSlideLoadsId);
| + | |
| − | clearTimeout(afterSectionLoadsId);
| + | |
| − | | + | |
| − | //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);
| + | |
| − | | + | |
| − | $(SECTION_NAV_SEL + ', ' + SLIDES_NAV_SEL + ', ' + SLIDES_ARROW_SEL).remove();
| + | |
| − | | + | |
| − | //removing inline styles
| + | |
| − | $(SECTION_SEL).css( {
| + | |
| − | 'height': '',
| + | |
| − | 'background-color' : '',
| + | |
| − | 'padding': ''
| + | |
| − | });
| + | |
| − | | + | |
| − | $(SLIDE_SEL).css( {
| + | |
| − | 'width': ''
| + | |
| − | });
| + | |
| − | | + | |
| − | container.css({
| + | |
| − | 'height': '',
| + | |
| − | 'position': '',
| + | |
| − | '-ms-touch-action': '',
| + | |
| − | 'touch-action': ''
| + | |
| − | });
| + | |
| − | | + | |
| − | $htmlBody.css({
| + | |
| − | 'overflow': '',
| + | |
| − | 'height': ''
| + | |
| − | });
| + | |
| − | | + | |
| − | // remove .fp-enabled class
| + | |
| − | $('html').removeClass(ENABLED);
| + | |
| − | | + | |
| − | // remove all of the .fp-viewing- classes
| + | |
| − | $.each($body.get(0).className.split(/\s+/), function (index, className) {
| + | |
| − | if (className.indexOf(VIEWING_PREFIX) === 0) {
| + | |
| − | $body.removeClass(className);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | //removing added classes
| + | |
| − | $(SECTION_SEL + ', ' + SLIDE_SEL).each(function(){
| + | |
| − | options.scrollOverflowHandler.remove($(this));
| + | |
| − | $(this).removeClass(TABLE + ' ' + ACTIVE);
| + | |
| − | });
| + | |
| − | | + | |
| − | removeAnimation(container);
| + | |
| − | | + | |
| − | //Unwrapping content
| + | |
| − | container.find(TABLE_CELL_SEL + ', ' + SLIDES_CONTAINER_SEL + ', ' + SLIDES_WRAPPER_SEL).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
| + | |
| − | $htmlBody.scrollTop(0);
| + | |
| − | | + | |
| − | //removing selectors
| + | |
| − | var usedSelectors = [SECTION, SLIDE, SLIDES_CONTAINER];
| + | |
| − | $.each(usedSelectors, function(index, value){
| + | |
| − | $('.' + value).removeClass(value);
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /*
| + | |
| − | * 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.scrollBar && options.scrollOverflow){
| + | |
| − | showError('warn', 'Option `scrollBar` is mutually exclusive with `scrollOverflow`. Sections with scrollOverflow might not work well in Firefox');
| + | |
| − | }
| + | |
| − | | + | |
| − | 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).');
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Shows a message in the console of the given type.
| + | |
| − | */
| + | |
| − | function showError(type, text){
| + | |
| − | console && console[type] && console[type]('fullPage: ' + text);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * An object to handle overflow scrolling.
| + | |
| − | * This uses jquery.slimScroll to accomplish overflow scrolling.
| + | |
| − | * It is possible to pass in an alternate scrollOverflowHandler
| + | |
| − | * to the fullpage.js option that implements the same functions
| + | |
| − | * as this handler.
| + | |
| − | *
| + | |
| − | * @type {Object}
| + | |
| − | */
| + | |
| − | var slimScrollHandler = {
| + | |
| − | /**
| + | |
| − | * Optional function called after each render.
| + | |
| − | *
| + | |
| − | * Solves a bug with slimScroll vendor library #1037, #553
| + | |
| − | *
| + | |
| − | * @param {object} section jQuery object containing rendered section
| + | |
| − | */
| + | |
| − | afterRender: function(section){
| + | |
| − | var slides = section.find(SLIDES_WRAPPER);
| + | |
| − | var scrollableWrap = section.find(SCROLLABLE_SEL);
| + | |
| − | | + | |
| − | if(slides.length){
| + | |
| − | scrollableWrap = slides.find(SLIDE_ACTIVE_SEL);
| + | |
| − | }
| + | |
| − | | + | |
| − | scrollableWrap.mouseover();
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Called when overflow scrolling is needed for a section.
| + | |
| − | *
| + | |
| − | * @param {Object} element jQuery object containing current section
| + | |
| − | * @param {Number} scrollHeight Current window height in pixels
| + | |
| − | */
| + | |
| − | create: function(element, scrollHeight){
| + | |
| − | element.find(SCROLLABLE_SEL).slimScroll({
| + | |
| − | allowPageScroll: true,
| + | |
| − | height: scrollHeight + 'px',
| + | |
| − | size: '10px',
| + | |
| − | alwaysVisible: true
| + | |
| − | });
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Return a boolean depending on whether the scrollable element is a
| + | |
| − | * the end or at the start of the scrolling depending on the given type.
| + | |
| − | *
| + | |
| − | * @param {String} type Either 'top' or 'bottom'
| + | |
| − | * @param {Object} scrollable jQuery object for the scrollable element
| + | |
| − | * @return {Boolean}
| + | |
| − | */
| + | |
| − | isScrolled: function(type, scrollable){
| + | |
| − | if(type === 'top'){
| + | |
| − | return !scrollable.scrollTop();
| + | |
| − | }else if(type === 'bottom'){
| + | |
| − | return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight;
| + | |
| − | }
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Returns the scrollable element for the given section.
| + | |
| − | * If there are landscape slides, will only return a scrollable element
| + | |
| − | * if it is in the active slide.
| + | |
| − | *
| + | |
| − | * @param {Object} activeSection jQuery object containing current section
| + | |
| − | * @return {Boolean}
| + | |
| − | */
| + | |
| − | scrollable: function(activeSection){
| + | |
| − | // if there are landscape slides, we check if the scrolling bar is in the current one or not
| + | |
| − | if(activeSection.find(SLIDES_WRAPPER_SEL).length){
| + | |
| − | return activeSection.find(SLIDE_ACTIVE_SEL).find(SCROLLABLE_SEL);
| + | |
| − | }
| + | |
| − | return activeSection.find(SCROLLABLE_SEL);
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Returns the scroll height of the wrapped content.
| + | |
| − | * If this is larger than the window height minus section padding,
| + | |
| − | * overflow scrolling is needed.
| + | |
| − | *
| + | |
| − | * @param {Object} element jQuery object containing current section
| + | |
| − | * @return {Number}
| + | |
| − | */
| + | |
| − | scrollHeight: function(element){
| + | |
| − | return element.find(SCROLLABLE_SEL).get(0).scrollHeight;
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Called when overflow scrolling is no longer needed for a section.
| + | |
| − | *
| + | |
| − | * @param {Object} element jQuery object containing current section
| + | |
| − | */
| + | |
| − | remove: function(element){
| + | |
| − | element.find(SCROLLABLE_SEL).children().first().unwrap().unwrap();
| + | |
| − | element.find(SLIMSCROLL_BAR_SEL).remove();
| + | |
| − | element.find(SLIMSCROLL_RAIL_SEL).remove();
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Called when overflow scrolling has already been setup but the
| + | |
| − | * window height has potentially changed.
| + | |
| − | *
| + | |
| − | * @param {Object} element jQuery object containing current section
| + | |
| − | * @param {Number} scrollHeight Current window height in pixels
| + | |
| − | */
| + | |
| − | update: function(element, scrollHeight){
| + | |
| − | element.find(SCROLLABLE_SEL).css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
| + | |
| − | },
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Called to get any additional elements needed to wrap the section
| + | |
| − | * content in order to facilitate overflow scrolling.
| + | |
| − | *
| + | |
| − | * @return {String|Object} Can be a string containing HTML,
| + | |
| − | * a DOM element, or jQuery object.
| + | |
| − | */
| + | |
| − | wrapContent: function(){
| + | |
| − | return '<div class="' + SCROLLABLE + '"></div>';
| + | |
| − | }
| + | |
| − | };
| + | |
| | | | |
| − | defaultScrollHandler = slimScrollHandler;
| + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/scroll?action=raw&ctype=text/javascript"></script> |
| | | | |
| − | });
| + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/jquery.min?action=raw&ctype=text/javascript"></script> |
| | | | |
| | + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/jquery-ui.min?action=raw&ctype=text/javascript"></script> |
| | | | |
| − | </script> | + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fullpage?action=raw&ctype=text/javascript"></script> |
| | | | |
| | + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/homeJs?action=raw&ctype=text/javascript"></script> |
| | | | |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/settings_home?action=raw&ctype=text/javascript"></script> |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
| + | |
| | | | |
| − | <script type="text/javascript"> | + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fastclick?action=raw&ctype=text/javascript"></script> |
| − | $(document).ready(function() {
| + | |
| − | $('#fullpage').fullpage({
| + | |
| − | sectionsColor: ['#03a9f4', '#1e88e5', '#388e3c', ' #ffeb3b', '#8e24aa','#673ab7','#ef9a9a','#eeeeee'],
| + | |
| − | anchors: ['slidePage', 'projectPage', 'resultsPage', 'partsPage', 'mathModelingPage','outReachPage','teamPage','contactPage'],
| + | |
| − | menu: '#menu',
| + | |
| | | | |
| − | //equivalent to jQuery `easeOutBack` extracted from http://matthewlein.com/ceaser/
| + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/responsive-nav?action=raw& |
| − | easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
| + | ctype=text/javascript"></script> |
| − | });
| + | |
| | | | |
| − | });
| + | <script type="text/javascript" src="https://2016.igem.org/Template:UFAM-UEA_Brazil/js/fixed-responsive-nav?action=raw&ctype=text/javascript"></script> |
| − | </script>
| + | |
| | | | |
| | </html> | | </html> |
