Skip to content

Instantly share code, notes, and snippets.

View jimthoburn's full-sized avatar

Jim Thoburn jimthoburn

55 followers · 29 following
View GitHub Profile
@jimthoburn
jimthoburn / dabblet.css
Created April 9, 2012 04:32
SVG Gradient Example
/**
* SVG Gradient Example
*/
a, button {
background: rgb(222, 103, 35) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjQ2LCAxNzUsIDMyKSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjIyLCAxMDMsIDM1KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x;
background-size: contain;
border-radius: 0.25em;
border-width: 0;
color: white;
display: inline-block;
@jimthoburn
jimthoburn / dabblet.css
Created April 12, 2012 00:36
SVG Gradient Example
/**
* SVG Gradient Example
*/
a, button {
background: rgb(222, 103, 35) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjQ2LCAxNzUsIDMyKSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjIyLCAxMDMsIDM1KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x;
background-size: contain;
border-radius: 0.25em;
border-width: 0;
color: white;
display: inline-block;
@jimthoburn
jimthoburn / upload-15598963.php
Last active July 11, 2021 19:19
A file upload example, with PHP. For Stack Overflow: http://stackoverflow.com/questions/15598963/why-does-my-form-not-upload-files-in-internet-explorer-9
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<?php
// KUDOS: http://www.php.net/manual/en/features.file-upload.post-method.php#example-354
@jimthoburn
jimthoburn / captain-sally.md
Last active December 18, 2015 23:19

The Unwritten History of Captain Sally

Some things about Captain Sally and how amazing she was!

  • This is the first thing that happened
  • And then this
  • And that too

And here is the hospital where she worked:

@jimthoburn
jimthoburn / within.js
Created September 11, 2013 22:18
A JavaScript function that will tell you if an element is within another element. This is useful for things like closing a widget when a user clicks somewhere else in the page.
function within(needle, haystack) {
// If the parent element is the target
if (needle === haystack) {
return true;
// If any of the children are the target
} else if (haystack.firstChild) {
var child = haystack.firstChild;
do {
@jimthoburn
jimthoburn / simple-reload.js
Created October 8, 2013 19:12
Reload the main style sheet, for the a page you’re working on. (HINT: Type this in your browser console.) This is useful when you’re working on your CSS, and a full page refresh takes a long time.
document.querySelector('link[href*="application.css"]').href += "#a";
@jimthoburn
jimthoburn / math.html
Last active December 25, 2015 09:39
Math Equations as TeX, rendered with MathJax
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<title>Math Equations as TeX (rendered with MathJax)</title>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<style>
body {
background: white;
font: 20px/normal 'Crimson Text', serif;
@jimthoburn
jimthoburn / topics.md
Last active December 28, 2015 20:28
These are topics I’m familiar with or interested in learning more about

HTML Basics

Build a flexible, robust web page that performs well in search engines, and works on any device.

Designing in a Web Browser

Create a stunning visual design, using a text editor and a Web browser.

@jimthoburn
jimthoburn / pulse.html
Last active August 3, 2016 23:04
Pulsing circle animation
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@keyframes pulse {
100% {
box-shadow: 0 0 0.25em rgba(77, 85, 148, 1);
}
@jimthoburn
jimthoburn / closest.js
Created September 8, 2016 01:24
Find the closest ancestor HTML element that matches a tag name
function closest(element, tagName) {
// If the element is the target
if (element.nodeName.toLowerCase() === tagName) return element;
var ancestor = element;
while ((ancestor = ancestor.parentElement) && ancestor.nodeName && ancestor.nodeName.toLowerCase() !== tagName);
if (ancestor && ancestor.nodeName && ancestor.nodeName.toLowerCase() === tagName) {
return ancestor;
}