Issue #18 (JS Libraries and Frameworks)11/21/13
Using jQuery, there are different ways to get the height and/or width of an element. First, you can use .width() or .height():
var elWidth = $('#example').width();
var elHeight = $('#example').height();
And you can use the same methods to set them:
Simple. and you probably already knew those.
However, the values that are returned when you get the width or height do not include padding, borders, or margins. Let's remedy that by using two different methods to get the values:
var elWidth = $('#example').innerWidth();
var elHeight = $('#example').innerHeight();
Using .innerWidth() and .innerHeight, the values returned will include any applicable padding on the elements. These methods can only be used to get, not to set the dimensions.
There's also the .css() method:
var elWidth = $('#example').css('width');
var elHeight = $('#example').css('height');
The difference in this case is that these methods will always return the width and height as a px value (not a number like the others mentioned here), and they're always irrespective of padding, borders, or margins. And of course, you can use these to set the width/height.
In addition to those, there's also .outerWidth() and .outerHeight():
var elWidth = $('#example').outerWidth();
var elHeight = $('#example').outerHeight();
These do the same thing as the 'inner' counterparts, with the difference being that they will add any specified border widths to the returned values and they optionally take a single Boolean argument to include any applicable margins:
var elWidth = $('#example').outerWidth(true);
var elHeight = $('#example').outerHeight(true);
There is one important factor to consider here: When the box-sizing property is present, the results will vary depending on its value.
And as an even further quirk here, if you use jQuery prior to version 1.8, you'll notice that the .css() method has different results with box-sizing on/off. That is, it will be the same as using .width() and .height() except with px values.
To demonstrate all these methods with and without box-sizing present, I've set up the following JS Bin demo. Use the "toggle..." button at the top to disable/enable box-sizing, then notice the different values that are outputted on the page for each separate width/height method.
For further details on all these methods, check out the jQuery documentation.
Now on to this week's roundup of libraries and frameworks!
"Gives structure to client-side web applications by bringing a complete build system with a a rich API similar to Backbone.js."
"Makes working with your SVG assets as easy as jQuery makes working with the DOM."
"Offers a striking range of user interface widgets that cover the most required elements of enterprise apps." Widgets include data tables, charts, accordions, windows, toolbars, and much more.
Answer some questions and this info-tool by Garann Means will tell you which template engine (Mustache.js, Hogan.js, etc.) is right for your project.
This looks cool. It's "a client-side administration framework for interacting with your backend." It's a self-contained Ember.js application and its back-end agnostic.
A DOM manipulation library that "lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code."
A fork of Underscore.js, this is a "utility library delivering consistency, customization, performance, & extras."
"An opinionated, battle-tested Backbone + Handlebars framework to build large scale web applications."
A set of jQuery plugins for front-end development of data driven web applications, featuring a number of common UI widgets for layouts, grids, toolbars, forms, and more.
"A minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications."
Full-featured, testable OOP with distinct features that set it apart from other well-known libraries.
"A set of components designed to solve common web application problems with a simplistic API. Amplify's goal is to simplify all forms of data handling by providing a unified API for various data sources."
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
3 CSS E-Books for $7!
To help Web Tools Weekly stay ad free, you can offer support:
Suggestions, corrections, improvements? Feel free to reply to this email.
Before I Go...
Thanks to all for subscribing and reading!