|
|
|
|
Issue #126 (scrollHeight, JS Libs, Sass Tools, Text Editors)12/17/15
Every HTML element has a read-only scrollHeight property that gives you the height of the element's content including non-visible content that's clipped vertically because of overflow set to hidden or auto in the CSS.
It looks like this:
|
var shValue = el.scrollHeight;
|
The JavaScript alone is not that interesting. It needs to be combined (as mentioned) with some CSS so you can see the values that result. This JS Bin demo has 4 div elements with varying heights and content, a few clipped with hidden/auto overflow.
You'll see that the 4th div has a height that's larger than the content, but the scrollHeight value is merely the height of the content (i.e. it's smaller than the defined height). Meanwhile, in the other instances, the scrollHeight value is always larger than the height of the element due to the overflow. So it's the content that determines scrollHeight, not the height set in the CSS or elsewhere. Padding is included in the height, margins are not, and (from what I can tell) setting the box-sizing to border-box doesn't affect the returned value.
MDN's page on the subject has an interesting use case with a live demo. In the demo, when the user scrolls a div to the bottom, it's assumed the content has been read. So with scrollHeight, you can (quite superficially) determine if the user has read the content. This might be used on a terms of service page. If there's no scroll, then you know the user hasn't read it all (although there's obviously no guarantee, this is just theater).
As always, the best thing about this is that it's cross-browser, supported everywhere including back to IE8.
Now on to this week's tools!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Libraries and Frameworks
Template7
"A mobile-first JavaScript template engine with Handlebars-like syntax... It is ultra lightweight (around 1KB minified and gzipped) and blazing fast (up to 2-3 times faster than Handlebars in mobile Safari)."
Maperial
A free JavaScript API to create dynamic maps for your web applications. Configure your own set of layers and parameters to visualize, analyze, and understand your data.
allegro.js
An HTML5 game-building library that lets you create browser based games for any device including smart TVs.
Oracle JET
"JavaScript Extension Toolkit (JET) empowers developers by providing a modular toolkit based on modern JavaScript, CSS3 and HTML5 design and development principles."
re-base
"A Relay inspired library for building React.js + Firebase applications."
Grommet
"The most advanced open source UX framework for enterprise applications."
Popmotion
"Used to drive the motion of a user interface. It has native support for CSS, DOM attributes, SVG and SVG paths, and can be used with any API that accepts numerical values."
Rune.js
"For programming graphic design systems with SVG in the browser or node.js. It features a chainable drawing API, an unobtrusive scene graph, and a range of features aimed specifically at graphic designers."
Marko
"A fast and lightweight HTML-based templating engine that compiles templates to readable Node.js-compatible JavaScript modules, and it works on the server and in the browser."
FOAM
"An open-source modeling framework developed at Google. With FOAM, you create a model, and FOAM can support many features based on it."
Taucharts
"Flexible JavaScript charting library for data exploration."
IoT.js
"A framework for Internet of Things." From the developers at Samsung.
Sass Tools
Gridle
An Sass-based grid system that attempts to include all the best features from other grids systems into one customizable, powerful tool.
Avalanche
"Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system."
Ayre
A responsive Sass grid system. A cool feature of the home page is the ability to manually resize the grid examples, so you can immediately see how well they work.
Scooter
"An SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox."
Sass Prof
"A code profiler for Sass. For each @function, @mixin, @include and $variable, Sass Prof will show its execution time, which file called it and what arguments were given when it was called."
Motion UI
"A Sass library for creating flexible CSS transitions and animations." Now part of the newly-released Foundation 6.
sass-vertical-rhythm
"A technique used to create vertical rhythm based on a base unit value."
sass-svg
"Inline SVG for Sass."
Sass Lint
"A Node-only Sass linter for both sass and SCSS syntax."
Sassport
"Sass with JavaScript superpowers."
Text Editors and Code Playgrounds
AIDE Web
A web editor and integrated IDE for developing websites with HTML, CSS, and JavaScript directly on your Android device.
Photon
"The fastest way to build beautiful Electron apps using simple HTML and CSS."
HTMLhouse
A really simple HTML code-publishing playground. Kind of like if CodePen stopped taking steroids or something.
Caret
A Markdown editor for Mac, Windows, and Linux.
Bootstrap Studio
"A powerful web design tool for creating responsive websites using the Bootstrap framework."
Kakoune
A Vim-inspired, keystroke-efficient, multi-featured code editor.
A Tweet for Thought
Is it wrong that I agree with this?
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...
Pearl Boy is a fantastic demo built with Goo Engine, a WebGL library.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
