Skip to content

Instantly share code, notes, and snippets.

@pjschreifels
pjschreifels / Truncate Breadcrumb
Last active December 11, 2015 16:28
#breadcrumb #coffeescript #truncate #ellipsis #bootstrap Truncate the last node in a breadcrumb and add an ellipsis. I use this with Twitter Bootstrap. Requires: ellipsis.js
# Fix the Breadcrumb display
$(document).ready ->
$("ul.breadcrumb").children("li:not(:last)").append "<span class='divider'>&nbsp;/&nbsp;</span>"
$("ul.breadcrumb").children("li:last").addClass "active"
# Add ellipsis to last item if it's too long
lessWidth = 0
liWidth = $("ul.breadcrumb").children("li:last").width()
$("ul.breadcrumb").children("li:not(:last)").each ->
lessWidth += $(this).outerWidth()
@pjschreifels
pjschreifels / buttons.coffee
Created February 2, 2013 21:01 — forked from mathias/buttons.coffee
#social-buttons #coffeescript Facebook and Twitter social media buttons using coffeescript for rails projects.
((d, s, id) ->
js = undefined
fjs = d.getElementsByTagName(s)[0]
return if d.getElementById(id)
js = d.createElement(s)
js.id = id
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"
fjs.parentNode.insertBefore js, fjs
) document, "script", "facebook-jssdk"
@pjschreifels
pjschreifels / google.analytics.js.coffee
Created February 4, 2013 06:11 — forked from rezwyi/google.analytics.js.coffee
#analytics #coffeescript Google Analytics code in coffeescript for rails projects.
# See http://stackoverflow.com/questions/4214731/coffeescript-global-variables
root = exports ? this
root._gaq = [['_setAccount', 'UA-xxxxxxxx-y'], ['_trackPageview']]
insertGAScript = ->
ga = document.createElement 'script'
ga.type = 'text/javascript'
ga.async = true
proto = document.location.protocol
@pjschreifels
pjschreifels / js-orm.js
Last active December 14, 2015 13:38
#javascript #ORM manipulates a browser's Local Storage with create, update, increment, decrement and delete. Also provides functions for getting data with get, get all, find value, and find. The script treats the Local Storage like a database (as much as possible), so when manipulating the data, the function requires: table - a string that refer…
function createStore(table, row){ // Inserts a single row of data into a table
var rows = JSON.parse(localStorage.getItem(table));
if (rows == null) {
rows = {};
var id = 1;
} else {
var id = $.map(Object.keys(rows), function(val, i){return parseInt(val);}).reduce(function(a,b){return Math.max(a,b);})+1;
}
row.id = id;
@pjschreifels
pjschreifels / Margin Loop for LESS
Created June 29, 2013 23:32
#layout #less - Create top, right, bottom and left margin classes from 0px to 50px in 5px increments. Use as .mt_x, mb_x, mr_x, ml_x (top, bottom, right left margin, respectively), where x is a number from 0 to 50.
// Margin classes
// -------------------------
@from : 0;
@to : 50;
.loop(@index) when(@index =< @to) {
.mt_@{index} {
margin-top: unit(@index, px);
}
@pjschreifels
pjschreifels / margins-padding
Created January 9, 2014 17:59
#sass #css-layout — Margin and Padding loop for SASS.
// Margins and Padding
// -------------------------
$i: 0;
@while $i <= 50 {
.mt#{$i} { margin-top: 1px * $i; }
.mb#{$i} { margin-bottom: 1px * $i; }
.ml#{$i} { margin-left: 1px * $i; }
.mr#{$i} { margin-right: 1px * $i; }
.pt#{$i} { padding-top: 1px * $i; }
@pjschreifels
pjschreifels / organizations-menu.html
Last active August 3, 2017 08:19
Bootstrap Popover using Aurelia customAttribute that fetches data from Firebase and inserts it into the popover content area using a dynamic Compose view.
<template>
<div class="dropdown-item ${items.isLoading ? '' : 'hide'}">
<p class="mb5"><i class="fa fa-refresh mr5"></i> Loading data...</p>;
</div>
<div class="dropdown-item" repeat.for="item of items">
<p class="mb5">
<span class="mr10">${item.__firebaseKey__}</span>
</p>
</div>
<template>
<button type="button" class="btn btn-secondary" click.trigger="show()">Show</button>
</template>
@pjschreifels
pjschreifels / aurelia.json
Created August 23, 2016 22:29
Bootstrapv4-alpha.3 — Tether and RequireJS
"dependencies": [
...
"jquery",
{
"name": "tether",
"path": "../node_modules/tether/dist",
"main": "js/tether",
"resources": [
"css/tether.css"
import {customAttribute, autoinject} from 'aurelia-framework';
import { PaymentPlan } from './payment-plan';
import $ from 'jquery';
import 'bootstrap-slider';
@customAttribute('installment-slider')
@autoinject
export class InstallmentSlider {
mySlider: any;