UPDATE: Encountered a new error: Error Jquery not defined on line 208
The issue seems to be with line 208 in this code snippet: https://github.com/litera/jquery-scrollintoview/blob/master/jquery.scrollintoview.js
I am puzzled as to why I am facing this error, especially since everything was functioning properly on jsfiddle. However, upon integrating the code into my rails app, it fails to work. Upon inspecting the error further, the section complete: function() {
is highlighted.
Clicking the link triggers the appearance of a hidden div and changes the link color to 'active' (red), but the window does not scroll to the bottom of the div. Additionally, toggling the link has no effect – the div does not close and the link remains red.
Here is the original working jsfiddle: http://jsfiddle.net/Gr7BP/
application.js
$(function() {
$("#created").hide();
$('a.created-button').click(function() {
$('#created').toggle(function() {
$('a.created-button').toggleClass('active');
$('#created').scrollintoview({
duration: "slow",
direction: "y",
complete: function() {
// highlight the element so user's focus gets where it needs to be
}
});
});
});
});
$(function() {
$("#stuff").hide();
$('a.stuff-button').click(function() {
$('#stuff').toggle(function() {
$('a.stuff-button').toggleClass('active');
$('#stuff').scrollintoview({
duration: "slow",
direction: "y",
complete: function() {
// highlight the element so user's focus gets where it needs to be
}
});
});
});
});
footer
<footer>
<div id="created-by"><a class="created-button">Created by</a></div>
<div id="cool-stuff"><a class="stuff-button">Cool stuff</a></div>
</footer>
<div id="created">
</div>
<div id="stuff">
</div>
css
#top-section {
margin: 0 auto;
width: 100%;
height: 150px;
background: green;
}
#bottom-section {
margin: 0 auto;
width: 100%;
height: 150px;
background: white;
}
.active {
color: red;
}
update: