I'm learning on creating a website using Ruby on Rails (RoR). I had an HTML template that I created when I worked with JSP 2 years ago, and now I want to reuse it in my RoR website. This is HTML file
<body>
<div id="container">
<ul id="nav">
<li><a href="index.html">Livingroom</a></li>
<li><a href="about.html">Bedroom</a></li>
<li><a href="#">Mattress</a></li>
<li id="selected"><a href="#">Bathroom</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Outdoor</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">SearchBar</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.Nav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
</html>
and this is the javascript file jquery.Nav.js
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
})(jQuery);
In the application.html.erb of RoR project, I include the js file like this
<%= javascript_include_tag "jquery.Nav.js" %>
However, my homepage doesn't work even though I put the $('#nav').spasticNav(); inside the body tag of RoR project
<body>
<div class="container">
<%= render 'layouts/header'%>
<%=yield%>
<%= render 'layouts/footer'%>
</div>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
Is there anyway to embed the $('#nav').spasticNav() into the js file. I tried many ways but it still doesn't work. Thanks a lot.
EDIT: I saw some examples online that they embed the function into js file like this.
jQuery(document).ready(function($){
/*---------------------------------
MENU Dropdowns
-----------------------------------*/
$('ul.menu').each(function(){
1 Answer 1
Try putting the $('#nav').spasticNav(); into a $(document).ready function so that it is executed when the page loads:
<script type="text/javascript">
$(document).ready(function() {
$('#nav').spasticNav();
});
</script>
Also make sure that you have a #nav element on the page. I couldn't tell from your html layout if you had it or not.
9 Comments
jquery.Nav.js file is getting loaded? Try putting a simple alert or console.log into the jquery file to see if it fires properly when the page loads.alert and the js gets loaded. Is there anyway to not using jQuery.prototype (my teammate created the js file, not me)?Explore related questions
See similar questions with these tags.