An error message reading "TypeError: 'undefined' is not callable" occurs when attempting to apply my custom CSS

I am facing an issue that I cannot seem to debug. Every time I attempt to add my custom CSS file to the header, which is required for the script called onepage-scroll.js, I encounter an error. The script mandates placing the file in the header using 

<script src="http://greenbex.com/js/onepagescroll.js"></script>
and then writing the code...


<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css"> //old css from another page
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>

Everything works fine as intended with this setup. However, when I switch to using my new custom CSS file 

<link rel="stylesheet" type="text/css" href="css/style.css">
, the page goes blank and displays an error:

Uncaught TypeError: $(...).onepage_scroll is not a function(…)I am unsure about the root cause of this problem...

The content of my CSS file begins like this:

/* Prefix */

#mainpage {
    height: 100vh;
    width: 100vw;
}
html {
    display: none;
}

.col-md-8, .col-md-4 {
        padding: 0;
        margin: 0;
    }
.row {
   margin-right: 0;
   margin-left: 0;
}
/* HOME PAGE */
....

EDIT

This is the complete code that functions properly:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>
<body>
    <div class="main">
        <section id="header">
            <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
    </div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>

However, after adding my new custom CSS file 

<link rel="stylesheet" type="text/css" href="css/style.css">
, it stops functioning correctly.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"> //this line
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>
<body>
    <div class="main">
        <section id="header">
            <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
    </div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>

Resulting in the following error message:

script.js:19 Uncaught TypeError: $(...).onepage_scroll is not a function(…)

The script.js contains:

//custom script here
    onePageScroll(".main", {
       sectionContainer: "section",
       easing: "ease",
       animationTime: 1000,
       pagination: true,
       updateURL: false,
       beforeMove: function(index) {},
       afterMove: function(index) {},
       loop: true,
       keyboard: true,
       responsiveFallback: false
    });
    $(document).ready(function(){
        $(".main").onepage_scroll();
    });
javascriptjqueryhtmlcss

Answer №1

If you are using the pure version of the plugin, there is no need to include the line 

$(".main").onepage_scroll();

The plugin has already been loaded and re-initialization is not necessary, which could be causing issues.

Update:

You have been utilizing the purejs-onpage-scroll plugin, where jQuery is not required.

However, it seems like you may have mistakenly used the initialization code for the jQuery-required onepage-scroll plugin.

Answer №2

Do we need to include jQuery as a plugin?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/onepagescroll.js"></script>

<script src="http://greenbex.com/js/script.js"></script>

The order in which these scripts load is crucial.

Answer №3

My recommendation is to arrange the following 3 scripts in this order:

<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>

Prior to this one:

<script src="http://greenbex.com/js/onepagescroll.js"></script>

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

Implement various actions when the window is resized

