Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
347 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / placeholder-tooltips.js
Last active August 29, 2015 14:01
Display an input's placeholder="" text as a Bootstrap Tooltip on :focus of non-empty form inputs. See this in action at: http://jsfiddle.net/tomhodgins/LEz3Z/2
// Display placeholder="" text as tooltip for :focused, non-empty inputs
$('form input').blur(function() {
var inputVal = $(this).val(),
titleText = $(this).attr('placeholder');
if ( inputVal != '' ) {
$(this).tooltip({
title: titleText,
trigger: 'focus',
container: 'form'
});
@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + CSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('style'),
tag = document.querySelectorAll('[src*="myWidget"]')[0];
myWidget.innerHTML = '\
<!-- Add your HTML here, with line-breaks escaped by a "\" backslash character. -->\
<!-- (Don\'t forget: you can escape any character, like quotes, as well -->\
Hello\
';
widgetStyles.innerHTML = '\
@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + EQCSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
if (typeof EQCSS === 'undefined') {
var eq = document.createElement('script');
eq.src = 'http://elementqueries.com/EQCSS.js';
document.body.appendChild(eq);
};
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('script'),
tag = document.querySelectorAll('[src*=\'myWidget\']')[0];
myWidget.innerHTML = '\
@tomhodgins
tomhodgins / data-personas.php
Last active August 29, 2015 14:17
Adding data-personas support to WordPres
data-personas
data-default="<?php $dd = get_field_escaped($field); echo $dd; ?>"
<?php
$field = 'YourTagGoesHere';
if(get_field($field . '_mm')) {
$mm = get_field_escaped($field . '_mm'); echo 'data-persona-marketing-maggie="' . $mm . '" ';
} else {
$mm = get_field_escaped($field); echo 'data-persona-marketing-maggie="' . $mm . '" ';
}
if(get_field($field . '_tt')) {
@tomhodgins
tomhodgins / hide-the-side.js
Created July 3, 2015 01:57
Browser Script: Adds an invisible checkbox to the top-right corner of Reddit.com that hides the sidebar when checked. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Add this code to Reddit.com
/* Hide the Side */
if (document.getElementsByTagName('html')[0].classList.contains('reddit')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'hTS';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','hideTheSide()');
@blindcyclistsunion
blindcyclistsunion / tumblr_recentpostwidget_js.html
Created June 6, 2011 20:15
Tumblr recent posts widget in javascript
<!-- need jquery for this, this line should really go in your theme html
just after the <head> marker, might work OK here if you aren't already using jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Mimic the style of the tumblr headers from your theme -->
<div class="heading">Recent Posts</div>
<!-- The javascript below will insert your recent posts lists in here -->
<div id="recentPosts"></div>
@tomhodgins
tomhodgins / html5-demo.html
Last active December 14, 2015 05:09
Bootstrapped HTML template file with hosted jQuery, FontAwesome icons, and Source Sans via Google Web Fonts already integrated. Includes clearly marked subsections for HTML markup, JavaScript code, and your CSS rules all in the one file, making it very easy to build self-contained demos or make the development of HTML/JS/CSS features faster.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap CSS -->
<link href="http://cdn.staticresource.com/bootstrap.min.css" type="text/css" rel="stylesheet">
<!-- Source Sans via Google Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<!-- FontAwesome -->
@snookca
snookca / Element Query.txt
Created July 18, 2016 20:12
https://github.com/Snugug/eq.js
https://github.com/tysonmatanich/elementQuery
http://eqcss.github.io/eqcss/
@subzey
subzey / clamp.js
Created September 13, 2016 13:53
clamp.js
function clamp(min, max, mid){
if (min <= max) { // Sanity check
if (mid > max) {
// Also implied: mid is not NaN
return max;
}
if (mid < min) {
// Also implied: mid is not NaN
@joepie91
joepie91 / .js
Last active September 30, 2016 15:23
Braces for conditionals
// The wrong way:
if (something === true)
doAThing();
// Requirements change, now you need to do two things:
if (something === true)
doAThing();
doASecondThing();