how to make fullPage.js plugin to work?

Question

I'm so newbie in javascript ! I need your help, guys (pretty please).

I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.

This is my html code:

 <head> <title>Title</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href='css/style.css' type='text/css' media='all' /> <link rel="stylesheet" type="text/css" media="all" href="css/animate.css"> <link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ > <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin --> <script src="js/script.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin --> <script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin --> <script type="text/javascript" src='js/jquery-migrate.min.js'></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'], scrollingSpeed: 1000 }); }); </script> </head> <body> <div class="container-fluid" id="fullpage"> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin --> </body>

Many thanks,

Sandra P.

Answer 1

I thinkthis can help you.

And I recommend to try to replace it:

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> 
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>

to this

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

This should correct the error TypeError:. $(...).Fullpage TypeError:. $(...).Fullpage . Just look at the live example .

I changed your example and it works, see this .

Update

Properly include in that order:

Styles;
jQuery;
jQuery Migrate (I think you do not need it) ;
jQuery FullPage and other jQuery plugins;
you code.

it should look like this

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->

<script type="text/JavaScript" src="youJS"></script>

Update 2

Replace youJS :)

 <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#fullpage').fullpage({ anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'], scrollingSpeed : 1000 }); }); </script> </head> <body> <div class="container-fluid" id="fullpage"> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> <div class="section"> <div class="row first-section"> Some text. </div> </div> </div> </body>

how to make fullPage.js plugin to work?

Question

1 answers

solution1
2 2016-09-14 09:28:32

how to make fullPage.js plugin to work?

Question

1 answers

solution1 2 2016-09-14 09:28:32

solution1
2 2016-09-14 09:28:32