Dan Dan - 5 months ago 38
Javascript Question

JS: fullpage.js moveTo() among different section

CONTEXT:

I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.

PROBLEM:

The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!

My JS:

$(document).ready(function() {


// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});

$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});

$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});

$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});

$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});


});


$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,

}

);


My Html:

<div id="fullpage" class="fullpage-wrapper">



<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>


<!-- Start section 2 - why -->

<div class="section" id="section2">

<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>

</div> <!-- End col-md-12 -->
</div> <!-- End Row -->

</div> <!-- End Container -->
</div> <!-- End Why -->

<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->

</div> <!-- End Container -->
</div> <!-- End Quality -->

Answer

Don't you get any errors in your javascript console?

In the code you posted there's a mistake here:

  // move to quality
  $( "#q").click(function() {
      $.fn.fullpage.silentMoveTo('why', 1);
  });

You forgot to close the string "#q".

Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.

If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.