Skip to content

Commit dc64fd8

Browse files
glixglix
committed
jQuery Plugin For Responsive Text with Custom Scale Ratio Scalem
1 parent ef217eb commit dc64fd8

File tree

7 files changed

+233
-0
lines changed

7 files changed

+233
-0
lines changed

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/.npmignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/.*
2+
*.json
3+
LICENSE
4+
README.md

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/.travis.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
language: node_js
2+
script: /bin/true
3+
install: /bin/true
4+
deploy:
5+
provider: npm
6+
email: [email protected]
7+
api_key:
8+
secure: Fg/W6bkAeU7kInVYGQFWDT5/QQjk/A22YUXYGif9dUma5zx7Ulq+V+Pz68B3y/BmVnghf7XBEetDlFP5qMGMgIdZbcg8BwjRrfntK7LUBq0P1nPcuO79ZfNbIFSXjchZ1wNfu03RnrZbSSKYVj7DWEEHE0r/lK5BtAVFiJ66WPA=
9+
on:
10+
tags: true
11+
repo: thdoan/scalem
12+
all_branches: true

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Tom Doan
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Scalem JS
2+
3+
Scalem, short for __scale elements__ or slang for __scale 'em__, is a light-weight responsive text jQuery plugin inspired by [FlowType](http://simplefocus.com/flowtype/). Use it to "liquify" elements on your website so that they scale relative to the width of their parent element or, optionally, any element you specify (see Options below). Scalem is not just limited to text size—it can be used to scale any CSS style that takes a numeric unit such as px, em, or %.
4+
5+
### [See a demo »](http://thdoan.github.io/scalem/demo.html)
6+
7+
## Options
8+
9+
Options can be passed via data attributes or JavaScript (see Usage below). For data attributes, append the option name after "data-scale-", for example `data-scale-ratio="1"`.
10+
11+
Name | Type | Default | Description
12+
----------- | ------ | ------- | -----------
13+
`ratio` | number | 0.5 | Scale ratio, where 1 scales the element to 100% the width of the reference element.
14+
`reference` | string | parent | Selector to the reference element (text will scale relative to this element's width).
15+
`styles` | string | '' | Space-separated list of CSS properties to scale in addition to font-size.
16+
17+
18+
## Usage
19+
20+
```html
21+
<body>
22+
<h1>Scalable Heading</h1>
23+
<p id="txt" data-scale-ratio=".25">
24+
Scalable Text
25+
<p>
26+
<p>
27+
<button class="btn">Scalable Button</button>
28+
</p>
29+
...
30+
<script>
31+
$(document).ready(function() {
32+
// Scale heading using default options
33+
$('h1').scalem();
34+
// Scale text to 25% of the document's width using data attribute
35+
$('#txt').scalem();
36+
// Scale button to 100% the width of the <h1>, while also keeping its
37+
// border ratio and width proportionate, by passing object properties
38+
$('.btn').scalem({
39+
ratio: 1,
40+
reference: 'h1',
41+
styles: 'border-radius border-width'
42+
});
43+
}
44+
</script>
45+
</body>
46+
```
47+
48+
## Installation
49+
50+
Choose one of the following methods:
51+
52+
- `git clone https://github.com/thdoan/scalem.git`
53+
- `bower install scalem`
54+
- `npm install scalem`
55+
- [Download ZIP](https://github.com/thdoan/scalem/archive/master.zip)

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/bower.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "scalem",
3+
"description": "A lightweight jQuery plugin to make any element scalable (responsive).",
4+
"version": "1.1.0",
5+
"main": "dist/jquery.scalem.js",
6+
"license": "MIT",
7+
"ignore": [
8+
"**/.*",
9+
"*.json",
10+
"LICENSE",
11+
"README.md"
12+
],
13+
"keywords": [
14+
"jquery plugin",
15+
"jquery scalem",
16+
"fluid text",
17+
"liquid",
18+
"responsive",
19+
"scalable"
20+
],
21+
"authors": [
22+
"Tom Doan <[email protected]> (http://www.tohodo.com/)"
23+
],
24+
"homepage": "http://thdoan.github.io/scalem/",
25+
"repository": {
26+
"type": "git",
27+
"url": "git://github.com/thdoan/scalem.git"
28+
},
29+
"dependencies": {
30+
"jquery": ">=1.7.0"
31+
}
32+
}

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/dist/jquery.scalem.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*!
2+
* Scalem v1.1.0 - A responsive text jQuery plugin
3+
* Copyright 2014, Tom Doan (http://www.tohodo.com/)
4+
*
5+
* Scalem by Tom Doan is licensed under the MIT License.
6+
* Read a copy of the license in the LICENSE file or at
7+
* http://choosealicense.com/licenses/mit
8+
*/
9+
10+
(function($) {
11+
$.fn.scalem = function(oOptions) {
12+
var oSettings = $.extend({
13+
ratio: .5, /* Scale ratio (1 = 100%) */
14+
reference: null, /* Text will scale relative to this element */
15+
styles: '' /* List of styles to scale (useful for buttons) */
16+
}, oOptions),
17+
updateStyles = function(o, e) {
18+
var $o = $(o),
19+
$oP = $o.parent(),
20+
/* Create clone to get true text width */
21+
$o2 = $o.clone().css({
22+
'width': 'auto',
23+
'display': 'none',
24+
'white-space': 'nowrap'
25+
}),
26+
/* If data attribute exists, use that instead */
27+
$ref = o.getAttribute('data-scale-reference') ? $(o.getAttribute('data-scale-reference')) : $(oSettings.reference),
28+
/* Array of styles to scale */
29+
aStyles = (o.getAttribute('data-scale-styles') || oSettings.styles).split(' '),
30+
/* Scale ratio */
31+
nRatio = parseFloat(o.getAttribute('data-scale-ratio')) || oSettings.ratio,
32+
/* Reference width (set to parent width by default) */
33+
nRefWidth = ($ref.length) ? $ref.width() : $oP.width(),
34+
nTargetWidth,
35+
/* Text width */
36+
nTextWidth;
37+
// Account for scrollbar?
38+
if ($oP[0].scrollHeight>$oP.height()) nRefWidth -= 17;
39+
nTargetWidth = nRefWidth * nRatio;
40+
// Append clone to body to get inline width
41+
$o2.appendTo('body');
42+
nTextWidth = $o2.width();
43+
// Exit if something doesn't look right
44+
if (nTargetWidth === 0 || nTextWidth === nRefWidth) {
45+
$o2.remove();
46+
return;
47+
}
48+
// Scale the text! (6px is minimum font size to get accurate ratio)
49+
for (var i=Math.round((6/$o2.css('font-size', '6px').width())*nTargetWidth), o2=$o2[0]; i<nTargetWidth; i++) {
50+
// Update font-size using native method for better performance
51+
// (see http://jsperf.com/style-vs-csstext-vs-setattribute)
52+
o2.style.fontSize = i + 'px';
53+
if ($o2.width() / nRefWidth > nRatio) {
54+
$o.css('font-size', (i-1) + 'px');
55+
break;
56+
}
57+
}
58+
// Clean up
59+
$o2.remove();
60+
// Scale additional styles
61+
if (aStyles[0]) {
62+
var nScale = $o.width() / nTextWidth,
63+
oStyles = {};
64+
for (var i=0, imax=aStyles.length; i<imax; i++) {
65+
if (!aStyles[i]) continue;
66+
oStyles[aStyles[i]] = ((aStyles[i]==='width') ? nTargetWidth : Math.round(parseFloat($o.css(aStyles[i])) * nScale)) + 'px';
67+
}
68+
$o.css(oStyles);
69+
}
70+
};
71+
return this.each(function() {
72+
// This scope required for resize handler
73+
var o = this;
74+
// Update CSS styles upon resize
75+
$(window).resize(function(e) {
76+
updateStyles(o, e);
77+
});
78+
// Set font size on load
79+
updateStyles(o);
80+
});
81+
};
82+
}(jQuery));

‎jQuery-Plugin-For-Responsive-Text-with-Custom-Scale-Ratio-Scalem/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "scalem",
3+
"version": "1.1.0",
4+
"description": "A lightweight jQuery plugin to make any element scalable (responsive).",
5+
"keywords": [
6+
"jquery-plugin",
7+
"jquery scalem",
8+
"fluid text",
9+
"liquid",
10+
"responsive",
11+
"scalable"
12+
],
13+
"homepage": "http://thdoan.github.io/scalem/",
14+
"bugs": {
15+
"url": "https://github.com/thdoan/scalem/issues"
16+
},
17+
"license": "MIT",
18+
"author": "Tom Doan <[email protected]> (http://www.tohodo.com/)",
19+
"main": "dist/jquery.scalem.js",
20+
"dependencies": {
21+
"jquery": ">=1.7.0"
22+
},
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/thdoan/scalem.git"
26+
}
27+
}

0 commit comments

Comments
 (0)