The carousel code I have found returns a different number of items to display based on screen size. You can check it out here. $(function() { var mini = 1000; var big = 1280; if (window.screen.availWidth < mini) { $('#carousel1').jsCar ...

javascriptjqueryhtmlcarouselwindow-resize

When the input field is in debug mode and has a keydown event listener, the character fails to appear as intended

As a newcomer to javascript/html, I have an input with a keydown event listener. Surprisingly, everything seems to work fine when I try it out in the browser. I type a character and see that my javascript is executed, then I type another character and it w ...

javascriptjqueryhtmlevents

Tips for avoiding the 'ResizeObserver loop finished with unhandled notifications.' error when using React with mui/material/Table

This is our current code snippet: import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableC ...

javascriptreactjsmaterial-ui

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

Difficulty displaying images in remotion/reactjs

Utilizing the remotion library in reactjs to craft video content has been quite the journey. Despite following the instructions on importing and using assets, I'm encountering an issue where images and CSS are not working as expected. The documentatio ...

javascriptnode.jsreactjs

Angular: display many components with a click event

I'm trying to avoid rendering a new component or navigating to a different route, that's not what I want to do. Using a single variable with *ngIf to control component rendering isn't feasible because I can't predict how many variables ...

javascriptangular

Modifying the structure of serialized data

After serializing a JS form, the data looks like this: .....&xx=xxx&otherError=&input=SMS&message=sdfgs&...... Can anyone provide guidance on how to replace the value of message with the content of a textarea before making an ajax cal ...

javascriptjqueryhtmlforms

Using Ajax to update a MySQL database with an array from jQuery

I need some assistance in updating a MySQL table using data from a jQuery array through AJAX. I've tried searching for similar issues without any luck, possibly due to my lack of familiarity with the correct terms in web development and coding. Allow ...

javascriptphpjquerymysqlajax

The functionality of Ajax is limited when it comes to handling multiple div elements at the same

Seemingly silly question ahead, but I've been grappling with it for days to no avail. If anyone can help me solve this, please state your price and provide your PayPal details – the money is yours :). What I'm trying to achieve is to add a "Add ...

phpjavascriptjqueryajax

Creating PHP functions that return a JSON string when invoked - a simple guide

I have created a script that contains various functionalities, including fetching data from a database and encoding it into JSON. However, I want to be able to call different functions to execute these scripts separately. When I attempted to define and c ...

javascriptphpjson

Is it possible to adjust the height of ion.RangeSlider?

Currently, I am using the ion.RangeSlider in my project, which can be accessed here: Although it functions well, I am interested to know if there is a way to increase the size/height of the slider. I have attempted adjusting the height and padding but hav ...

jqueryhtmlcsssliderrange

The function of d3.behavior.zoom() unexpectedly shifts the graph to the corner rather than the center

I am looking to implement mousewheel zoom functionality for my sunburst visualization: I have made changes to the following code snippet: var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); var svg = d3.select("body").ap ...

javascriptd3.jsgraphsunburst-diagram

Tips for showing dates with prompts in JavaScript

Does anyone know how to successfully insert dates in prompt boxes using JavaScript? I have attempted to input the month and date separately by using two separate prompt windows. ...

javascriptprompt

Clicking on the following link will initiate the process of submitting a form

I'm encountering an issue with the following code snippet: <a href='javascript:jQuery("#questionnaire").show();'>haha</a> When this code is placed inside a form, it mysteriously causes the form to submit upon clicking the link. ...

javascriptjqueryhtmlwordpress

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

javascripthtmliframelinkedin-api

Intermittent issues with requesting JSON data

My current project involves building a script that iterates through a list, retrieves product SKUs, and includes them in a JSONP request to retrieve an object. The script seems to be functioning as intended, but there are occasional failures. Here is an e ...

jqueryajaxjsonjsonp

Using Selenium to test the website content by comparing the unformatted text to the expected value

When testing content on a website, I can easily verify unformatted text using String.equals("expectedContent") when there are no HTML elements like <b>, <i>, or <sup>. However, the test fails if there are elements such as <br> or &l ...

htmlselenium

Move a Java application from a trial SAP HCP to a complete SAP HCP membership

After successfully creating a Java IoT App with Raspberry Pi running on SAP HANA HCP trial account, I am now looking to enhance its functionality within the SAP HANA Development Workbench. Is there a way to import it into the SAP HANA account with ease, o ...

javascriptjavahanasap-business-technology-platform

Incorporating dynamic dictionary fields in Reactive and pushing them into an established FormControl

I am attempting to dynamically populate my reactive form with varying fields based on user selection. Here is an example of the fields I have: fields = [{ df_id: 48, df_name: "Phone Number", df_type: "text", ...

htmlangulartypescript

Changing the color along with the background color transition

I'm looking to create a website with a blue background that transitions from a light shade of blue at the top to a darker shade at the bottom. Is there a way to achieve this effect using CSS or jQuery? Most examples I've found involve hover effec ...

jquerycss