I have a html file and I need to rewrite it in Rails style. I tried to read the rails guides but couldn’t find much useful info. Here’s part of the HTML i have.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<% content_for :head do -%>
<%= stylesheet_link_tag 'css.css' %>
<% end %>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
<script language="JavaScript" type="text/javascript" src="images/jquery-1.7.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.infiniteCarousel.js">
</script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.tbSwitching.js"></script>
<script language="JavaScript" type="text/javascript" src="images/myfocus-1.2.4.full.js"></script>
<script language="JavaScript" type="text/javascript" src="images/mF_expo2010.js"></script>
<link href="images/mF_expo2010.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="top">
<div class="one">
<div class="one1">
<img src="images/ico1.png" width="225" height="58"/>
</div>
<div class="one2">
<div class="one3">
<div class="one4">Login/Sign up</div>
<div class="one4">Create an Account </div>
<div class="one5">shopping bag</div>
</div>
</div>
</div>
</div>
<div class="two">
<% content_for :below_body do -%>
<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
<%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
<%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
<%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
<%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>
<script>
$(function(){
$("#top .two3").hover(function(){
$("#top .two3").removeClass("on").next(".two4").removeClass("ac");
$(this).addClass("on").next(".two4").addClass("ac");
},function(){
});
})
</script>
<script>
$(function(){
$("#top .two5 a").hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
});
})
</script>
......
</body>
</html>
I tried to revise it by using the code below inside the body tag but didn’t seem to work.
<% content_for :below_body do -%>
<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
<%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
<%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
<%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
<%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>
Should I put it inside the head instead?
Also should I do anything with the tag?
Thanks
General rule of thumb is that library should go into the head (like jQuery), all the other code that uses jQuery for example should go below the code. The reason for this is, that everything that you want to talk to as a DOM element with jQuery has to be rendered (i.e. above your js code) in the document.
What I usually do is append everything, i.e. all script, at the end of the page. This way the loading times of the page itself will reduce, as the request from HTTP does not load the JS first and then the HTML.