0

I use the js-Plugin fullpage on my webpage and have a submit-button in the second section which should start a js-based demo-function. Unfortunately pressing the button just let's me jump back to section 1 without starting the function (or starting and immediately stopping it again, I'm not sure). This is the code:

HTML

<input type="submit" value="Start" id="btn1"/>

js

$('#btn1').click(function(){
    $.WizDemo();
});

function WizDemo() {
some code;
};
Alvaro
  • 40,778
  • 30
  • 164
  • 336
Nils DerFerd
  • 1
  • 1

2 Answers2

0

From fullPage.js FAQs:

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

From fullPage.js docs:

afterRender() This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

There you have your answer. Add the code in the afterRender callback.

Community
  • 1
  • 1
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Thanks for the answer! To be true, I don't really know, what to put in there. I put my js-code in, but it didn't change anything... – Nils DerFerd Jan 09 '15 at 14:04
0

OK, i got it.

<input type="submit"/>

reloads the page so you have to use

<input type="button"/>

which doesn't.

I found the answer here How do I make an HTML button not reload the page

Community
  • 1
  • 1
Nils DerFerd
  • 1
  • 1
  • You can still using `submit` if you prevent the form to be sent with `preventDefault`. In any case, note that the jQuery code you used should be placed in the `afterRender` callback as I said. – Alvaro Jan 11 '15 at 16:23