Category Archives: HTML
Referencing an Image from CSS File in Asset Pipeline
HAML
Haml is a markup language used to describe XHTML. Haml is very easy to read and enables developers to avoid explicitly coding XHTML into their templates. Haml was originally written by Hampton Catlin. Haml also includes a counterpart, Sass, for creating CSS. The official implementation of Haml has been built for Ruby with plugins for Ruby on Rails.
Haml is a templating engine for HTML. It’s are designed to make it both easier and more pleasant to write HTML documents, by eliminating redundancy, reflecting the underlying structure that the document represents, and providing elegant, easily understandable, and powerful syntax.
The first step is to install the gem:
gem install haml
Syntax for HAML
The most basic element of Haml is a shorthand for creating HTML:
%tagname(attr1=’value1′ attr2=’value2′) Contents
Adding class and id attributes is even easier. Haml uses the same syntax as the CSS that styles the document:
%tagname#id.class
In fact, when you’re using the <div> tag, it becomes even easier. Because <div> is such a common element, a tag without a name defaults to a div.
#foo Hello!
You can also put plain text as a child of an element:
%p
Hello,
World!
Example HAML
The first step to creating a view inside a Rails application using Haml is to replace .html.erb with .haml. For example, the view corresponding to the show action in a employee controller would be RAILS_ROOT/app/views/employee/show.haml
Haml is simple to use. To reproduce a XHTML tag, simply use %tag. Closing tags is not required and handled via indentation. Indentation must be 2 spaces.
#main
.note
%h2 RoR Blog
%ul
%li
Haml is indented with
%strong two spaces *only*
Which will be automatically converted to,
<div id=’main’>
<div class=’note’>
<h2>RoR Blog</h2>
<ul>
<li>
Haml is indented with
<strong>two spaces *only*</strong>
</li>
</ul>
</div>
</div>
Example 2
!!!
%html{ : xmlns => “http://www.w3.org/1999/xhtml”, :lang => “en”, “xml:lang” => “en”}
%head
%title BoBlog
%meta{“http-equiv” => “Content-Type”, :content => “text/html; charset=utf-8”}
%link{“rel” => “stylesheet”, “href” => “main.css”, “type” => “text/css”}
%body
#header
%h1 BoBlog
%h2 Bob’s Blog
#content
– @entries.each do |entry|
.entry
%h3.title= entry.title
%p.date= entry.posted.strftime(“%A, %B %d, %Y”)
%p.body= entry.body
#footer
%p
© Selva
Will generate,
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html lang=’en’ xml:lang=’en’ xmlns=’http://www.w3.org/1999/xhtml’>
<head>
<title>BoBlog</title>
<meta content=’text/html; charset=utf-8′ http-equiv=’Content-Type’ />
<link href=”/stylesheets/main.css” media=”screen” rel=”Stylesheet” type=”text/css” />
</head>
<body>
<div id=’header’>
<h1>BoBlog</h1>
<h2>Bob’s Blog</h2>
</div>
<div id=’content’>
<div class=’entry’>
<h3 class=’title’>Halloween</h3>
<p class=’date’>Tuesday, October 31, 2006</p>
<p class=’body’>
Happy Halloween, glorious readers! I’m going to a party this evening… I’m very excited.
</p>
</div>
<div class=’entry’>
<h3 class=’title’>New Rails Templating Engine</h3>
<p class=’date’>Friday, August 11, 2006</p>
<p class=’body’>
There’s a very cool new Templating Engine out for Ruby on Rails. It’s called Haml.
</p>
</div>
</div>
<div id=’footer’>
<p>
© Selva
</p>
</div>
</body>
</html>
Handling Keyboard Shortcuts in Rails or HTML
Handling keyboard shortcuts in a Rails app, HTML using javascript is pretty simple.
Just download a shortcut.js from the following URL :
http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
Rails :-
Paste the file in the /public/javascripts folder
Write the following code in your view / layout file before <body> tag.
<head>
<script src=”/javascripts/shortcut.js” type=”text/javascript”></script>
<script type=”text/javascript”>
shortcut.add(“Ctrl+Shift+X”,function() {alert(“You Pressed Ctrl+Shift+X!”);});
shortcut.add(“Ctrl+a”,function() {alert(“You pressed Ctrl+a!”);});
shortcut.add(“D”,function() {alert(“You Pressed D!”);});
</script>
</head>
Note : Displaying an alert message is not just the action for this concept. Instead of alert message, we can write any javascript function to execute some action or even we make pass it to controller through AXAJ request. (refer :- https://selvaonrails.wordpress.com/2010/08/31/making-a-ajax-request-from-rails/)
Scrolling automatically to some part of the link when clicking the anchor tag in html and rails
<div align=”center”>
<table border=”1″ cellspacing=”1″ width=”500″ id=”table1″>
<tr>
<td>
<div align=”left” id=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100″ id=”table2″>
<tr>
<td><a href=”#home”>HOME</a></td>
</tr>
<tr>
<td><a href=”#about”>ABOUT</a></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height=”500″ valign=”top”><span id=”home”>HOME AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
<td valign=”top” height=”700″><span id=”about”>ABOUT AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
</table>
</div>
$(document).ready(function(){
$(“.scroll”).click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url – like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name – home in mysitecom/index.htm#home
var parts = full_url.split(“#”);
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $(“#”+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
});
Selva's Blog 