|
|
|
|
Issue #86 (offsetParent, Sass & CSS Tools, JS Utils)03/12/15
(Skip to the tools section below)
| Support this week's primary sponsor: |
The offsetTop and offsetLeft properties are read-only properties available on every element on the page. These tell you the distance of an element's top-left corner from its nearest offsetParent. The offsetParent is determined by positioning in CSS and potentially due to the presence of an HTML table cell. But that's too theoretical and confusing. Let's look at an example.
Suppose we have 2 div elements and a table with a single cell. Each div and the table cell has a nested div. So we want to figure out the offsetTop or offsetLeft values of those 3 child elements. Here's how the JavaScript might look:
child.innerHTML = child.offsetLeft;
child2.innerHTML = child2.offsetLeft;
t_child.innerHTML = t_child.offsetLeft;
child.innerHTML += '<br>' + child.offsetParent.id;
child2.innerHTML += '<br>' + child2.offsetParent.id;
t_child.innerHTML += '<br>' + t_child.offsetParent.id;
|
I'm using the above snippet of code in this JS Bin demo. The "child" variables represent each of the child divs, including the one inside the table cell. In the CSS, I've varied the position property for the three parent elements, so you can see how the results vary. Try changing the position value of any of the elements in the CSS to see the offset values change.
The first three lines of code above print out the left offsets in pixels, and the last three lines print out the ID of the element that qualifies as the "offsetParent". You can see, due to the different position values, the offsetParent varies — first it's the natural parent, then it's the body element, then it's the table cell.
Here's a summary with some further points:
- Without any relative positioning in the CSS, the offsetParent is almost always the body element.
- The exception is when an element is inside a table cell, in which case the cell is the offsetParent.
- If an element is set to "display: none", its offsetParent value is null.
- offsetLeft and offsetTop are always relative to whatever element qualifies as the offsetParent.
- In WebKit and IE, an element set to "position: fixed" will have a null offsetParent value, but in Firefox this is not the case. This bug was reported back in 2008, but still isn't fixed.
- See more on all three properties in the spec.
Best to fiddle with these values in the demo, and also test with different window sizes, to get a better grasp of how these work.
Now on to this week's tools!
Sass and Preprocessor Tools
SassyFlags
"Simple Sass library for adding any flag to your website." Useful for indicating supported languages.
Sassquatch
A zero-setup, editor agnostic, Sass previewer for OSX with auto reload functionality. And the best name for a tool you'll see this year!
yy
A collection of Sass utilities (breakpoint, font, sprite, etc.)
Blackhole
"Minimalistic but flexible and powerful SCSS / CSS framework."
Skeleton-Stylus
The Stylus version of Skeleton, the popular but simple responsive boilerplate.
Grunt SassyClean
Scans a project for partials that are never imported and provides the option to automatically delete the unused partials or display the file name as a console log.
Sass Director
"Generates a shell script to build a directory structure based on your Sass manifest file."
include-media
"A Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax."
Turret
A responsive frontend framework, built with Less, to normalize styles for default HTML elements.
spaceBase
"A boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project."
font-awesome-sass-mixins
"For those of us who want to use Font Awesome without class tags and without loading every single class definition."
Simpul
A Sass and PHP boilerplate and framework. Has some very simple PHP includes to get a project started, along with a Skeleton-based grid system base.
CSS and HTML Tools
ai2html
"An open-source script for Adobe Illustrator that converts your Illustrator documents into HTML and CSS."
icono
A pure CSS, one-element-per-icon icon set.
.qube
"The styles defined in 'src/qube.css' provide you with an ideal way to create 3D CSS3 cubes that are exceptionally easy to work with and very extensible."
shade
"Mathematically derived gradient explorer." Let's you start with a base color, then you can fiddle with the HSL and gradient spread values, and grab the CSS output.
prism-treeview
A plugin for the Prism syntax highlighter, it adds a neat looking folder structure with icons to code that inputs a document structure tree.
Beetle
"A free powerful responsive and parallax HTML5 template for landing pages, blog and resume."
STRUCTURE
A declarative flexbox-based grid framework.
| E-Book Package: 70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Utilities and Mini Libraries
fetcha
"Lightweight date formatting and parsing (~1KB). Meant to replace parsing and formatting functionality of moment.js."
Turn Calendar
"A calendar-like component for AngularJS. It behaviors are very similar to Google analytics calendar, with a few extra unique options."
iFrame Resizer
"Enables the automatic resizing of the height and width of both same and cross domain iFrames to fit the contained content. It provides a range of features to address the most common issues with using iFrames."
web-animations-js
"A JavaScript implementation of the Web Animations API. It works on modern versions of all major browsers."
react-tagsinput
A React component to add "tagging" functionality (like in StackOverflow) to a web app.
FieldVal
"Multipurpose JavaScript validation library."
Awesomplete
"Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because 'datalist' still doesn’t cut it."
TheaterJS
"Typing effect mimicking human behavior." (Be aware, the demo has some flashing full page background colors).
Slugg
A small utility to make strings url safe by converting or removing symbols and special characters.
A Tweet for Thought
Does test-driven development slow you down? Sandro Mancuso doesn't think so.
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...
The internet has everything — even a Radio Shack computer catalog from 1983! The stuff in there looks amazingly ahead of its time. Hard to believe they didn't become what Microsoft and Apple are today.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
