Coffee Filter Drip Coffee Filter Logo

Coffee Filter

Coffeescript helpers for more... drinkable projects

Download .zip Download .tar.gz View on GitHub

Coffee Filter is a collection of coffeescript helpers I've used across projects. I didn't make all of them and some I customized, but I've credited other authors where appropriate.

Special thanks to Reachably (website, github), the company at which I wrote these.

You can include the whole helpers file in your project, or pick and choose some of the functions to use. Included are (click to skip to examples):

Hover Tag

Hover on the image to see the effect.

html: 
<img data-hover-tag='Michael P. Geraci' src='images/mgeraci_square.png'/>

Javascript: 
hover_tags()

Optionally, you can add data-hover-tag-top="value in px" and/or data-hover-tag-left="value in px" to the element to override the default offset.

Placeholder Text

This placeholder text will show up even in browsers that don't support the html5 placeholder attribute.
Some older browsers don't support the html5 placeholder text spec. This function adds support for these older browsers. Just add your placeholder text as you would in html5. 

<input placeholder='placeholder text' type='text' />

And on page load, run: 
window.set_placeholder_text()

(this requires modernizr)

Autoexpanding Text Areas

Call .autoexpand() on the textarea of your choice! Optionally, pass a function in to get run every time the textarea grows or shrinks. And if you pass true as a third argument, the textarea will be given focus. 

$('#autoexpand textarea').autoexpand(autoexpand_notifer)

this text will change when autoexpand runs

Fill a Square with an Image

Before:
After:
If you have an image of unknown dimensions and would like to present it as a thumbnail, stick it in a div of defined width and height: 
<div id='square_image_wrapper'>
  <img src='images/example.jpg' />
</div>

And run .square_image() on it! 
$('#square_image_wrapper').square_image()

Center an Image within a Square

Before:
After:
Similar to the above, if you'd like to display an image of unknown size but maintain its aspect ratio, stick it in a div of defined width and height: 
<div id='center_image_wrapper'>
  <img src='images/example.jpg' />
</div>

And run .center_image() on it! 
$('#center_image_wrapper').center_image()

Saving State for Ajax Forms

click to save
Saving a form via ajax? Want to give the user some feedback? Click the button to the left to see how it looks.

It works by setting data attributes on your link or button:
  • data-saving-text: the text to display while saving
  • data-saved-text: optional. If present it shows for 1 second before reverting to the original text
    • <a href='#' class='fancy_button' data-saving-text='saving...' data-saved-text='saved!'>click to save</a>

    To trigger the save state, you can call this function on click: 
    $('.fancy_button').click(function(){
  $(this).save_state();
})

    And to get it back to normal, just run this function, maybe in the success callback of your ajax request: 
    $('.fancy_button').unsave_state();

    Consider adding styles to the .saving class on your button to remove any hover or click states that you might have on your button.

Custom Tabindex

Tap tab to see the custom tabindex in action (make sure no inputs have focus). It's the reverse of what the default would be.




There's an html attribute for controlling the tabindex on forms, but it can be useful to override what's present in the html (e.g., if you load a form in via ajax).

In javascript, call pass an array of jQuery objects in the order that you want tabbed: 
window.set_tabindex([
  $('.input4'),
  $('.input3'),
  $('.input2'),
  $('.input1')
])

html: 
<input type='text' class='input1' />
<input type='text' class='input2' />
<input type='text' class='input3' />
<input type='text' class='input4' />

outerHTML

this is text in a paragraph tag, wrapped with a div with id "to_outerhtml"

When using a jQuery selector, sometimes it's handy to get not just the content, but the element itself. Here's the output of .html(): 
$('#to_outerhtml').html()
<p>this is text in a paragraph tag, wrapped with a div with id "to_outerhtml"</p>

But with .outerHTML() you get: 
$('#to_outerhtml').outerHTML()
<div id="to_outerhtml"><p>this is text in a paragraph tag, wrapped with a div with id "to_outerhtml"</p></div>

Keyboard Shortcut Checker

Keyboard shortcuts are cool! ...Until you're typing a form and trigger them by accident. In the code for your keyboard shortcuts, add this check: 
window.should_allow_keyboard_shortcuts()

Give these inputs focus and see the status change...

shortcut status is go