Skip to content

Instantly share code, notes, and snippets.

@mklickman
mklickman / _form.html.erb
Created February 10, 2012 17:01
Basic Rails Contact Form and Mailer
<%= form_for(@contact) do |f| %>
<% if @contact.errors.any? %>
<div id="error_explanation">
<h3><%= pluralize(@contact.errors.count, "error") %> prohibited this contact from being saved:</h2>
<ul>
<% @contact.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
@mklickman
mklickman / test.html
Created March 25, 2012 01:15
HTML5 video that doesn't work in Firefox
<video controls>
<source src="http://www.mundihomes.com/inc/vid/morganville_exterior.theora.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
@mklickman
mklickman / viewport-width.js
Last active December 11, 2015 15:38
Add this to either the head of your document, or load as an external script, and it will add a small widget to the top left corner of your browser window showing the current width of the viewport. Make sure you load jQuery first.
$(document).ready(function() {
var $counter = $('<p class="viewport-width-counter" />');
$('html').append($counter);
if ($('p.viewport-width-counter').length) {
$counter.css({
'position': 'fixed',
'top': 0,
@mklickman
mklickman / win8-tile.sublime-snippet
Created February 27, 2013 15:00
This snippet inserts the three meta tags used to specify what image, background color, and name to use when your site is pinned to the Windows 8 start screen.
<snippet>
<content><![CDATA[
<!-- For details, see http://hicksdesign.co.uk/journal/pinned-sites-in-windows-8 -->
<meta name="msapplication-TileImage" content=“${1:filename.png}”>
<meta name="msapplication-TileColor" content="#${2:hex-value}”>
<meta name="application-name" content=${3:Win8-specific application title}”>
]]></content>
<description>Windows 8 tile specification for pinning to start screen</description>
<tabTrigger>win8tile</tabTrigger>
<scope>text.html</scope>
// Attatch an event listener to your element for when the first animation
// finishes, but only when it's named for the first animation
$('.my-element').on('animationend', function() {
if ($(this).css('animation-name') == "animation-1") {
// Change the CSS animation-name property for the 2nd animation
$(this).css('animation-name', 'animation-2');
}
});
// This...
(function($) {
$('body').css('background', 'red');
})(jQuery)
// is the same as this...
var myFunction = function($) {
var reset_comment_parent = function() {
// CODE...
}
$('.add_form', '.close_comment_form').on('click', reset_comment_parent);
@mklickman
mklickman / interval.js
Created November 15, 2013 15:57
A smarter alternative to JavaScript's built-in setInterval() method, courtesy of this article: http://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval
function interval(func, wait, times){
var interv = function(w, t){
return function(){
if(typeof t === "undefined" || t-- > 0){
setTimeout(interv, w);
try{
func.call(null);
}
catch(e){
t = 0;
@mklickman
mklickman / text-input-handler.js
Last active December 29, 2015 17:59
Updates font size of input text to make it fit the entire field instead of overflowing. May need some tweaking to be entirely portable.
$('input[type="text"]').bind("propertychange keyup input paste", function(event){
var len = $(this).val().length;
if (len >= 13){
letters = len - 13;
percentage = letters/34;
fontsize = Math.round(57-45*percentage);

Keybase proof

I hereby claim:

  • I am mklickman on github.
  • I am mklickman (https://keybase.io/mklickman) on keybase.
  • I have a public key whose fingerprint is 4B82 1E9C 338E 8F7A 9DEA 5264 97E1 534E DD8A 32AC

To claim this, I am signing this object: