Keyboard Shortcuts using JQuery

Again it is very simple, looks you to feel like a magician if you are done. Just follow the steps :-

Download the shortcut.js file and include it in your layout or view file

<%= javascript_include_tag ‘shortcut’ %>

Then, add the following lines in the layout or view file where you want the keyboard shortcut to work on

shortcut.add(“e”,function() {
 },{‘disable_in_input’ : true});

disable_in_input: true will make sure the shortcut key ‘e’ won’t work when the user is on input field like textbox and textarea. Default is false.

shortcut.add(“Shift+T”,function() {

For adding a shortcut which is already a shortcut key on a browser like ‘/’, ‘Ctrl + F’, ‘Ctrl + S’ etc…,

shortcut.add(“/”,function() {
 },{‘type’: ‘keydown’, ‘propagate’:false, ‘target’:document
,’keycode’ : 191,’disable_in_input’ : true});

The following are the valid keys (you can also make the combination of any two keys from below) :-

  • All alpha/numeric keys – abc…xyz,01..89
  • Special Characters – Every special character on a standard keyboard can be accessed.
  • Special Keys…
    • Tab
    • Space
    • Return
    • Enter
    • Backspace
    • Scroll_lock
    • Caps_lock
    • Num_lock
    • Pause
    • Insert
    • Home
    • Delete
    • End
    • Page_up
    • Page_down
    • Left
    • Up
    • Right
    • Down
    • F1
    • F2
    • F3
    • F4
    • F5
    • F6
    • F7
    • F8
    • F9
    • F10
    • F11
    • F12

That’s it. Rock the world…

Drag & Drop Functionality for sorting a list on Ruby On Rails…

There is an easy way of implementing drag and drop sorting functionality in RoR with the help of ‘dragdrop.js’. Here is the steps :-

Consider i’m dealing with the movie application, and having a list of scenes(table named ‘scenes’) for a movie.

First gather the list of scenes in controller :- (scenes_controller.rb)

def list
@scenes=Scene.find :all

Note : For doing this sorting you need to have a field named ‘position’ in the appropriate table. for eg, here i have a ‘position'(integer type) field in ‘scenes’ table.

Include your drag and drop script file either in view file (list.html.erb) or in your layout
<%= javascript_include_tag ‘dragdrop.js’ %>

In view file :- (list.html.erb)

<% for scene in @scenes %>
<%= scene.scene_title %><br /><br />
<% end %>
<%= sortable_element(“scenes”, :url => sort_scenes_path, :handle => “handle”) %>

Note : Here ‘scenes’ is the name of the params to be passed, and sort_scenes_path will go to the method named ‘sort’ on scenes_controller.rb

Back in controller :- (scenes_controller.rb)

def sort
params[:scenes].each_with_index do |id, index|
Scene.update_all([‘position=?’, index+1], [‘id=?’, id])
render :nothing => true

That’s it. You have done.

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 :

Rails :-

Paste the file in the /public/javascripts folder

Write the following code in your view / layout file before <body> tag.

<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!”);});

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 :-

Making a ajax request from rails

Making a AJAX request in rails is pretty simple. Just follow the below example. It will take you to the particular  method (ex.., todo_fix method in the rooms controller) as used in my example. Then in controller you can perform your operation and do the render part.

In View File

Sample Rails code

<% todo_item=TodoItem.find(:first) %>

<a href=”javascript:call_this(<%= %>);”>Add a New To-Do Item</a>

JavaScript function in the same file

function call_this(a)
var url = “/rooms/todo_fix”;
var pars = “new_todo=” + a;
var target = ‘idresult’;
var myAjax = new Ajax.Updater(target,url, {method: ‘post’,parameters: pars});

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″>
<div align=”left” id=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100″ id=”table2″>
<td><a href=”#home”>HOME</a></td>
<td><a href=”#about”>ABOUT</a></td>
<td height=”500″ valign=”top”><span id=”home”>HOME AREA</span>
<a href=”#top”>Go Top</a></td>
<td valign=”top” height=”700″><span id=”about”>ABOUT AREA</span>
<a href=”#top”>Go Top</a></td>
//prevent the default action for the click event

//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 =;

//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);