Is Fullpage.js functioning only on local servers?

I have decided to create a personal website showcasing my portfolio using the fullpage.js library. Everything seems to be working fine during development, but once I upload the site to my github.io or another public domain via FTP, I encounter GET errors trying to locate the necessary files within my node modules. Even though the file paths are correctly specified, the developer tools keep reporting the same errors consistently. The code snippet below illustrates the issue:

GET https://exampleuser.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js 
index.html:6 
GET https://exampleuser.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css 
index.html:1 
Mixed Content: The page at 'https://exampleuser.github.io/index.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
index.html:6 
GET https://exampleuser.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css 
index.html:14 
GET https://exampleuser.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js 404 (Not Found)
index.html:25 
Uncaught TypeError: $(...).fullpage is not a function
at HTMLDocument.<anonymous> (index.html:25)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)


<html>  
    <head>
    <!-- IMPORT JQUERY-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <!-- FULL PAGE JS -->
        <link rel="stylesheet" type="text/css" href="node_modules/fullpage.js/dist/jquery.fullPage.css" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script src="node_modules/fullpage.js/vendors/jquery.easings.min.js"></script>

        <script type="text/javascript" src="node_modules/fullpage.js/vendors/scrolloverflow.min.js"></script>

        <script type="text/javascript" src="node_modules/fullpage.js/dist/jquery.fullPage.js"></script>
        <!-- FONT -->
        <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        
      <!-- CSS -->

      <link rel="stylesheet" type="text/css" href="style/style.css"/>
      <script type="text/javascript">
        $(document).ready(function(){
            $('#fullpage').fullpage({
                navigationPosition: 'right',
            });      
        });
      </script>
    </head>    
    <body>
        <div id="fullpage">
            <div class="section" id="section1">
                <h1 id="title" class="animated fadeInUp">NAME</h1>
                    <div id="buttons">
                        <div id="button1" class="animated fadeInUp">
                            <a href="#">
                                <span class="fa-stack fa-lg" id="hover">
                                    <i class="fa fa-circle fa-stack-2x icon-background"></i>
                                    <i class="fa fa-file-o fa-stack-1x"></i>
                                </span>
                            </a>
                            <br />
                            <div id="handle">
                            Resume
                            </div>
                        </div>
                        <div id="button2" class="animated fadeInUp">
                            <a href="#">
                                <span class="fa-stack fa-lg" id="hover">
                                    <i class="fa fa-circle fa-stack-2x icon-background"></i>
                                    <i class="fa fa-linkedin fa-stack-1x"></i>
                                </span>
                            </a>
                            <br />
                            <div id="handle">
                            LinkedIn
                            </div>
                        </div>
                        <div id="button3" class="animated fadeInUp">
                            <a href="#">
                                <span class="fa-stack fa-lg" id="hover">
                                    <i class="fa fa-circle fa-stack-2x icon-background"></i>
                                    <i class="fa fa-github-alt fa-stack-1x"></i>
                                </span>
                            </a>
                            <br />
                            <div id="handle">
                            Github
                            </div>
                        </div>
                        <div id="button4" class="animated fadeInUp">
                            <a href="#">
                                <span class="fa-stack fa-lg" id="hover">
                                    <i class="fa fa-circle fa-stack-2x icon-background"></i>
                                    <i class="fa fa-envelope-open-o fa-stack-1x"></i>
                                </span>
                            </a>
                            <br />
                            <div id="handle">
                            Email
                            </div>
                        </div>
                    </div>
            </div>
            <div class="section" id="section2">
                <p style="position: absolute; left: 10%; top: 3%; color: white; font-family: 'Quicksand', sans-serif; font-size: 120%;">Recent Work :</p>
                <div class="slide">
                    <a href="#">
                        <img src="..." class="animated fadeInUp" id="portfolioImage"/>
                    </a>
                </div>
                <div class="slide">
                    <a href="#">
                        <img src="..." class="animated fadeInRight" id="portfolioImage"/>
                    </a>
                </div>
                <div class="slide">
                    <a href="#">
                        <img src="..." class="animated fadeInLeft" id="portfolioImage"/>
                    </a>
                </div>
                <div class="slide">
                    <a href="#">
                        <img src="..." class="animated fadeInRight" id="portfolioImage"/> 
                    </a>
                </div>
            </div>
        </div>


    </body>
</html>

javascriptjqueryhtmlcssfullpage.js

Answer №1

Your website is secured with HTTPS, but you are trying to load jQuery from an insecure source. This is a security risk and not recommended.

To resolve this issue, simply update the jQuery script URL like so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Once you make this change, the problem should be resolved and your site will be more secure.

Answer №2

    <link rel="stylesheet" type="text/css" href="/fullpage.js/dist/jquery.fullPage.css" />

    <script src="/fullpage.js/vendors/jquery.easings.min.js"></script>

To use the relative path, ensure to include a forward slash before fullpage.js.

Answer №3

Having Jquery loaded twice, and with two different versions, could potentially lead to errors in your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to execute an Angular 2 application within Visual Studio 2015

I encountered an error while trying to set up an environment on VS 2015 with Angular2. Whenever I run the command "npm start," I receive the following error message. I attempted using "npm cache clean --force" before running "npm start," but the error pers ...

