|
|
|
|
Issue #91 (getClientRects(), JS Utils, Media, Productivity Tools)04/16/15
Way back in issue #5, I discussed the getBoundingClientRect() method, which exposes some interesting properties. Mainly this is used to check the position or dimensions of a block-level element on the page.
But there could be a rare case where you want to get the full width of an inline element. That is, the width of the element as if it were not broken up into multiple lines. If you use getBoundingClientRect(), you'll get the full width of the element as it appears on the page, but that might not be what you want.
Instead, we can use getClientRects(), a related method that exposes the same properties as getBoundingClientRect(), but in this case the method will return as many CSS border box elements as the element contains, with properties for each. A block element will only contain one border box, but an inline element that spans multiple lines can contain two or more.
So, using getClientRects() we can construct a function that gets the expanded width of the inline element, as if it were stretched out on a single line:
function getInlineWidth(el) {
var final = 0;
for (i = 0; i < el.getClientRects().length; i++) {
final += el.getClientRects()[i].width;
}
// return or output the "final" value
}
|
(Demo on JS Bin)
In the demo page, click one of the two buttons to display the width of each of the two example span elements in the paragraph. Notice that the values change slightly when you adjust the frame width. This seems to be caused by the way the browser is wrapping the words, with slight variation in their position on the page.
As mentioned, getClientRects() returns a collection of all the border boxes associated with that element. So if the span element wraps onto 4 lines, there will be 4 boxes. In the function, I'm looping through each of the elements and adding up the widths of all the boxes to get the full width.
There probably will not be many cases where you'll need to get such a value, but this is one way to do it. I'm not sure if there is another way, but that's what I've come up with.
See the getClientRects() article on MDN for more info.
Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Now on to this week's tools!
JavaScript Utilities and Mini Libraries
Rangy
"A cross-browser JavaScript range and selection library."
Dom Animator
"Used to show small ascii animations within comments in your dom. It's a little easter egg for anyone inspecting your code."
Calendar Base
"Base methods for generating calendars using JavaScript."
xr
"Ultra-simple wrapper around XMLHttpRequest."
underline.js
"Sets out to do one simple job: draw and animate the most perfect and playful text underline."
Sortable
"For reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap."
reGrid.js
"For in-browser design and general front end development. reGrid.js overlays the fluid grid you specify for each viewport width."
trayballoon
API for inserting a "tray balloon" in the system tray on Windows.
wheelnav.js
"Animated JavaScript navigation component based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more."
Fuel UX
"Extends Bootstrap with additional lightweight JavaScript controls for your web applications."
Multimedia Tools
Epic Favicon Generator
Generate 20 favicon sizes, 21 icons, with 21 tags.
CamanJS
"(ca)nvas (man)ipulation in JavaScript. It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques."
ngWebAudio
"AngularJS module for playing audio using the WebAudio API."
Icecomm.io
"Add serverless video chat and data transfer to your site."
amalia.js
"A new extensible and versatile HTML5 multimedia player that allows you to view any type of metadata along with your video or audio streams."
Blink-diff
"A lightweight image comparison tool."
Plyr
"A simple HTML5 media player with custom controls and WebVTT captions."
Plain Pattern
"An SVG based seamless pattern maker."
Accessible HTML5 Video Player
From PayPal. "A lightweight HTML5 video player which includes support for captions and screen reader accessibility."
Kraken.io
"A robust, ultra-fast image optimizer and compressor with best-in-class algorithms."
Productivity Tools
Duet Display
"The first app that allows you to use your iDevice as an extra display for your Mac using the Lightning or 30-pin cable."
start.me
"Personalize your start page. Have everything important available at your fingertips."
Content Parser
Removes clutter and makes article pages easier to read when browsing.
opp.io
"Made by a dedicated team that believes email is outdated and there is a better way to stay organised and communicate at work."
OpenLoopz
"Is it a task list or team chat? It's both combined."
PasteMonitor
"Watches for keywords you're interested in on Pastebin."
A Tweet for Thought
jQuery creator John Resig gives us insight into why his product is so successful.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
There are still some two-letter domains available, albeit with obscure TLDs. This page shows all of them.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
