12
May/091
May/091
Setting an Element’s Outer Size
When setting an element’s width or height you are setting the inner-most width and height, without taking in to account the padding, border, or margin. When writing application-like web sites this is not the behavior you want – usually you want exact control of the entire width and height of the element. Here’s a very simple jQuery plugin that I wrote to make this very easy to do.
jQuery.fn.setOuterWidth = function( newWidth ) {
var difference = this.outerWidth(true) - this.width();
return this.width( newWidth - difference );
};
jQuery.fn.setOuterHeight = function( newHeight ) {
var difference = this.outerHeight(true) - this.height();
return this.height( newHeight - difference );
};
var difference = this.outerWidth(true) - this.width();
return this.width( newWidth - difference );
};
jQuery.fn.setOuterHeight = function( newHeight ) {
var difference = this.outerHeight(true) - this.height();
return this.height( newHeight - difference );
};
Then all you have to do is use obj.setOuterWidth(…) instead of obj.width(…) to resize the entire element.
Comments (1)
Trackbacks (0) ( subscribe to comments on this post )
Leave a comment
No trackbacks yet.
Iron Man
Planet Perl Iron Man Posts
- 学生諸君、Perlを勉強したまえ（ただし書き付き）
- Perl, PHP, corporate – continued.
- Doxygen を github-pages にあげるのをお気楽にやる方法
- The consequences of inclimate weather –or– Take an interest
- Pod パーザいろいろ
- Task::Kensho - Die besten CPAN-Module ausgewählt von der Enlightened Perl Organization
- on testing
- Heavy Boots of Lead
- Advanced Benchmark Analysis II: Probing strengths and weaknesses
- Ironboy is coming soon
6:07 am on February 3rd, 2010
thanks so much for this. i have been pulling my hair out trying to get outerHeight() to work properly… it just wouldnt… and this (and a small revalation) means i can FINALLY move on! nice! :)