I am building out a site. I built out the backend, and now I am doing the front-end. On the front end I have bootstrap, various font awesome icons, and angular. It should also be noted this is a rails app.
I want to add 1 page scroll feature using jQuery & jQuery easing, that is powered by a font-awesome arrow. I am obviously not doing something right, because when used it turns blue (thought maybe it was an "active state" because of the href?), and turns all of the font (everything) on my page blue.
When in chrome's console, I get the error;
Uncaught TypeError: undefined is not a function
Which is referring to this line (might be arbitrary) in jQuery;
this.pos = eased = jQuery.easing[ this.easing ](
Here is the rest of my code;
index.html.erb
<div class="page-scroll" id="arrow"><a href="#clients"><i class="fa fa-chevron-down"></i><a></div>
styles.css
#arrow {
font-size: 25px;
color: grey;
}
main.js
$(function() {
$('.page-scroll a').bind('click', function(event){
$('html, body').animate({
scrollTop: $("#clients").offset().top
}, 1500);
event.preventDefault();
});
});
application.html.erb (thanks to another SO question, jQuery & jQuery Easing placed under style sheets)
<!-- Easing for Page Scroll -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
When I comment out the div in index, all font goes back to normal (it's blue when it's active). When I click on the button, it takes me to the element I want, but it drops you there, it doesn't have the easing aspect (which is why I am adding easing).
I have searched a fair amount, and I am baffled about this (especially the changing of the text). Any help would be very appreciated.
I have since figured out what causes this.
When this happens, your page cannot find jQuery even though it is being called. To fix this, make sure your page content looks something like this (for rails, all of this would be in application.html.erb);
head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Good SEO.">
<meta name="author" content="">
<title>Your Title</title>
<!-- Bootstrap Core CSS for smaller projects/single page I'll use a CDN -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet" type='text/css'>
<!-- CSS or in assets/stylesheets-->
<link href="/assets/styles.css" media="screen" rel="stylesheet">
</head>
after closing body & html tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</body>
</html>
I've noticed the order has to be jQuery, bootstrap (if you're using it), then jquery.easing.