Skip to content
Browse files

added options hash, added specifying center point, updated documentat…

…ion and demo
  • Loading branch information...
1 parent b0c0304 commit 1bc30ab046ed18af44c572eab4de3f06882b9236 @talos committed Jan 16, 2012
Showing with 143 additions and 93 deletions.
  1. +41 −26 README.md
  2. +34 −21 demo.html
  3. +68 −46 jquery-rescale.js
View
67 README.md
@@ -1,27 +1,33 @@
# jquery-rescale
-This jQuery plugin arbitrarly CSS transforms elements to a specific
+This [jQuery][] plugin arbitrarly [CSS transforms][] elements to a specific
pixel size. All the contents of the element will scale with it!
+ [jQuery]: http://www.jquery.org/
+ [CSS transforms]: https://developer.mozilla.org/en/CSS/transform
+
[See it in action.](http://talos.github.com/jquery-rescale/demo.html)
### Usage
-`w` The width to scale to. Required.
-
-`h` The height to scale to. Required.
-
-`distort` Whether to allow differing x and y scale
-factors. Is true by default, meaning the element could be
-distorted. If false, the smallest of the two scales will be
-used for both axes, so that neither w or h is ever exceeded.
-
-`scaleDirection` If negative, only scaling down will be
-allowed. If greater than 0, only scaling up will be allowed.
-Otherwise, either direction is allowed. Defaults to 0.
+* `w` The width to scale to. Required.
+* `h` The height to scale to. Required.
+* `options` A JS object of options. Can be ignored. These are the options:
+
+> * `x`: The x center to scale from, as a percentage from 0
+> to 100. Defaults to 50.
+> * `y`: The y center to scale from, as a percentage from 0
+> to 100. Defaults to 50.
+> * `distort`: Whether to allow differing x and y scale
+> factors. Is true by default, meaning the element could be
+> distorted. If false, the smallest of the two scales will be
+> used for both axes, so that neither w or h is ever exceeded.
+> * `direction`: If negative, only scaling down will be
+> allowed. If greater than 0, only scaling up will be allowed.
+> Otherwise, either direction is allowed. Defaults to 0.
```javascript
- $(selector).rescale(w, h, distort, scaleDirection);
+ $(selector).rescale(w, h, options);
```
### Examples
@@ -30,23 +36,31 @@ Otherwise, either direction is allowed. Defaults to 0.
$('.rescale').rescale(100, 100);
```
-Would scale all elements with the class 'scale' to 100 by 100
-pixels. If you don't want the elements to be distorted, pass
-'false' as the distort argument:
+Would scale all elements with the class *rescale* to 100 by 100 pixels
+about their center.
+
+If you want to keep the top-left corner of the elements in the same place,
+pass `x` and `y` arguments to specify the center of scaling:
+
+```javascript
+ $('.rescale').rescale(100, 100, { x: 0, y: 0 });
+```
+
+If you don't want the elements to be distorted, specify the `distort` option.
```javascript
- $('.rescale').rescale(100, 100, false);
+ $('.rescale').rescale(100, 100, { distort: false });
```
Each element will keep its original aspect ratio, but no dimension
will exceed 100 pixels.
-If you want to only scale elements up, or only scale them down, you
-can pass a fourth argument. If it is negative, elements will only
+If you want to only scale elements up, or only scale them down,
+specify the `direction` option. If it is negative, elements will only
be scaled down:
```javascript
- $('.rescale').rescale(100, 100, false, -1);
+ $('.rescale').rescale(100, 100, { direction: -1 });
```
Any elements with both dimensions already smaller than 100 pixels
@@ -55,22 +69,23 @@ will be unmodified.
To only scale elements up, pass a positive value:
```javascript
- $('.rescale').rescale(100, 100, false, 1);
+ $('.rescale').rescale(100, 100, { direction : 1 });
```
Now, elements exceeding 100px * 100px will be unmodified, but any
smaller than that will be scaled up.
-Play around with demo.html to see it in action.
+Play around with [demo.html](http://talos.github.com/jquery-rescale/demo.html)
+to see it in action.
### Links
Fork it from:
-http://www.github.com/talos/jquery-rescale
+* <http://www.github.com/talos/jquery-rescale>
CDN it from:
-http://talos.github.com/jquery-rescale/jquery-rescale.js
+* <http://talos.github.com/jquery-rescale/jquery-rescale.js>
-http://talos.github.com/jquery-rescale/jquery-rescale.min.js
+* <http://talos.github.com/jquery-rescale/jquery-rescale.min.js>
View
55 demo.html
@@ -10,22 +10,25 @@
<style type="text/css">
body {
- font-family: Helvetica, sans-serif;
+ font-family: Helvetica, sans-serif;
+ }
+
+ input {
+ width: 5em;
}
#controls {
- border: 1px solid #aaa;
- margin: .5em;
- padding: .5em;
+ border: 1px solid #aaa;
+ margin: .5em;
+ padding: .5em;
}
.rescale {
- border: 1px solid #333;
- -moz-box-shadow: 6px 6px 6px #666;
- -webkit-box-shadow: 6px 6px 6px #666;
- box-shadow: 6px 6px 6px #666;
+ border: 1px solid #333;
+ -moz-box-shadow: 6px 6px 6px #666;
+ -webkit-box-shadow: 6px 6px 6px #666;
+ box-shadow: 6px 6px 6px #666;
}
-}
</style>
</head>
@@ -39,6 +42,12 @@
<label for="height">Height:</label>
<input id="height" name="height" type="text" value="200" />
+ <label for="x">Center X %:</label>
+ <input id="x" name="x" type="text" value="50" />
+
+ <label for="y">Center Y %:</label>
+ <input id="y" name="y" type="text" value="50" />
+
<label for="distort">Distort:</label>
<input id="distort" name="distort" type="checkbox" checked />
@@ -66,18 +75,22 @@
<script type="text/javascript">
-var rescale = function() {
- $('.rescale').rescale(
- $('#width').val(),
- $('#height').val(),
- $('#distort').is(':checked'),
- $('#direction').val()
- );
-};
-
-$('input,select').live('change', rescale);
-
-$(document).ready(rescale);
+ var rescale = function() {
+ $('.rescale').rescale(
+ $('#width').val(),
+ $('#height').val(),
+ {
+ x: $('#x').val(),
+ y: $('#y').val(),
+ distort: $('#distort').is(':checked'),
+ direction: $('#direction').val()
+ }
+ );
+ };
+
+ $('input,select').bind('change', rescale);
+
+ $(document).ready(rescale);
</script>
</body>
</html>
View
114 jquery-rescale.js
@@ -31,77 +31,99 @@
interpreted as representing official policies, either expressed or
implied, of John Krauss.
**/
-(function($) {
+
+/*globals jQuery*/
+
+(function ($) {
+ "use strict";
var properties = [
[ 'transform', 'transform-origin' ],
- [ '-ms-transform','-ms-transform-origin'], /* IE 9 */
+ [ '-ms-transform', '-ms-transform-origin'], /* IE 9 */
[ '-webkit-transform', '-webkit-transform-origin'],/* Safari and Chrome */
[ '-o-transform', '-o-transform-origin'], /* Opera */
[ '-moz-transform', '-moz-transform-origin' ] /* Firefox */
],
- len = properties.length,
+ len = properties.length,
- /**
- Construct a JS object hash that can be applied as CSS to do
- transform and transform-origin value across browsers.
-
- @param transform the value for the transform CSS property.
- @param transformOrigin the value for the transform-origin CSS
- property.
-
- @return A JS object that can be applied as CSS.
- **/
- buildCSS = function(transform, transformOrigin) {
- var memo = {},
- i = -1; // this is so much more elegant using reduce. le sigh.
- while(++i < len) {
- memo[properties[i][0]] = transform;
- memo[properties[i][1]] = transformOrigin;
- }
- return memo;
- };
+ defaults = {
+ w: 50,
+ h: 50,
+ distort: true,
+ direction: 0
+ },
+
+ /**
+ Construct a JS object hash that can be applied as CSS to do
+ transform and transform-origin value across browsers.
+
+ @param transform the value for the transform CSS property.
+ @param transformOrigin the value for the transform-origin CSS
+ property.
+
+ @return A JS object that can be applied as CSS.
+ **/
+ buildCSS = function (transform, transformOrigin) {
+ var memo = {},
+ i; // this is so much more elegant using reduce. le sigh.
+ //while (++i < len) {
+ for (i = 0; i < len; i += 1) {
+ memo[properties[i][0]] = transform;
+ memo[properties[i][1]] = transformOrigin;
+ }
+ return memo;
+ };
/**
- Scale an element to a specific width and height.
-
- @param w The width to scale to. Required.
- @param h The height to scale to. Required.
- @param distort Whether to allow differing x and y scale
- factors. Is true by default, meaning the element could be
- distorted. If false, the smallest of the two scales will be
- used for both axes, so that neither w or h is ever exceeded.
- @param scaleDirection If negative, only scaling down will be
- allowed. If greater than 0, only scaling up will be allowed.
- Otherwise, either direction is allowed. Defaults to 0.
- **/
- $.fn.rescale = function(w, h, distort, scaleDirection) {
- if(w === null || typeof w === 'undefined'
- || h === null || typeof h === 'undefined') {
+ * Scale an element to a specific width and height.
+ *
+ * @param w The width to scale to. Required.
+ * @param h The height to scale to. Required.
+ * @param options A JS object of options. Can be ignored.
+ * The following options are read:
+ * `x`: The x center to scale from, as a percentage from 0
+ * to 100. Defaults to 50.
+ * `y`: The y center to scale from, as a percentage from 0
+ * to 100. Defaults to 50.
+ * `distort`: Whether to allow differing x and y scale
+ * factors. Is true by default, meaning the element could be
+ * distorted. If false, the smallest of the two scales will be
+ * used for both axes, so that neither w or h is ever exceeded.
+ * `direction` If negative, only scaling down will be
+ * allowed. If greater than 0, only scaling up will be allowed.
+ * Otherwise, either direction is allowed. Defaults to 0.
+ *
+ * @return The elements this was called upon, allowing for chaining.
+ **/
+ $.fn.rescale = function (w, h, options) {
+ if (w === null || typeof w === 'undefined' || h === null || typeof h === 'undefined') {
return this;
}
- return $.each(this, function(i, el) {
+ var settings = $.extend({}, defaults, options);
+
+ return $.each(this, function (i, el) {
var $el = $(el),
- xScale = w / $el.width(),
- yScale = h / $el.height();
+ xScale = w / $el.width(),
+ yScale = h / $el.height();
- if(scaleDirection > 0) { // allow scaling only up
+ if (settings.direction > 0) { // allow scaling only up
xScale = xScale < 1 ? 1 : xScale;
yScale = yScale < 1 ? 1 : yScale;
- } else if(scaleDirection < 0) { // allow scaling only down
+ } else if (settings.direction < 0) { // allow scaling only down
xScale = xScale > 1 ? 1 : xScale;
yScale = yScale > 1 ? 1 : yScale;
}
- if(distort === false) {
- if(xScale > yScale) {
+ if (settings.distort === false) {
+ if (xScale > yScale) {
xScale = yScale;
} else {
yScale = xScale;
}
}
- $el.css(buildCSS('scale(' + xScale + ',' + yScale + ')', '0 0'));
+ $el.css(buildCSS('scale(' + xScale + ',' + yScale + ')',
+ settings.x + '% ' + settings.y + '%'));
});
};
-})(jQuery);
+}(jQuery));

0 comments on commit 1bc30ab

Please sign in to comment.
Something went wrong with that request. Please try again.