Javascript and Ruby on rails

rubyonrails-talk
1

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

<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 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.

2

Are you getting any errors in the javascript console?