Skip to content

Instantly share code, notes, and snippets.

Edward Irby EdwardIrby

Block or report user

Report or block EdwardIrby

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@EdwardIrby
EdwardIrby / PreheaderDemo
Created Mar 16, 2012
Mobile Emails: Responsive is not always the answer
View PreheaderDemo
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--Preheader styles-->
<style>
.preheader{display:none;}
@media (max-device-width:480px) {
.preheader {display:block;}
}
@EdwardIrby
EdwardIrby / MobileEmail
Created Mar 16, 2012
Mobile Friendly Email...All Divs baby
View MobileEmail
<!-- saved from url=(0034)http://dev.opusproofing.com/appup/ -->
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge; chrome=1" />
<title></title>
<style type="text/css">
body{
background-color:transparent;background-image:url(images/6180_iadp_news_gradient.gif);
background-repeat:repeat-x;background-position:top left;background-attachment:scroll;
@EdwardIrby
EdwardIrby / showPrimary.js
Created Jul 13, 2013
Small script that listens for categories selected on the OpenSesame course upload page. It then uses the selected options to reveal radio button options that the user will be required to choose from in order to select a primary category for their course.
View showPrimary.js
var subjects = jQuery('#edit-field-course-subjects-taxonomy-und');
function displayPrimarySubject(){
var subjectVal =[];
var subjectInput = subjects.find('input:checked');
subjectInput.each(function(){
var catVal= jQuery(this).val();
subjectVal.push(catVal);
});
var primarySubjectField= jQuery('#edit-field-primary-subject');
if (subjectVal.length > 0){
@EdwardIrby
EdwardIrby / template.js
Created Jul 13, 2013
This is the script that inspired the talk "Beyond the Comp: A UI Developer's Toolset" I will be presenting on Aug 8t, 2013. It uses jQuery and Handlebars to allow me to design a UI in the browser with real or in this case faked data and then host it on Heroku with a small php hack. Right now I'm working on adding meteor js to the mix.
View template.js
function template_config(header, header_data, body, body_data){
Handlebars.getTemplate = function(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : 'templates/' + name + '.handlebars',
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
Handlebars.templates[name] = Handlebars.compile(data);
@EdwardIrby
EdwardIrby / Checkbox-Style.scss
Last active Aug 29, 2015
Cross browser checkbox styling with label and no need for an "id" value on the input and "for" attribute on the label. There's also an example of using an encoded svg for the background image.
View Checkbox-Style.scss
// markup: <label class="css-label"><input type="checkbox" id="valueCheck" /><i class="css-checkbox"></i>Some Label</label>
.css-label{
padding-left:20px;
position:relative;
input[type=checkbox]{
position: absolute;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
height:15px;
@EdwardIrby
EdwardIrby / twitterTypeahead.html
Created Jun 6, 2014
RactiveJS Twitter Typeahead Component
View twitterTypeahead.html
<input class="flex-input-field" decorator="typeahead">
@EdwardIrby
EdwardIrby / FlexInput.js
Created Jun 6, 2014
Ractive Flex Input Component v 0.1
View FlexInput.js
Ractive.partials.selectbox= require("../selectbox/selectbox.html");
var flexinputs ={
Input:require("./layouts/Input.html"),
InputAnchor:require("./layouts/InputAnchor.html"),
InputButton:require("./layouts/InputButton.html"),
InputSlectbox:require("./layouts/InputSelect.html"),
InputSelectboxAnchor:require("./layouts/InputSelectAnchor.html"),
InputSelectboxButton:require("./layouts/InputSelectButton.html"),
Selectbox:require("./layouts/Select.html"),
TripleSelect:require("./layouts/TripleSelect.html"),
View _font-size.scss
//REM Calc font size
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size; /* ie8 fallback */
font-size: calculateRem($size);
@EdwardIrby
EdwardIrby / styles.js
Created Feb 9, 2015
rework postcss gulp task
View styles.js
//Rework Plugins
var plugins = {
calc:require("rework-calc"),
colorFunction: require("rework-color-function"),
customMedia:require("rework-custom-media"),
fontVariant:require("rework-font-variant"),
hexAlpha:require("rework-hex-alpha"),
import: require("rework-import"),
inherit:require("rework-inherit"),
View How_to_use.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="templating.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id=t>
You can’t perform that action at this time.