add responsive support for fixed width elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
easyScale.js
easyScale.min.js

README.md

easyScale

Add responsive support for fixed width elements. View example

Install

<script src="js/easyScale.min.js"></script>

Usage

HTML

<div id="foo"></div>
<div class="bar"></div>
<div id="baz"></div>

CSS

#foo, .bar, #baz {
    margin: 10px auto 10px auto;
    height: 200px;
    width: 800px;
    background-color: #56CBF9;
}

JS

$.fn.easyScale([
    { el: "#foo", minBound: [0, 0], maxBound: [1300, 500] },
    { el: ".bar", minBound: [0, 0], maxBound: [1000, 500] },
    { el: "#baz", minBound: [600, 400], maxBound: [1000, 500] }
]);

Options

  • el: required, jQuery selector string
  • minBound: required, [numberX, numberY] thereshold to stop zooming
  • maxBound: required, [numberX, numberY] thereshold to start zooming

License

MIT