Skip to content

Instantly share code, notes, and snippets.

View craigerskine's full-sized avatar
🎮
UX Designer/Developer

Craig @qrayg craigerskine

🎮
UX Designer/Developer
View GitHub Profile
@davist11
davist11 / Fancy File Inputs.js
Created October 25, 2010 21:32
Fancy File Inputs
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
@kayluhb
kayluhb / README
Last active August 31, 2017 23:59 — forked from joelambert/README
Drop in replacements for setTimeout()/setInterval() that makes use of requestAnimationFrame() where possible for better performance
Drop in replace functions for setTimeout() & setInterval() that
make use of requestAnimationFrame() for performance where available
@excalq
excalq / gist:2961415
Last active March 19, 2024 17:45
Javacript: Set or Update a URL/QueryString Parameter, and update URL using HTML history.replaceState()
// 2024 Update, use URLSearchParams [https://caniuse.com/urlsearchparams]
export function createQueryString2(name: string, value: string, searchParams: any) {
const params = new URLSearchParams(searchParams);
params.set(name, value.toLowerCase());
return params.toString();
}
// ---- Original 2012 version, when browsers really sucked ----
// Explicitly save/update a url parameter using HTML5's replaceState().
@nathanhornby
nathanhornby / master.xsl
Last active July 11, 2022 20:06
An HTML5 master utility template for SymphonyCMS (XSLT).
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<xsl:text disable-output-escaping="yes">&lt;</xsl:text>!DOCTYPE html<xsl:text disable-output-escaping="yes">&gt;</xsl:text>
<xsl:text disable-output-escaping="yes"><![CDATA[
<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
@tinabeans
tinabeans / template.html
Last active February 13, 2024 09:18
A super-barebones single-column responsive email template, assuming a max-width of 540px. Read about it on the Fog Creek blog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Single-Column Responsive Email Template</title>
<style>
@media only screen and (min-device-width: 541px) {
.content {
@tomhodgins
tomhodgins / queryStrip.js
Last active February 12, 2019 20:58
Deeplink to bootstrap modals, tooltips, popovers, and tabs
$(document).ready(function(){
// queryStrip
function queryStrip(string) {
string = string.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + string + '=([^&#]*)'),
results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ''));
}
@schmidt1024
schmidt1024 / svg.js
Created June 3, 2015 13:59
Replace all SVG images with inline SVG using jQuery
/*
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
@AnalyzePlatypus
AnalyzePlatypus / vue-click-outside.md
Last active April 27, 2024 05:32
Vue.js 2.7: Detect clicks outside an element (Close modals, popups, etc.)

Detecting outside clicks in Vue.js

See this StackOverflow thread

First off, include the directive at the end of this gist.

  1. On your open button, make sure to use @click.stop to prevent the open click event from closing your modal.
  2. On your modal, add the v-click-outside directive and points it at a function to call when clicked outside.

Example:

@mpalpha
mpalpha / tailwind-readable-text.js
Last active March 31, 2021 21:23
Dynamically generate the first readable complementary color and the most readable color utilities from the current theme color palette.
// example tailwind.config.js
// ...
// theme: {
// readableText: {
// level: 'AAA',
// size: 'small'
// },
// }
// ...
//
@sastan
sastan / README.md
Last active April 22, 2021 15:09
custom twind bundle
npm install

For no module script:

npm run bundle:iife