dbRuler

dbRuler Created by ShardSky. This templates have specific characteristics, namely: dbRule .

You can use this dbRuler on Javascript category for canvas, custom, dbruler, division, measure, meter, pixel, plugin, ruler and another uses.

dbRuler
© Copyright by ShardSky

Features:

  • None: None
  • Jquery: jQuery
  • Yes: Yes
  • Ie8, ie9, ie10, ie11, firefox, safari, opera, chrome, edge: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Javascript js: JavaScript JS

dbRuler

dbRuler is a lightweight jQuery and canvas based plug-in featuring the most common options for web development. Ruler can be used in full screen size and in container. Plug-in is full responsive. Compatable with any kind of devices. It can be used as custom ruler with user defined data. Futuremore the app can be used as a pixel ruler. Fully customizable. Compatable with any kind of browsers inclusive IE8 (for IE8 include: ‘<!-[if lte IE 8]><script type=”text/javascript” src=”excanvas.js”></script><![endif]->’ in head tag).

1. Usage: – HTML Markup is just canvas tag with width and height according options if provided or container size if there is no options.

2. Includes: – jQuery: <script type=”text/javascript” src=”jquery-3.2.1.min.js”></script> – ruler script: <script type=”text/javascript” src=”db-ruler.js”></script>

3. Initiation: – Default options example:

$(‘.target-element’).dbRuler();

– Props initiation example:

$(‘.target-element’).dbRuler({   width: 768,   height: 120,   step: 15 });

4. Options list: width: int – default: container width (responsive – 100% width of parent) – User can assign custom width or use containers width

height: int – default: container height (responsive – 100% height of parent) – User can assign custom height or use containers height

step: int – default: 15 – Property step defines distance in pixels bethween ruler divisions

titlesCount: int – default: 7 – Property titlesCount indicates count of bigger divisions on the ruler by default they are bigger from other divisions. Futuremore above them can exists additional text (titles and subtitles) which can be (Measure, DateTime or what else user need)

font: string – default: “15 serif” – Property font declares font size and type of the ruler text

color: string – default: “black” – Property color defines color of the divisions and text on the ruler

divisionHeight: int – default: 5 – Property divisionHeight defines how long to be each of the divisions

divisionWidth: int – default: 1 – Property divisionWIdth defines how width to be each of the divisions

titleDivisionHeight: int – default: 9 – Property titleDivisionHeight defines how long to be each of the title divisions

titleDivisionWidth: int – default: 1 – Property titleDivisionWidth defines how width to be each of the title divisions

margin: int – default: 0 – Property margin defines difference bethween ruler divisions and ruler border. Leave 0 (default) to start every time immediate from ruler border

titleMargin: int – default: 0 – Property titleMargin defines difference bethween ruler title divisions and ruler border. Leave 0 (default) to start every time immediate from ruler border

titles: array – default: [] – Property titles contains titles text which will be written above the title divisions to indicate Measure, DateTime or what user need to show on ruler. This property can be used if type option is set to custom

titlesDistance: int – default: 25 – Property titlesDistance indicates distance (in pixels) bethween title text and ruler border

titlesDiverge: int – default: 0 – Property titlesDiverge indicates how pixels from center (according title division) to be title text diverged

subtitles: array – default: [] – Property subtitles contains subtitles text which will be written above the titles text. This property can be used if type option is set to custom

subtitlesDistance: int – default: 40 – Property subtitlesDistance indicates distance (in pixels) bethween subtitle text and ruler border

subtitlesDiverge: int – default: 0 – Property subtitlesDiverge indicates how pixels from center (according title division) to be subtitle text diverged

side: string (inner/outer) – default: “inner” – Property side indicates in which side of the ruler to be the units drawn

direction: string (vertical/horizontal) – default: “vertical” – Property direction indicates are we attend to write vertical or horizontal ruler

type: string (custom/pixel) – default: “custom” – Property type indicates what kind of ruler we are attend to draw (custom or pixel). – pixel ruler will automatically measure pixels on itself in dependenxe of step and size (width: if horizontal or height: if vertical) – custom ruler will measure what is provided in titles and subtitles