Friday, November 29, 2013
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 <script type="text/javascript">$('#nav').spasticNav();</script> 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(){
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-talk+unsubscribe@googlegroups.com.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/5a1acb49-5d1d-4c6c-9e6b-c1fdcc834ca7%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment