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

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

htmlcssreactjstailwind-css

Modifying the color of a variety of distinct data points

There was a previous inquiry regarding Changing Colour of Specific Data, which can be found here: Changing colour of specific data Building upon that question, I now have a new query. After successfully changing the 2017 dates to pink, I am seeking a way ...

htmlcssjsonangular

Breaking Points in Tailwind are crucial for creating responsive designs

I am attempting to create a simple div where I want px-5 for mobile screens and px-20 for larger screens. However, only px-5 is working and px-20 is not applying on large screens. Can someone help me understand why? Code Output Image <div class=" ...

cssreactjsnext.jstailwind-cssstyling

Angular 9 Singleton Service Issue: Not Functioning as Expected

I have implemented a singleton service to manage shared data in my Angular application. The code for the service can be seen below: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataS ...

javascriptangulartypescript

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

[Hey there!][1] Encountering this TypeScript error message: { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { ...

javascripthtmlcssreactjstypescript

Modifying several items with Ramda's lens

I am currently working with a data structure that is structured similarly to the following: var data = { "id": 123, "modules": [{ "id": 1, "results": [{ "status": "fail", "issues": [ {"type": "ch ...

javascriptjsonfunctional-programmingramda.js

I'm struggling to figure out how to specify the data type for storing an array of objects in a variable using React.useState

I am currently working on extracting values from an .xlsx file using the SheetJS library. Below, I will provide the code snippets, errors encountered, and the different approaches I have attempted. Data extracted from var dataToJson: (6) [{…}, {…}, { ...

javascriptarraysjsonreactjstypescript

Guide to sending a response to an AJAX post request in Express with Node.js: Answered

For a project focused on practicing Node.js and jQuery Ajax, I'm working on a simple task. Essentially, I have an ajax post request that sends data to a Node.js server and waits for a response. On the server-side, there's code that processes this ...

javascriptjquerynode.jsajaxexpress

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: {'AAPL':['Apple Inc ...

pythonhtmlcssselenium

Ensuring Email Authenticity in React Native

I'm currently working on email validation and have a specific condition in mind. If the email textbox is empty, I want to return true When the email textbox is not empty, I need to check if the input is a valid email address If the email is n ...

jqueryreactjsreact-native

Tips for making jQuery DataTables switch between multiple DOM tables?

I am working on a project where I need to display different jQuery Datatables based on the selected option in a <select> element. The data for each Datatable is stored in hidden DOM <table> elements: <!-- Make sure jquery.dataTables.css and ...

javascriptjquerydatatables

What is the best way to create a reliable and distinct identifier in React while using server-side rendering (

Currently, I am utilizing SSR within Next.js. My goal is to create a unique ID within a component in order to use it as an attribute for a DOM element's id. Since this component might be utilized multiple times on a single page, the ID needs to be dis ...

javascriptreactjsnext.jsserver-side-rendering

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...

htmlcsslayout

Exploring and Presenting Arrays using React JS

Recently, I have started working with react js and I am trying to add a search functionality to filter an array in React. My goal is to allow the user to enter a character in the textbox and only see the names that contain that specific character. So far, ...

javascriptreactjs

Optimal approaches for managing form processing duties

What is the most effective approach to handle form processing? In my situation, I typically follow these steps: If the user has not submitted the form, Display the form Otherwise, If there are any form errors, Show error messages Display the form ...

phphtmlforms

Combining data inputted into a remote/modal bootstrap form and submitting it alongside the parent page form

I am trying to create a parent bootstrap page with a form that includes a dynamic modal. The modal loads an external page containing form elements and a submit button that is supposed to submit the form on the parent page. However, when I click the submit ...

jqueryajaxtwitter-bootstrapmodal-dialog

Is it possible to add an EJS partial using JQuery after the page has finished loading

I'm facing an issue with dynamically appending a new EJS partial to my webpage when a user clicks a button. The problem arises because the page has already loaded, causing the EJS partial to render as HTML text instead of EJS code. Here is an example ...

jquerynode.jsexpressejs

Removing a row from a table in a React component

I have incorporated a Table component from Material UI into my project to display data fetched from an external API. The table dynamically updates its rows based on events received through a web socket connection. One specific requirement I have is that wh ...

javascriptreactjshtml-tablematerial-ui