https://github.com/bramstein/jsizes

jQuery CSS size properties plugin
https://github.com/bramstein/jsizes

Last synced: about 1 year ago
JSON representation

jQuery CSS size properties plugin

• Host: GitHub
• URL: https://github.com/bramstein/jsizes
• Owner: bramstein
• License: other
• Created: 2010-07-04T14:38:53.000Z (almost 16 years ago)
• Default Branch: master
• Last Pushed: 2018-06-21T17:37:41.000Z (almost 8 years ago)
• Last Synced: 2025-03-16T20:16:51.601Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://www.bramstein.com/projects/jsizes/
• Size: 129 KB
• Stars: 36
• Watchers: 4
• Forks: 27
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## JSizes ― jQuery extension plugin for CSS properties

JSizes is a small plugin for the [jQuery JavaScript library](http://jquery.com/) 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.

    

    
maxSize()

    
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.

    

    
maxSize(value)

    
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.

    

    
margin()

    
Returns the CSS `margin` property of the first matched element as pixel values in an object with `top`, `bottom`, `left`, and `right` properties.

    

    
margin(value)

    
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.

    

    
padding()

    
Returns the CSS `padding` property of the first matched element as pixel values in an object with `top`, `bottom`, `left`, and `right` properties.

    

    
padding(value)

    
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.

    

    
border()

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

    

    
border(value)

    
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.

    

    
isVisible()

    
Returns true if the any of the matched element are visible, false otherwise.



## 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.