bramstein / jsizes

jQuery CSS size properties plugin

JSizes ― jQuery extension plugin for CSS properties

JSizes is a small plugin for the jQuery JavaScript library which adds convenience methods for querying and setting the CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties. Additionally it has one method for determining whether an element is visible. In total it adds six new methods to the jQuery element API. It internally calls the jQuery built-in css method, so syntax and use is identical to calling css('property-name', ...). An example of its use follows.

jQuery(function($) {
   var myDiv = $('#myDiv');

   myDiv.minWidth(100); // set 'min-width' to 100px
   alert(myDiv.minWidth()); // displays '100'
});

Note that all returned values are converted to pixel values, without the px suffix. It is thus safe to use these methods in calculations without having to worry about non-numeric values. Most importantly, it does not add support for min- and max-sizes on browsers that do not natively support it, it just adds convenient methods to query these properties and return a sensible value when they are not available or not set.

API

The plugin adds the following methods to the JQuery object:

minSize()

Returns the CSS `min-width` and `min-height` properties of the first matched element as pixel values in an object with `width` and `height` properties. If a CSS property is not set `0` is returned as value.

minSize(value)

Sets the CSS `min-width`, and `min-height` property on all matched elements. Expects a value object containing any of `width` and `height` properties. If the property values are numbers they will be converted to pixel values.

<dt>maxSize()</dt>
<dd>Returns the CSS `max-width` and `max-height` properties of the first matched element as pixel values in an object with `width` and `height` properties. If a CSS property is not set `Number.MAX_VALUE` is returned as value.</dd>

<dt>maxSize(value)</dt>
<dd>Sets the CSS `max-width` and `max-height` property on all matched elements. Expects a value object containing any of `width` and `height` properties. If the property values are numbers they will be converted to pixel values.</dd>

<dt>margin()</dt>
<dd>Returns the CSS `margin` property of the first matched element as pixel values in an object with `top`, `bottom`, `left`, and `right` properties.</dd>

<dt>margin(value)</dt>
<dd>Sets the CSS `margin` property on all matched elements. Expects a value object containing any of `top` , `bottom` , `left` , and `right` properties. If the property values are numbers they will be converted to pixel values.</dd>

<dt>padding()</dt>
<dd>Returns the CSS `padding` property of the first matched element as pixel values in an object with `top`, `bottom`, `left`, and `right` properties.</dd>

<dt>padding(value)</dt>
<dd>Sets the CSS `padding` property on all matched elements. Expects a value object containing any of `top`, `bottom`, `left`, and `right` properties. If the property values are numbers they will be converted to pixel values.</dd>

<dt>border()</dt>
<dd>Returns the CSS `border-*-width` property of the first matched element as pixels values in an object with `top`, `bottom`, `left`, and `right` properties.</dd>

<dt>border(value)</dt>
<dd>Sets the CSS `border-*-width` property on all matched elements. Expects a value object containing any of `top`, `bottom`, `left`, and `right` properties. If the property values are numbers they will be converted to pixel values. Note that the CSS `border-style` property also needs to be set in order for the border to show.</dd>

<dt>isVisible()</dt>
<dd>Returns true if the any of the matched element are visible, false otherwise.</dd>

Examples

Some examples of how the new methods can be used:

jQuery(function($) {
   var myDiv = $('#myDiv');

   // set margin-top to 100px and margin-bottom to 10em
   myDiv.margin({top: 100, bottom: '10em'});

   // displays the size of the top border in pixels
   alert(myDiv.border().top);

   // displays true if the element is visible, false otherwise
   alert(myDiv.isVisible());

   // set padding-right to 10px and margin-left to 15px using chaining
   myDiv.padding({right: 10}).margin({left: 15});
});

The above example also shows that chaining can be used on methods that do not return values.

Credits

• John Bowers ― Setting values to zero bug fix.

jsizes's Issues

Uncaught type error, jquery 2.0.3

I'm new to JQuery, so this might be trivial, but I attempted to use the .padding().top values and received the following error:

Uncaught TypeError: Cannot use 'in' operator to search for 'paddingTop' in undefined jquery-2.0.3.min.js:5

At jquery-2.0.3.min.js:5
x.extend.css jquery-2.0.3.min.js:5
(anonymous function) jquery-2.0.3.min.js:5
x.extend.access jquery-2.0.3.min.js:4
x.fn.extend.css jquery-2.0.3.min.js:5
$.fn.(anonymous function) jquery.sizes.js:70

No license included in repository

Hi @bramstein,

Would you consider adding a license to the repository? It's currently missing one and according to TOS:

[Not posting a license] means that you retain all rights to your source code and that nobody else may reproduce, distribute, or create derivative works from your work. This might not be what you intend.

Even if this is what you intend, if you publish your source code in a public repository on GitHub, you have accepted the Terms of Service which do allow other GitHub users some rights. Specifically, you allow others to view and fork your repository.

If you want to share your work with others, we strongly encourage you to include an open source license.

If you don't intend on putting a license up that's fine, but if you do want to use an open source license please do so. I'd be happy to fork/PR for you if you just let me know which license you want to put in (MIT/BSD/Apache/etc.)

Thanks!

RequireJS

As-salamu-alikum

I am using jquery.sizes with RequireJs. My config file is as follows

requirejs.config({
    baseUrl: "assets/js/",
    paths: {
				"jquery"        		        : "lib/jquery/jquery",
				"jqui"      			        : "lib/jquery/jquery-ui-1.10.4",
				"jlayout"        		        : "lib/jquery/jquery.jlayout",
				"jlayout.border"		        : "lib/jquery/jlayout.border",
				"jquery.sizes"			: "lib/jquery/jquery.sizes",
				"backbone"      		        : "lib/marionette/backbone",
				"json2"       			: "lib/json2/json2",
				"backbone.radio"		: "lib/marionette/backbone.radio",
				"backbone.marionette"     : "lib/marionette/backbone.marionette",
				"marionette.toolkit"	        : "lib/marionette/marionette.toolkit",
				"underscore"        	        : "lib/underscore/underscore",
				"tpl"					: "lib/tpl/tpl"
    },
    waitSeconds: 20,
	map: {
      "*": {
				jq		:"jquery",
				bb		:"backbone",
				bbr		:"backbone.radio",
				mt		:"backbone.marionette",
				jl		:"jlayout" ,
				jlb		:"jlayout.border",
				jqs		:"jquery.sizes",
				js2		:"json2",
				tk		:"marionette.toolkit",
				us		:"underscore"
			}
		},
    shim: {
				"jqui":{
						deps: ['jq']
				},
				"jl":{
						deps: ['jq']
				},
				"jqs":{
						deps: ['jq']
				},
				"jlb":{
						deps: ['jq']
				},
				"us": {
					exports: "_"
				},
				"bb": {
					exports: ["Backbone"],
					deps: ['jq','us','js2']
				},
				"bbr":{
					exports: ["Radio"],
					deps: ["bb"]
				},
				"mt": {
					exports: "Marionette",
					deps: ["bb","bbr"]
				},
				"tk": {
					exports: "Toolkit",
					deps: ["mt"]
				}
    },
    deps: ['app/main']
});

I am getting the following error

Uncaught ReferenceError: jQuery is not defined
at jquery.sizes.js:77

Please help me to fix the problem.

Zazakllah khair for reading.

Nadvi