theaccordance’s gists

theaccordance / slider.tooltip.css

Created June 24, 2013 17:49

CSS styling ruleset for slider.tooltip.js. The first rule, .ui-slider .ui-btn-inner controls applies a padding to the content within the tooltip, and the second rule .ui-slider-popup defines the tooltip itself.

theaccordance / slider.tooltip.js

Created June 24, 2013 16:47

Plugin for jQuery Mobile to create a tooltip for slider controls

theaccordance / rel-nofollow.html

Created May 13, 2013 16:54

Method for adding links that won't be used by crawled by Google and possibly other search enginges

theaccordance / iOS-meta-tags.html

Created May 13, 2013 16:41

Meta tags to enhance rendering of sites/webapps on iOS devices

	<!-- Retrieved from http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html -->

	<!-- Sets whether a web application runs in full-screen mode -->
	<meta name="apple-mobile-web-app-capable" content="yes">

	<!-- Sets the style of the status bar for a web application. -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!-- Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS. -->
	<meta name="format-detection" content="telephone=no">

theaccordance / triangle.css

Created May 9, 2013 22:58

Method for creating a triangle using CSS

	#ribbon-back {
	border-color: transparent #660000 #660000 transparent; /* Triangle is created using two transparent sides for the border */
	border-width: 16px; border-style: solid; /* Width is from the middle of the triangle */
	width: 0; /* Important that the Div has no width */
	height: 0; /* Important that the Div has no height */
	position: relative;
	left: 704px;
	top: -16px;
	z-index: -1; /* Used for depth placement */
	}

theaccordance / background-color-transition.css

Created May 7, 2013 03:27

Method for applying a transition to a background color. Emerland color from the Flat-UI kit which can be found at http://designmodo.github.io/Flat-UI/

	.emerland {
	background-color: #2ECC71;
	-webkit-transition: background-color 500ms linear;
	-moz-transition: background-color 500ms linear;
	-o-transition: background-color 500ms linear;
	-ms-transition: background-color 500ms linear;
	transition: background-color 500ms linear;
	}

theaccordance / fb-opengraph.html

Created May 6, 2013 15:14

Method for implementing Facebook Open Graph tags into a website. Facebook Open Graph requires Title, Type, Image, and URL fields as mandatory. Description is beneficial, but optional. Admin tag allows FB user to gain additional information on interaction between website and Facebook via Facebook Insights. Content attribute for Admins tag must be…

	<meta property="og:title" content="Title Goes Here" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="http://josephmainwaring.com/images/jm-avatar.png"/>
	<meta property="og:url" content="http://josephmainwaring.com" />
	<meta property="og:description" content="A short description to supply Open Graph" />
	<meta property="fb:admins" content='42' />

theaccordance / css3-background.css

Created May 6, 2013 02:52

Method for using multiple CSS3 properties to portray a sophisticated background. Particular example uses a gradient background color in the body, with a container div that applies two semi-transparent images in a pattern to give a wallpaper-like feel. Can be viewed at http://sararokicki.com

	body {
	background: #290e2a;
	background: rgb(33, 7, 34) -moz-radial-gradient(center top, circle farthest-side, rgb(130, 77, 132) 0%, rgb(33, 7, 34) 100%) no-repeat;
	background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 1000, from(rgb(64, 38, 65)), to(rgb(33, 7, 34)));
	}
	#container {
	min-height: 100%;
	background: url(purple/stripe-thick.png) scroll repeat;
	background: url(purple/stripe-thin.png), url(purple/stripe-thick.png) scroll repeat;

theaccordance / recordlinkexternal.js

Created May 6, 2013 02:28

jQuery method which runs the Google Analytics Function recordOutboundLinks for links that open a new window.

	$(window).load(function () {
	$('a[target=_blank]').each(function(){
	$(this).attr('onClick', "recordOutboundLink(this, 'Outbound Links', '"+$(this).attr('data-name')+"');return true;");
	});
	});

theaccordance / retina-graphics.css

Last active December 17, 2015 00:38

Method for providing higher quality images for Retina/4k enabled screens, using a Media Query to load the conditional values when screens match the specified criteria. Since retina graphics are twice the width and height of the original graphic, the rule set for retina graphics should also include an additional property (background-size) to tell…

	/* Background Image Property for Normal Screens */

	.ui-icon-menu {
	background: url('../img/icon-menu.png') center center no-repeat;
	}

	/* Background Image Property for Retina Screens */
	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	/* Best Practice: Indent Rulesets within Media Queries */
	.ui-icon-menu {

	.ui-slider .ui-btn-inner {
	padding: 4px 0 0 0 !important;
	}

	.ui-slider-popup {
	position: absolute !important;
	width: 64px;
	height: 64px;
	text-align: center;
	font-size: 36px;

	(function( $, undefined ) {

	$.widget( "mobile.slider", $.mobile.slider, {
	options: {
	popupEnabled: false,
	showValue: false
	},

	_create: function() {
	var o = this.options,

Joe Mainwaring theaccordance