Quick reference for Google's Web Puppeteer:
Returns true iff the element is present and has the given attribute key/value pair. Since the name of the attribute specifying the element's class is either called 'class' or 'className', depending on the browser, use clazz() instead of this function for testing the value of the class with cross-browser compatibility.
Returns true if the element is shown, and if it is, blurs it.
| function sandbox(script, context){ | |
| context.window = {}; | |
| for (var key in context){ | |
| context.window[key] = context[key]; | |
| } | |
| context.global = context.window; | |
| eval("with (context){~function(){'use strict';" + script + "}()}"); | |
| } |
| div { | |
| width: 100px; | |
| height: 100px; | |
| background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/NCAAFootball_transparent.png/42px-NCAAFootball_transparent.png) no-repeat; | |
| -webkit-filter: | |
| invert() | |
| contrast(0%) | |
| sepia() | |
| saturate(8000%) | |
| hue-rotate(0deg) |
hello-world.min.js
[]()!+
| div { | |
| width: 42px; | |
| height: 40px; | |
| -webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/NCAAFootball_transparent.png/42px-NCAAFootball_transparent.png); | |
| background: purple; | |
| } |
Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.
Watch the demo at bl.ocks.org.
Source and comments on gist.github.com.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| "use strict"; |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Thiemo Mättig <http://maettig.com/> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |