Skip to content

Instantly share code, notes, and snippets.

@cscuderi
cscuderi / animate-svg-path.js
Created September 1, 2014 00:52
Animate SVG path
var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
@cscuderi
cscuderi / inline-svg-with-fallback.html
Created September 1, 2014 00:54
Inline SVG with fallback
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
@cscuderi
cscuderi / break-text.css
Last active August 29, 2015 14:16
Breaks text cross-browser
.break-text {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
@cscuderi
cscuderi / 60fps.css
Last active December 30, 2015 01:09
JavaScript that toggles a universal class on scroll to disable pointer events. Removes the class when the user stops scrolling. From http://www.thecssninja.com/javascript/pointer-events-60fps
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
@cscuderi
cscuderi / sliding-menu.html
Last active January 1, 2016 07:59
A nice CSS3 sliding menu with fallback for older browsers.
<div id="outer-wrap">
<div id="inner-wrap">
<a id="nav-open-btn" class="menu-toggle" href="#nav">Toggle navigation</a>
<nav id="nav" class="main" role="navigation">
<div class="block">
<h2>Menu</h2>
<ul>
<li><a href="#">Information</a></li>
@cscuderi
cscuderi / ie7-pseudo.css
Created January 3, 2014 18:13
Adds support for :before and :after (in the form of .before and .after classes) to IE7. Use with Modernizr.
.lt-ie8 .class-selector {
*zoom: expression(
this.runtimeStyle.zoom="1",
this.insertBefore(
document.createElement("div"),
this.childNodes[0]
).className="before",
this.appendChild(
document.createElement("div")
).className="after"
@cscuderi
cscuderi / download.js
Created August 6, 2016 00:02
Download a file using JavaScript
// Download a PDF
var fileName = 'My file';
var fileURL = 'http://localhost/my-file.pdf';
// Non-IE
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = fileName || 'unknown';
@cscuderi
cscuderi / Default (OSX).sublime-keymap
Last active September 30, 2016 14:54
Sublime Text 3 user settings
[
{ "keys" : ["super+\\"], "command" : "toggle_side_bar" },
{ "keys" : ["ctrl+alt+left"], "command": "move_to", "args": {"to": "bol", "extend": false} },
{ "keys" : ["ctrl+alt+right"], "command": "move_to", "args": {"to": "eol", "extend": false} },
{ "keys": ["super+up"], "command": "noop" },
{ "keys": ["super+down"], "command": "noop" }
]
@cscuderi
cscuderi / component.txt
Created January 26, 2018 19:01 — forked from dazld/component.txt
AEM Sightly JS globals, currentPage investigations
accessible
adaptTo
analyzable
cellName
childEditConfig
class
componentGroup
container
declaredChildEditConfig
declaredEditConfig
<myCheckbox
sling:resourceType="granite/ui/components/foundation/form/checkbox"
jcr:primaryType="nt:unstructured"
text="My label"
fieldDescription="This will appear as helpful text on the info icon."
name="./myCheckbox"
value="{Boolean}true"
uncheckedValue="{Boolean}false"
defaultChecked="{Boolean}true"
/>