javascript - “TypeError: 'undefined' is not a function” when trying to add my custom css -
i cannot tell why i'm having problem. each time try add custom css file header. i'm using script called onepage-scroll.js requires put file in header <script src="http://greenbex.com/js/onepagescroll.js"></script> write code... header
<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 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> this way works fine , work, once change local new custom css <link rel="stylesheet" type="text/css" href="css/style.css"> page goes blank , says
uncaught typeerror: $(...).onepage_scroll not function(…) have no idea causes problem ...
my css file starts 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 full code, way works.
<!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> after adding new custom css file <link rel="stylesheet" type="text/css" href="css/style.css"> doesn't work
<!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> and says
script.js:19 uncaught typeerror: $(...).onepage_scroll not function(…)
script.js has
//custom script here onepagescroll(".main", { sectioncontainer: "section", // sectioncontainer accepts kind of selector in case don't want use section easing: "ease", // easing options accepts css3 easing animation such "ease", "linear", "ease-in", // "ease-out", "ease-in-out", or cubic bezier value such "cubic-bezier(0.175, 0.885, 0.420, 1.310)" animationtime: 1000, // animationtime let define how long each section takes animate pagination: true, // can either show or hide pagination. toggle true show, false hide. updateurl: false, // toggle true if want url updated automatically when user scroll each page. beforemove: function(index) {}, // option accepts callback function. function called before page moves. aftermove: function(index) {}, // option accepts callback function. function called after page moves. loop: true, // can have page loop top/bottom when user navigates @ up/down on first/last page. keyboard: true, // can activate keyboard controls responsivefallback: false // can fallback normal page scroll defining width of browser in // want responsive fallback triggered. example, set 600 , whenever // browser's width less 600, fallback kick in. }); $(document).ready(function(){ $(".main").onepage_scroll(); });
since using pure version of plugin, remove line $(".main").onepage_scroll();
the plugin has been loaded, , re-initialization not needed, causing problems.
edit:
you've been using plugin, https://github.com/peachananr/purejs-onepage-scroll, jquery not required.
but you've used initialization of plugin, https://github.com/peachananr/onepage-scroll, jquery required.
Comments
Post a Comment