javascriptnode.jsangulartypescriptnpm

Using jQuery to modify CSS properties in the propertyName

With jQuery v1.6.4, I am attempting to dynamically format some objects. Take a look at my code snippet: <html> <head> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text ...

jqueryhtmlcss

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

javascripthtmlcssangular

Searching through an array based on a specific string

Could someone lend a hand in getting this to function... The code snippet below is functioning const acco = [{FullyQualifiedName=(-) Imposto Unico, Id=109, sparse=true, AcctNum=3.1.2.01.03027}, {FullyQualifiedName=13º Salário, Id=114, sparse=true, AcctN ...

javascriptarraysgoogle-apps-script

My mobile is the only device experiencing responsiveness issues

One challenge I'm facing is with the responsiveness of my React application, specifically on my Galaxy J7 Pro phone which has a resolution of 510 pixels wide. Interestingly, the app works perfectly on a browser at this width, as well as on my tablet ...

cssreactjsresponsive-design

How can I utilize passed in parameters in Meteor React?

I am trying to figure out how to use two params that I have passed in the following example. Can someone please assist me? updater(layer, item){ this.setState({layer5: <img id="layer5" className="on-top img-responsive center-block" name="layer5" ...

javascriptmeteorreactjs

Tips for comparing array objects in two separate React states

Comparing object arrays in two different React states can be challenging. Here is an example of the state values: review1 = [{name: John, Title: Manager},{name: Peter, Title: Engineer}, {name: Serena, Title: Supervisor}] review2 = [{personName: John, isma ...

javascriptreactjs

Build interactive web pages using Python scripts

By utilizing the Python scripts provided below, you can generate an HTML file with pre-set global variables (a, b, c, d). However, there might be instances when certain variables are not set globally, resulting in errors like "global 'a' is not d ...

pythonhtmlpython-2.7

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

Is it possible to run concurrent PostgreSQL queries in NodeJS?

I'm unsure why, but the task is supposed to be run in parallel and should only take 2 seconds: const test = async () => { client.query("SELECT pg_sleep(2) FROM test", (err, result) => { console.log("DONE!"); }) client.query("SELECT pg ...

javascriptnode.jspostgresql

Using Telegram markdown: Can you combine both bold *and* italic? (September 2018)

After referencing the Markdown Syntax guide on Telegram’s Wiki page, it appears to be quite straightforward to format text as bold and italic. The guide explains that: *this is in italic* and _so is this_ **this is in bold** and __so is this__ ***this ...

htmlmarkdowntelegrammarkuptext-formatting

Implementing a feature in React to restrict access to my URL for a specified duration

I'm currently developing my React project and I need to make a specific page on my website accessible for only a limited time, like 5 minutes. For example, I want to send the user an email with a unique url, allowing them to access the designated web ...

htmlreactjsurlserverjet

Adjust the width of the initial column in the table and ensure it remains noticeable

I am a beginner with bootstrap and I find it extremely useful. I have encountered a problem with a table I am working on. I am trying to set the width of the first column and keep it always visible, but I am having trouble achieving this. I have successful ...

htmlcssbootstrap-4

The jQuery Ajax function seems to be malfunctioning, while the PHP code is executing smoothly without any

I attempted to utilize AJAX to send form data to a .TXT file using PHP code. The information is successfully being added to the text file, however, the AJAX functionality is not functioning properly. Can someone please point out the error in my code? ...

phpjqueryajax

In the template, I utilize both vue-router and jQuery. However, there seems to be an issue with $(document).ready() not functioning

Looking for guidance on using jQuery in Vue. I've noticed that when I refresh the page, $(document).ready() function is triggered. However, when I use vue-router to switch pages, $(document).ready() does not seem to work. <template> <div ...

javascriptjqueryvue.jsvuejs2vue-router

Encountered a 400 error when attempting to send a request to a RestController in Spring MVC

I keep getting a "bad request 400" error when sending a request with parameters to the controller. I have double-checked the syntax but can't find any mistakes. Can someone please review my code and see what's wrong? var url = contextPath+"/bill ...

javascriptjqueryajaxrest

ng-if not working properly upon scope destruction

While working on a isolate scope directive, I encountered an issue. In the link function of this directive, I am compiling an HTML template and then appending it to the body of the document. const template = `<div ng-if="vm.open"></div>`; body ...

javascriptangularjsangular-ng-if

Difficulty in toggling on and off several form elements with JavaScript

Trying to control multiple form elements on an HTML page with JavaScript has presented a challenge for me. In my form, each row contains a checkbox that should enable/disable the elements on that row. The issue I'm facing is that only the first two f ...

javascriptformscheckbox

Menu options displayed with the help of HTML5 tags

Currently, I am experimenting with creating an interactive HTML5 dropdown menu in my spare time. While researching on W3Schools about dropdown menus, I noticed that all of them utilize CSS classes and id's for styling. This is a snippet of the HTML c ...

htmlcssdrop-down-menunavdropdown

Steps to properly insert an SVG into a button

I have a block set up with a Link and added text along with an svg image inside. How can I properly position it to the lower right corner of the button? (see photo) Additionally, is there a way to change the background color of the svg? This is within th ...

htmlreactjsnext.jssass