The ruler plug-in for jQuery

The jQuery ruler plug-in enables displaying the x and y axis of the screen with cursor movement for the specified container element.

The cursor position can be displayed in a box and with a crosshair that you may specify by using the available options.

Basically, it is a Photoshop like ruler that your users may find useful for knowing the x and y axis. Have a look at the demo for more info with complete code.

Developer page Download plug-in

Setting up the ruler plug-in

Download the plug-in from the GitHub website and get the jquery.ruler.js and ruler.css files. Place the CSS file in the <head> section while JS file before the <body> closing tag.

Make sure placing the plug-in JS file after the jQuery library. You also need to include the modernizr.min.js file that may be referred from the CDN as used in the demo below.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script src=”js/jquery-ruler/jquery.ruler.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js”></script>

In the script, just initiate the plug-in by calling the ruler() method:

$('selector').ruler();

See the live demos.

A demo of ruler plug-in at body level

In this example, the body of the page is acting as the selector for the ruler. You can see the graph and as the mouse cursor is moved, the x and y axis is displayed that updates as mouse moves. Have a look:

jquery ruler

Online demo and code

You can see the complete code in the demo page.

Make sure to place the il-grid-trans.png file in the appropriate location. The following CSS is used to refer this image, which is placed in the demo.css file.

html {

                background-position: 18px 18px;             

                font-family: source sans pro, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Veranda, sans-serif;

               

                font-size: 16px;

                line-height: 1.4;

               

                background: #fff url(il-grid-trans.png) top left repeat;

                font-weight: normal;     

                color: #222;

                font-weight: bold;          

                color: #222;*/

}

You may place it in your own CSS or within the document rather external CSS.

The style of the ruler

As mentioned earlier, the plug-in has a CSS file that defines the style of rules. You may amend the properties there to customize the ruler as per the need of your web project.

The CSS file name is ruler.CSS that can be located in the root directory after downloading the package.

The options in the ruler plug-in

The plug-in has a few options that you may change as per the need of your project. The options include:

  • vRuleSize //It will change the vertical ruler size. More the value, the bigger will be the size of ruler
  • hRuleSize //To change the size of horizontal ruler, use this option
  • showCrosshair //The default is true and shown in above example. It will display a cross dotted line with mouse movement.
  • showMousePos // The default value is true. It displays the x and y positions and updates with the mouse movement. If kept false, the box will not display.

A Demo with all above options

See this demo where I used bigger values for horizontal and vertical rulers while the showCrosshair and showMousePos are kept true.

jquery ruler custom

You can see the difference. The horizontal and vertical rulers are bigger in size than the first demo. Following is the code for this demo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery-ruler/ruler.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ruler/demo.css" rel="stylesheet" type="text/css">
</head>

<body>
<h3>A Demo of Ruler plug-in</h3>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script src="js/jquery-ruler/jquery.ruler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>
$(function() {
  $('body').ruler({
    vRuleSize: 105,
    hRuleSize: 95,
    showCrosshair : true,
    showMousePos: true
  });    
});
</script>

</body>
</html>