Skip to content

Instantly share code, notes, and snippets.

View trumball's full-sized avatar

Todd Rumball trumball

1 follower · 0 following
  • London Ontario, Canada
View GitHub Profile
@trumball
trumball / swatch-template.html
Created April 19, 2016 14:49
Swatches Template
<script id="swatch-template" type="text/template">
{{#swatches}}
<div class="col-lg-2">
<div class="swatch color-{{.}}">
<div class="chip"></div>
<div class="info">
<span>{{.}}</span>
<small></small>
</div>
</div>
@trumball
trumball / console-log.js
Created October 21, 2013 14:07
older browsers (thanks again Microsoft) will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily its an easy fix. Simple use the below code snippet at the top of your code and good old IE should leave you alone: http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it
if(!window.console){ window.console = {log: function(){} }; }
console.log('Testing console');
@trumball
trumball / message.css
Created October 5, 2013 14:33
plugin to make it easy to add flash messages for user feedback
#status-area .flash_message {
padding: 5px;
color: green;
}
@trumball
trumball / Downloadable files.html
Created September 26, 2013 18:27
Downloadable files HTML5 allows you to force download of files using the download attribute. Here is a standard link to a downloadable file.
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
@trumball
trumball / Country drop down list.html
Created September 26, 2013 18:25
Country drop down list
<select>
<option value=" " selected>(please select a country)</option>
<option value="--">none</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
@trumball
trumball / Autocompletion with HTML5 datalists
Created September 26, 2013 18:24
Autocompletion with HTML5 datalists Using the datalist element, HTML5 allows you to create a list of data to autocomplete a input field. Super useful! Here is a sample code to re-use in your own projects.
<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
@trumball
trumball / iPhone call & sms links
Created September 26, 2013 18:22
iPhone call & sms links With the release of the iPhone, Apple introduced a quick way to create call and sms links. Here is a sample code to keep in your snippet library.
@trumball
trumball / validate emails using a regular expression
Created September 26, 2013 18:21
HTML5 allows, among other things, to validate emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
@trumball
trumball / google map
Created September 26, 2013 18:20
Here is a simple yet powerful code to create a form where the user can enter his location to get directions to a specific place. Very useful for contact pages.
<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
@trumball
trumball / css section arrows
Created September 13, 2013 13:58
including little arrows pointing from one section to the top of the following section
.section {
position: relative;
width:100%;
min-height:200px;
}
.section1 {
background: #88b7d5;
}
.section2 {
background: #bfb;