|
|
|
|
Issue #32 (normalize() + splitText(), jQuery, Mobile, GUI)02/27/14
In most cases, a text node is counted as a single node in the DOM tree. But if you add a text node to an element as a sibling element (e.g. using appendChild()), the element will then have more than one text node:
var el = document.getElementById('el');
el.appendChild(document.createTextNode('extra text'));
console.log(el.childNodes.length); // 2
|
The log in that code would produce a length value of "2" after the text node is appended.
If you want to merge these text nodes, you can use a little-known method called normalize():
el.normalize();
console.log(el.childNodes.length); // 1
|
As shown, this would produce a length value of 1, as was the case prior to adding the second text node.
You can also use a method that is the opposite of normalize(), and that's the splitText() method:
el.firstChild.splitText(3);
console.log(el.childNodes.length); // 2
console.log(el.firstChild.nodeValue + el.lastChild.nodeValue);
|
splitText() takes an argument specifying the offset to define where to do the split.
To see these two methods in action, check out this JS Bin demo. Pay close attention to the way the HTML starts out, and how the output progresses. As for browser support, one book I own says these methods are supported in IE6-8 but other sources say they aren't. At the very least, they're supported everywhere including IE9+.
More info on normalize() and splitText() on MDN.
Now on to this week's tools!
Check out one of this week's sponsors:
jQuery Plugins
jQuery PicTip
Adds handy tooltips to your images, slideshows, sliders and more.
nanoGALLERY
Image gallery plugin that's touch enabled, responsive, multi-level navigation in albums, lightbox, many hover effects on thumbnails, image lazy load, bootstrap compatibility, and much more.
whenLive
"Allows you to define event handlers to be fired the moment a specified element becomes available within the DOM."
Fluidbox
"Replicating and improving the lightbox module seen on Medium with fluid transitions."
Tipped
Evolved from a Prototype plugin. "Takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips."
jTableScroll
"Simplifies adding both horizontal and vertical scrolling with static header and footer to any html table. It will automatically (and reactively) size to it's parent container, or a given set of dimensions."
Dyntable.js
"A funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it's not just for tables."
iCheck
"Super customized checkboxes and radio buttons for jQuery & Zepto."
Scrolld.js
"Provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values."
jQuery Responsive Tabs
A plugin to make a tab switcher responsive, changing to an accordion on smaller screens.
Clingy Footer
"Lock a fluid height footer to the bottom of the browser viewport."
Lazy Load XT
A mobile-oriented, fast, and extensible plugin for lazy loading of images/videos with built-in support for jQuery Mobile.
Adaptive Backgrounds
Extracts the dominant color from an image and applying it to the background.
Mobile and RWD Tools
Mobile phone emulator
"Enables you to test the display of your website in a cell phone terminal. Most of settings are honored: dimensions, resolutions, user agent, behavior, features..."
HTML5 Haptic Effects Library
A library that uses HTML5's Vibration API to communicate with a mobile device.
11h Re-size
A simple responsive testing tool.
RQRWD
A calculator that allows you to work out an element's width in % from px.
Slip.js
"Swiping and reordering lists of elements on touch screens, no fuss"
Mobile Detect
"A lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment."
Simple State Manager
A state manager for responsive websites that "allows you to define as many states as your site requires and allows you to have independent Enter, Leave and Resize events for each of the states."
Really Simple Responsive HTML Email Template
A starting point for creating responsive HTML emails.
Wraith
"Wraith uses either PhantomJS or SlimerJS to create screen-shots of different environments and then creates a diff of the two images, the affected areas are highlighted in blue."
Text Editors and GUI Tools
EnjoyCSS
A graphical tool for styling an element with CSS. Looks pretty good and they are currently working on fixing some bugs.
Animatron
"A simple and powerful online tool that allows you to create stunning HTML5 animations and interactive content."
editor
A simple and easy to use Markdown editor.
Asciiflow
An ascii editor to embed flow diagrams or drawings within emails, blogs, or other text-based media.
Easel
Recently acquired by GitHub, a visual tool for designing and prototyping, with Bootstrap, web fonts, and CSS3 support along with an export to HTML feature.
A Tweet for Thought
I've spoken out against ad blockers in the past. Lea Verou gives one view, based on a post by Christian Heilmann.
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...
A while back I came across Nutcache, a completely free online invoicing app. Looks pretty nice.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
