Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

View GitHub Profile
View overloaded.html
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>CodePen Overloaded</title>
View gist:527825
#things-i-do { width: 370px; position: absolute; right: 0; top: 0; }
.thing-i-do { text-align: center; margin: 18px; background: rgba(215, 215, 215, 0.5); border: 1px solid #ccc; height: 65px; overflow: hidden; }
.thing-i-do a { display: block; height: 130px; }
.thing-i-do h5 { border: 0; color: #333; height: 65px; line-height: 65px; opacity: 1; text-transform: inherit; letter-spacing: 0; font-style: italic; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; }
.thing-i-do a:hover h5 { margin-top: -75px; opacity: 0; }
.thing-i-do div { position: relative; background: #333; color: white; height: 65px; padding: 10px; font-size: 11px; opacity: 0.0; -webkit-transform: rotate(6deg); -webkit-transition: all 0.4s linear; -moz-transform: rotate(6deg); -moz-transition: all 0.4s linear; }
.thing-i-do a:hover div { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
#thing-wufoo { background: #c73b1b url(images/css-tricks.png) 0 -1042px no-repeat; padding-left: 120px; text-ali
View Absolute Position within Table Cells
// Plugin
$.fn.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease = function() {
var $el;
return this.each(function() {
$el = $(this);
var newDiv = $("<div />", {
"class": "innerWrapper",
"css" : {
"height" : $el.height(),
"width" : "100%",
View gist:783559
function processEntries(data) {
// Loop for each entry
$.each(data.Entries, function(entriesIndex, entriesObject) {
// Field3 is the email field on this particular form
if (entriesObject.Field3 != "") {
View gist:793604
<script src=""></script>
<script src=""></script>
<script src='/examples/gravatar-party-list/js/jquery.wufooapi.js'></script>
<script src='/examples/gravatar-party-list/js/md5.js'></script>
<script id="attendeeTemplate" type="text/x-jquery-tmpl">
<img src="${MD5(Field3)}" alt="" />
<h4>${Field1} ${Field2}</h4>
<a href="${Field6}">@${Field6}</a>
View Data, WTF
$(function() {
var $el;
$("input[placeholder]").each(function() {
$el = $(this);
.css("color", "#ccc")
View gist:896686
var tooFast = false;
$(window).load(function() {
tooFast = true;
function bindLoad() {
if (tooFast) {
} else {
View localStorageOfForm.js
// Save all data, on some kind of event
localStorage.setItem("doesHaveData", "yeahBaby");
var data = $("#contest-vote").serializeArray();
jQuery.each(data, function(i, obj) {
localStorage.setItem(, obj.value);
View gist:958246
url: url,
dataType: 'json',
data: data,
success: function() {
// NOW call the function again, but make sure at least XX seconds have gone by somehow
You can’t perform that action at this time.