|
|
|
|
Issue #40 (Mouse Coords, CSS/HTML, JS Utils, Deployment)04/24/14
Check out this week's main sponsor:
 |
WatchMeCode
Improve your JavaScript in 20 minutes or less, each week. WatchMeCode screencasts will take you to the next level with byte-sized screencasts delivered every Thursday.
Subscribe now and get your subscription for only $9/mo!
That's 35% off with discount code: webtoolsweekly. |
You can get the user's mouse coordinates in three distinct ways in JavaScript: Relative to the browser window, relative to the page, and relative to the entire screen. Let's see how we can do this in each case.
First, here is how to get the mouse coordinates relative to the browser window (or iframe window):
var op = document.getElementById('op');
function showCoords(e){
op.innerHTML = 'clientX value: ' +
e.clientX + '<br>' +
'clientY value: ' +
e.clientY;
}
document.onclick = function (e) {
showCoords(e);
};
|
And here is a demo with the body expanded vertically so you can test it with scrolling.
Using the clientX and clientY properties on the event object, we display the coordinates of the mouse on the screen when the mouse was clicked. And take note that this will be regardless of whether the page has been scrolled. For example, even if you scroll down on the page, clicking the immediate top-left corner will always return "0, 0".
But what if you want the coordinates on the page, relative to scrolling? You can replace the clientX and clientY properties with pageX and pageY. And here is a demo that again allows scrolling.
Finally, you can get the mouse coordinates relative to the entire screen by swapping out the two properties again and this time using screenX and screenY. Here is the result.
Browser support seems to be as follows:
- clientX/Y: IE8+ and others
- pageX/Y: IE9+ and others
- screenX/Y: IE8+ and others
Now on to this week's tools!
CSS and HTML Tools
Magic Animations
A library of CSS3 animations with "special effects". On page demos available for testing.
Responsive Email Patterns
"A collection of patterns & modules for responsive emails."
HTML Entity Lookup
This is really cool because you can just type a character that resembles the one you want and it will show you a bunch of similar options instantly (e.g. "o" will show you a degrees symbol, amon.
Cerburus
"A few simple, but solid patterns for responsive HTML emails. Even in Outlook."
Variance Charts
A JS library that "empowers engineers, designers, journalists, scientists, and analysts to build elegant bespoke data graphics for the web, using only HTML & CSS."
select switch
Converts HTML's select element into a "switch".
mincss
"Clears the junk out of your CSS by finding out which selectors are actually not used in your HTML."
CSS3Ps
"Free cloud based photoshop plugin that converts your layers to CSS3."
Ui Parade
"A collection of free online design apps that allow you to easily create your own ui elements with very little coding knowledge."
beautons
"A beautifully simple button toolkit" by Harry Roberts. So you know the code will be minimal and easy to use.
JavaScript Utilities and Mini Libraries
shine.js
"A library for pretty shadows" that uses CSS text/box shadow and offers dynamic light positions, customizable shadows, no library dependencies, and AMD compatible.
ipinfo.io
"IP lookup API to quickly and simply integrate IP geolocation into your script or website. Save yourself the hassle of setting up local GeoIP libraries and having to remember to regularly update the data."
GridList
Drag and drop library for two-dimensional, resizable and responsive grid-based lists.
Cookies.js
"A small client-side javascript library that makes managing cookies easy."
Font-To-Width
"Takes advantage of large type families to fit pieces of text snugly within their containers. Unlike other text-fitting tools..., Font‑To‑Width does not scale the font-size (at least not by default)."
Sticker.js
A mini library that allows you to create a sticker effect, with no dependencies.
xss.js
"Simple whitelist-based html sanitizer inspired by the SanitizationFilter in GitHub's html-pipeline library."
eu-cookie-law
"Helping webmasters comply with the EU cookie law... By using this script, webmasters can add all their cookie-dependent code in just one place: doConsent()."
Deployment, Testing, Minify Tools, etc.
Dirty Markup
"DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”."
lazy assets
"An opinionated and simple build-system approach."
dploy
"Deploy your apps from GitHub, Bitbucket or your own repositories to one or many servers in one click."
dependency-orderer
A node module that "takes your bower.json/package.json/etc file and returns an array of the order in which the dependencies need to be included in your project."
Fez
"An über fast, highly configurable, extremely powerful, and somewhat weird general purpose build tool written in JavaScript."
Broccoli
"Browser compilation library – a build tool for applications that run in the browser."
beautify-with-words
"Beautifies javascript and replaces variable names with unique 'long-ish words'."
Metalsmith
"An extremely simple, pluggable static site generator. All of the logic in Metalsmith is handled by plugins. You simply chain them together."
A Tweet for Thought
This tweet. So true, so true.
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...
This is not a real thing, but a proof of concept Chrome Extension called Hash-n-Slash by Andrew Moffat "that allows any text to be used as a domain name. By turning domain names into hashes, we allow for a greater flexibility of exactly what can be used to point to an online resource."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
