Skip to content

Instantly share code, notes, and snippets.

@jonathan-beebe
jonathan-beebe / jquery-scrolllock.js
Last active Aug 29, 2015 — forked from theftprevention/jquery-scrolllock.js
A small jQuery extension that disables the propagation of scroll events from the first element in the set of matched elements. Original function by Troy Alford of Stack Overflow. $("#object").scrollLock() enables the lock, and .scrollRelease() disables it. In response to this SO question: http://stackoverflow.com/a/16324762/123781
View jquery-scrolllock.js
$.fn.scrollLock = function () {
return $(this).on("DOMMouseScroll mousewheel", function (h) {
var g = $(this),
f = this.scrollTop,
d = this.scrollHeight,
b = g.height(),
i = h.originalEvent.wheelDelta,
a = i > 0,
c = function () {
h.stopPropagation();
@jonathan-beebe
jonathan-beebe / css-transitions.scss
Last active Aug 29, 2015
Using css transitions
View css-transitions.scss
// Transition Everything
transition: all 0.5s ease-in-out;
// becomes these discrete properties
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: initial;
@jonathan-beebe
jonathan-beebe / assemble-io-looping.html
Last active Aug 29, 2015
Looping through data using Assemble.io + Handlebars
View assemble-io-looping.html
---
headings: [1, 2, 3, 4, 5, 6]
---
<div data-section="headings">
{{#each headings}}
{{#withHash num=this text="Heading"}}
<h{{num}}>{{text}} {{num}}</h{{num}}>
{{/withHash}}
{{/each}}
View assemble-io-parseJSON.html
{{#parseJSON '{"type":"text--primary", "text":"Text, Primary Button"}'}}
<button class="btn btn--{{type}}">{{text}}</button>
{{/parseJSON}}
@jonathan-beebe
jonathan-beebe / declarative.html
Created Apr 7, 2014
Semantic vs Declarative html/scss
View declarative.html
<style>
.text--muted {
color: $text-color-light;
}
.text--uppercase {
text-transform: uppercase;
}
View Emberjs-Simple-Calendar-Component.markdown

Emberjs Simple Calendar Component

A very simple 1-month calendar component

A Pen by Jon Beebe on CodePen.

@jonathan-beebe
jonathan-beebe / SassMeister-input.scss
Created Apr 15, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Define items
$brand-bright: (
name: bright,
color: yellow
@jonathan-beebe
jonathan-beebe / SassMeister-input.scss
Created Apr 15, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Define items
$brand-default: ();
$brand-bright: (
@jonathan-beebe
jonathan-beebe / SassMeister-input.scss
Created Apr 16, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
// Define items
$brand-default: (
'color': #999,
'font-size': 1em
View SassMeister-input-HTML.html
<div class="spriteWrapper sc max_lucado">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc dave_ramsey">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc tom_stanley">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<p>test</p>