|
|
|
|
Issue #62 (compareDocumentPosition(), CSS/HTML, JS Libs, Content)09/25/14
There's a somewhat complex but useful DOM method called compareDocumentPosition() that lets you compare the position of a specific node in a document with the position of another node.
Suppose we have the following HTML:
<div id="one">
<div id="two">
</div>
</div>
|
Assuming these elements are inside a regular HTML page, we can run the following checks using compareDocumentPosition():
var one = document.getElementById('one'),
two = document.getElementById('two'),
head = document.getElementsByTagName('head')[0],
body = document.getElementsByTagName('body')[0];
if (one.compareDocumentPosition(two) === 20) {
console.log('one contains two');
}
if (head.compareDocumentPosition(body) === 4) {
console.log('head precedes body');
}
|
(Demo) As you can see, the compareDocumentPosition() method is called on one node and then another node is passed in as the only argument. The return is compared to an integer, which is actually something called a bitmask. A bitmask, as explained by John Resig is "a way of storing multiple points of data within a single number".
In that example, I'm testing the position of the "one" element in comparison to the "two" element, but I'm also checking the position of the head element in comparison to the body. This can be done with any elements, these are just examples.
The possible return values for this method are shown in the list below, with the numbers representing the values you'd test against:
- Node.DOCUMENT_POSITION_DISCONNECTED: 1
- Node.DOCUMENT_POSITION_PRECEDING: 2
- Node.DOCUMENT_POSITION_FOLLOWING: 4
- Node.DOCUMENT_POSITION_CONTAINS: 8
- Node.DOCUMENT_POSITION_CONTAINED_BY: 16
- Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
You'll notice in the code example above, I checked for a value of "20", which is not in the list above. This is because a node that contains another node also precedes that node, so it gets a value of 16 + 4 (a combination of two of the above).
It's kind of bizarre, to be honest, but to fully understand this method, you just have to fiddle around with the values and do a number of different tests. I think this method could come in handy if you want to check if some user-generated or dynamically-generated HTML is well-formed, or if it complies with some set of standards. This is an old method, so browser support seems to be full, including old IE.
More info:
Now on to this week's tools!
CSS and HTML Tools
time-elements
"Web component extensions to the standard <time> element."
Takana
"Lets you see your SCSS and CSS style changes live, in the browser, as you type them."
classname-audit
Node-based command-line tool to audit the class names of a website via a crawl.
Email Template Builder
"Build a free HTML email template in 60 seconds."
Dimensions
Chrome extension to help you measure anything on the screen.
Map Glyphs
"Hundreds of scalable vector map icons of the world, continents, globes, countries and states."
Animsition
"A simple and easy jQuery plugin for CSS animated page transitions."
DoCSSa
Deferred Object CSS Architecture is "a CSS architecture and methodology that aims to combine all the good parts of the current state of the art."
Flexbox Grid
"A grid system based on the flex display property."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
JavaScript Libraries and Frameworks
Kata
A JavaScript JSON templating engine.
DeLorean.js
"A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily."
Regular
A concise, flexible framework for creating data-driven components using the MVVM pattern.
Satellizer
"A simple to use, end-to-end, token-based authentication module for AngularJS with built-in support for Google, Facebook, LinkedIn, Twitter authentication providers, plus Email and Password sign-in."
amCharts
A really nice, advanced charting library that creates beautiful and interactive charts, with no dependencies.
AngularStrap
"A set of native directives that enables seamless integration of Bootstrap 3.0+ into your AngularJS 1.2+ app."
CutJS
"Lightweight, fast, interactable 2D HTML5 rendering engine for cross-platform game development, it can be used for creating games for web, iOS, Android, Win8, Facebook, Chrome Web Store, etc."
seen.js
"Render 3D scenes into SVG or HTML5 Canvas."
polyfill
"A polyfill combinator. Polyfill makes web development less frustrating by selectively polyfilling just what the browser needs. Use it on your own site, or as a service."
Proton.js
"A tiny framework for writing inheritance in JavaScript."
Documents, Content, Files, etc.
Smallpdf
A host of PDF-related tools -- compress, convert, merge, split, unlock, and more.
MakeDrive
"A cloud-based Dropbox® equivalent for browser filesystems. Designed for use with Mozilla Webmaker tools and services."
.dbignore
".gitignore for Dropbox."
sheetlabs
"Turn spreadsheets into well-documented APIs, quickly and easily."
Brace Data
"Use Google Spreadsheets as your CMS. Display your spreadsheet data however you like right on your static site."
Poetica
A collaborative writing platform.
EtherCalc
A collaborative web spreadsheet service with no signup required.
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Accessibility expert Steve Faulkner has some advice on the use of semantic elements and ARIA roles.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Leave it to the developers from The Onion to come up with this doozie of a library.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
