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

jvperrin · Accepted Answer · 2013-11-30 04:33:05Z

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.

answered Nov 30, 2013 at 4:33

jvperrin

3,3581 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Harry Over a year ago

It still doesn't work. For the html layout, I just copy and paste the same statements between <div id="container"></div> tag. I saw some examples online they embed the function inside the js file. I update my post to show that.

Harry Over a year ago

Can you help me please? I've spent 5 hours on this :(

jvperrin Over a year ago

Are there any console errors when you load the page and are you sure that the 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.

Harry Over a year ago

I test with alert and the js gets loaded. Is there anyway to not using jQuery.prototype (my teammate created the js file, not me)?

jvperrin Over a year ago

I'm not sure what you mean. Are you sure the nav code works? If it is included and the element exists, I'm not sure what else could be wrong...

|

Collectives™ on Stack Overflow

Javascript and Ruby on rails

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related