FullPage.js Skip Sections
FullPage.js Skip Sections
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<script src="https://cdn.rawgit.com/Baro82/fp/master/jquery.fullpage.js"></script>
<div id="menu">
<a href="#page1">page1</a>
<a href="#page4">page4</a>
<a href="#page5">page5</a>
<a href="#" id="showToggle">show toggle</a>
<span></span>
</div>
<div id="fullpage">
<div style="background-color:#ff7f7f;" class="section" data-anchor="page1">
<h1>1</h1>
<h6>Sections 2/3/6 are accessible only from the links below</h6>
<a href="#page2">page2</a>
<a href="#page3">page3</a>
<a href="#page6">page6</a>
</div>
<div style="background-color:#ff7fdf;" class="section" data-anchor="page2">
<h1>2</h1>
</div>
<div style="background-color:#a67fff;" class="section" data-anchor="page3">
<h1>3</h1>
</div>
<div style="background-color:#7fafff;" class="section" data-anchor="page4">
<h1>4</h1>
</div>
<div style="background-color:#7fcdff;" class="section" data-anchor="page5">
<h1>5</h1>
</div>
<div style="background-color:#a1bb41;" class="section" data-anchor="page6">
<h1>6</h1>
</div>
</div>
CSS
html,
body {
background-color: #e0e0e0;
font-family: verdana;
font-size: 20px;
text-align: center;
}
#menu {
position: fixed;
top: 20px;
width: 100%;
z-index: 9999;
}
#menu span {
display:inline-block;
width:100%;
margin-top:10px;
font-size:0.8em;
color:#fff;
}
#menu a {
margin: 0px 20px;
font-weight: bold;
color: #777;
text-decoration: none;
}
#menu a:hover {
color: #bed663;
}
#menu a.selected {
color: #bed663 !important;
}
h6 {
color:#fff;
}
JavaScript
/*
FullPage.js with an hack in these 2 lines
***************************************************************************************************************
***************************************************************************************************************
*
* Moves the page up one section.
*
function moveSectionUp(){
var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first'); // <--- THIS
// var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS
AND
*
* Moves the page down one section.
*
function moveSectionDown(){
var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first'); // <--- THIS
//var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL); // <--- INSTEAD OF THIS
*/
/*
My code
***************************************************************************************************************
***************************************************************************************************************
*/
fpInitSkipEl = function(funcSkipEl) {
if ($.isFunction(funcSkipEl)) {
var nextIndex = 0;
$('.section').each(function() {
nextIndex++;
$('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
var dataAnchor = $(this).attr('href').toString().replace('#', '');
return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
});
});
}
}
fpSkipEl = function(anchorsToSkip, index, nextIndex) {
//debugger;
$('.section').each(function() {
if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
&& (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
&& (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex -...