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 the 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 is before the <body> closing tag.
Make sure to place 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:
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 the mouse moves.
Have a look:
The code:
<!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();
});
</script>
</body>
</html>
Make sure to place the il-grid-trans.png file in the appropriate location. The following CSS is used to refer to 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 than 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 options in the ruler plug-in
The plug-in has a few options that you may change as per the needs of your project. The options include:
- vRuleSize //It will change the vertical ruler size. More the value, the bigger will be the size of the 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.
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>