Skip to content

Instantly share code, notes, and snippets.

Mark Atherton matherton

View GitHub Profile
@matherton
matherton / .jsx
Created Aug 30, 2018
ES6 function for un-selectable radio buttons
View .jsx
radioChecked = () => {
var allRadios = document.querySelectorAll('input[type="radio"]');
allRadios.forEach(r => {
r.addEventListener('mouseup', function(e) {
if (r.checked) {
setTimeout(() => {
r.checked = false;
}, 0);
}
});
View widow resize jquery
$(window).resize(function() {
var captions = $('.module-main-links .caption'),
height = 0;
captions.each(function() {
var captionHeight = $(this).outerHeight();
if (captionHeight > height) {
height = captionHeight;
}
});
@matherton
matherton / window-resize.js
Last active Sep 3, 2015
JS resize function for mobile and tablet
View window-resize.js
$(window).resize(function() {
//var viewportWidth = $(window).width(); jQuery selector has inconsistencies with Media Queries
var viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // JS better consistency with Media Queries
/*Mobile view*/
if (( viewportWidth <= 600 ) || ( viewportWidth > 776 ) && (viewportWidth < 921)) {
//Setup Markup to add attribute requirements for mobile
console.log( "on mobile" );
}
/*Descktop view */
else {
@matherton
matherton / index.htm
Created Aug 5, 2015
Progress bars for 4 stages
View index.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Progress bar demo</title>
<meta name="description" content="vanilla progress bar">
<meta name="author" content="Mark Atherton">
@matherton
matherton / linkremove.js
Last active Aug 29, 2015
JS snippet remove link according if on URL
View linkremove.js
if (document.URL.indexOf("PAGE-NAME") >= 0) {
$('a[href="/page-name"]').hide();
}
/*
= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains
@matherton
matherton / blamk-responsive-email-template
Created Jan 30, 2015
A blank 1 column full width responsive email template
View blamk-responsive-email-template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Email</title>
<style>
/*desktop css*/
@matherton
matherton / functions
Created Jan 9, 2015
Bootstrap making first instance of select class form-control unselectable in IE8 fix
View functions
$(function () {
if (navigator.userAgent.indexOf('MSIE 8.0') > 0 ) {
var $formControl = $('select.form-control:first');
if ($formControl.length > 0) {
$formControl.before('<select class="form-control" style="display:none"></select>');
}
}
}());
@matherton
matherton / Dynamic Button
Last active Aug 29, 2015
Dynamic button that changes it's text and adds/removes amount onClick
View Dynamic Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- The page title that is displayed in the top of the browser -->
<title>Dynamic button demo</title>
<!-- Meta content describes your page and is indexed by search engines such as Google -->
<meta name="description" content="The HTML5 BASE template">
@matherton
matherton / Drop Down ie.css
Last active Aug 29, 2015
Simple drop dow Nav
View Drop Down ie.css
ul.dropdown ul li { display: inline; width: 100%; }
@matherton
matherton / jQuery Dialog Demo
Created Mar 24, 2014
Default jQuery Dialog demo with some close and open animations
View jQuery Dialog Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
You can’t perform that action at this time.