|
|
|
|
Issue #74 (Inline CSS methods, JS Utils, Mobile)12/18/14
Support one of this week's sponsors (via Syndicate):
 |
Fix incidents faster by reducing your response time.
PagerDuty is an operations performance platform that sits at the heart of your systems and helps you solve problems faster. Integrate all your monitoring tools for complete operations visibility, and customize on-call schedules and alerting methods, so that the right people are notified when something breaks. Try PagerDuty free. |
The DOM has three CSS-related methods that apply to the style object that maybe you've never seen before. They are: setProperty(), removeProperty(), and getPropertyValue(). As is always true of the style object, the use of these methods is pretty limited because these only deal with inline styles, not styles set in a style element or in an external stylesheet.
The methods are pretty self-explanatory, and you'll notice they bear some resemblance to jQuery's CSS-specific features. Let's see examples of each one in use.
To set or remove the value on a property as an inline style, we use setProperty() and removeProperty():
el.style.setProperty('background-color', 'blue');
el.style.removeProperty('margin');
|
As you can see, to define the property, we just include it as the first argument to the setProperrty() method, which needs to be called on the style object, not on an element directly. The value is the second argument. Removing a property requires only a single argument, the property we want to remove.
Note that the way we reference the properties here is different from how we reference them when using them directly on the style object. On the style object, we have to remove the hyphen and camel-case the property name, whereas here we use the standard CSS name for it.
Finally, there's the getPropertyValue() method, which might be a little more useful than the others. This one allows you to get the current value of a specific property that's set as an inline style:
console.log(el.style.getPropertyValue('padding-top'));
|
Because this method reads the property's value, we're logging the result. Similar to the other methods, we just pass the CSS property name as the lone argument.
Here's a full JS Bin example that lets you apply these methods by clicking the buttons on the page, allowing you to see the results applied to the elements visibly. These methods are supported in all browsers, including IE9+. Here's more info on Microsoft's IE Dev Center pages:
Now on to this week's tools!
JavaScript Utilities and Mini Libraries
decimal.js
"An arbitrary-precision Decimal type for JavaScript."
bigpicture.js
"Allows infinite panning and infinite zooming in HTML pages."
thaw.js
"Browsers are synchronous. They have limits and can be slow. thaw.js defers processes until the browser is ready for them."
Handsontable
"A minimalist Excel-like data grid editor for HTML and JavaScript."
secStore.js
"Encryption enabled browser storage."
Tweene
Not an animation library, but animation proxy, used as a wrapper for your chosen library.
better-details-polyfill
An attempt to create a better, more complete, cross-browser polyfill for HTML's details element.
JSCalc
"Makes it easy to create a custom online calculator by writing a JavaScript function that transforms inputs into outputs."
ParseHumanDate.js
"A Javascript library to parse human readable dates and times."
progressbar.js
"Beautiful and responsive progress bars."
http.js
"Provides a super simple, super easy way to make Ajax/HTTP requests. It's basically a few tiny functions to simplify XMLHttpRequest calls."
Chroma.js
"A tiny JavaScript library (8.5kB) for all kinds of color conversions and color scales."
Inverse.js
A dead-simple JavaScript Inversion of Control container in 50 lines.
LokiJS
"Lightweight JavaScript in-memory database."
RWD and Mobile Tools
interact.js
"JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+)."
Hippo
"Create incredible content for more web browsers and more devices than any other HTML5 animator. Professional software for building powerful animation, complex games, presentations, apps and multimedia websites."
Swing
"A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others."
Webydo
Online code-free tool to create cross-platform, responsive websites using an in-browser, drag-and-drop interface.
Foto
A srcset alternative, to help you to load images on your responsive websites based on the screen width of the user's device.
Wormhole
A Yeoman generator for scaffolding responsive multi-page web apps and websites.
Mootor Framework
A minimalist HTML5 framework for mobile app development.
Fabric
A modular, cross-platform mobile development suite that helps you solve many of the challenges faced with mobile app development, testing, onboarding users, monetizing, and more.
imagefill.js
"jQuery plugin for making images fill their containers (and be centered)."
Documents, Files, and Content
Charted
Beautiful, automatic charts. Just paste a link to a .csv file or Google spreadsheet.
doks
"A configurable, bring-your-own-template documentation generator aimed for user and developer documentation based on source code."
ParseHub
"Turn dynamic websites into APIs. You can extract data from anywhere. ParseHub works with single-page apps, multi-page apps and just about any other modern web technology."
Pulse
Native app to "synchronise your files without also sharing them with a stranger in the cloud."
raven
"A minimal, distraction-free text editor with good typography."
Writefull
A Mac and Windows app "that provides feedback on your writing. You can select a piece of text in any writing tool (from Microsoft Word to Gmail) and a small popover will appear above your selected text."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Chris Dixon shows us that not only is Mobile media consumption on the rise, but it seems it's the only form of media consumption that's not in decline.
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...
You might want to check out John Resig's post documenting what are the lowest cost domain registrars with WHOIS privacy.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
