JQuery Photoshop Type Ruler

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

JQuery Photoshop Type Ruler
mikethedj4
View it in action - http://codepen.io/mikethedj4/pen/dJbvc/
Available on Github - https://github.com/mikethedj4/jquery-ruler

Here's a screenshot of the ruler in action...
redesign.png
HTML
Code: Select all
<div class='ruler'></div>
I decided to learn how to do this without the need for a plugin. So enjoy!

CSS
Code: Select all
body {
    background: #aaa;
}

.ruler {
    position: absolute;
    top:0; left:0;
    width: 100%; height: 25px;
    background: #eee; color: #000;
    font-family: arial;
    font-size: 12px; line-height: 14px;
    border-bottom: 1px solid;
    overflow: hidden;
}
.ruler > div {
    display: inline-block;
    background: #000;
}
.ruler .tickLabel {
    position:relative;
    top: -10px;
    margin-left: 4px;
    width: 1px;
    height: 100%;
    text-indent: 1px;
    line-height: 20px;
}
.ruler .tickLabel:first-of-type {
    margin-left: 0px;
}
.ruler .tickMajor {
    margin-top: 19px;
    margin-left: 4px;
    width: 1px;
    height: 6px;
}
.ruler .tickMinor {
    margin-left: 4px;
    width: 1px;
    height: 4px;
}
JS/JQuery
Code: Select all
$(window).on('load resize', function() {
    $('.ruler').empty();
    createRuler(); 
});

function createRuler() {
    var $ruler = $('.ruler');
    for (var i = 0, step = 0; i < $ruler.innerWidth() / 5; i++, step++) {
        var $tick = $('<div>');
        if (step == 0) {
            $tick.addClass('tickLabel').html(i * 5) ;
        } else if ([1, 3, 5, 7, 9].indexOf(step) > -1) {
            $tick.addClass('tickMinor');
            if (step == 9) {
                step = -1;
            }
        } else {
            $tick.addClass('tickMajor');
        }
        $ruler.append($tick);
    }
}
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Tutorials”