You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[jQuery.dimensions](http://donejs.com/docs.html#!jQuery.dimensions) overwrites `$.fn.innerWidth`, `$.fn.outerWidth`, `$.fn.innerHeight`, `$.fn.outerHeight` and enables `$.fn.animate` to animate these values. Inner dimensions include the padding where outer dimensions also take care of borders and margins (if *includeMargin* is set to `true`). Set and read these values using:
177
-
178
-
*`$(el).innerHeight([height])`
179
-
*`$(el).outerHeight([height], [includeMargin])`
180
-
*`$(el).innerWidth([width])`
181
-
*`$(el).outerWidth([width], [includeMargin])`
182
-
183
-
And use `$(el).animate({ innerHeight : 100 })` to animate them. This is useful when you care about animating/setting the visual dimension of an element (which is what you typically want to do):
184
-
185
-
{% highlight javascript %}
186
-
$('#foo').outerWidth(100).innerHeight(50);
187
-
$('#bar').animate({ outerWidth: 500 });
188
-
{% endhighlight %}
189
-
190
-
The following example lets you change the different width properties used by `$(el).innerWidth([width])` and
191
-
`$(el).outerWidth([width], [includeMargin])` like margin, padding and border and shows how it influences the other
[jQuery.styles](http://donejs.com/docs.html#!jQuery.styles) adds `$.fn.styles` as a fast way of getting a set of computed styles from an element. It performs much faster than retrieving them individually e.g. by using [jQuery.css()](http://api.jquery.com/css/). Computed styles reflect the actual current style of an element, including browser defaults and CSS settings.
330
-
331
-
{% highlight javascript %}
332
-
$("#foo").styles('float','display')
333
-
// -> { cssFloat: "left", display: "block" }
334
-
{% endhighlight %}
335
-
336
-
The following example implements a `fastHeight` jQuery plugin which uses `$.fn.styles` to calculate the element height and compares
337
-
the runtime to the equivalent [jQuery.height](http://api.jquery.com/height/):
The `resize` event makes creating application like layouts a lot easier. The following example creates a common layout with top, left, right and center elements within a container. Use the blue square to resize the outside container. The `resize` event will take care of adjusting the dimensions of the inside elements accordingly using the [jQuery.dimensions](#dimensions) plugin:
599
+
The `resize` event makes creating application like layouts a lot easier. The following example creates a common layout with top, left, right and center elements within a container. Use the blue square to resize the outside container. The `resize` event will take care of adjusting the dimensions of the inside elements:
0 commit comments