Javascript and Ruby on rails

Question

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(){

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.

Javascript and Ruby on rails

Question

1 answers

solution1
1 ACCPTED 2013-11-30 04:33:05

Javascript and Ruby on rails

Question

1 answers

solution1 1 ACCPTED 2013-11-30 04:33:05

solution1
1 ACCPTED 2013-11-30 04:33:05