Ryan Parr parrfolio

⭐

My God, It's Full of Stars

VP Product Design at Sprinklr

parrfolio / jQuery.ColHighlight.js

Created January 6, 2011 00:27

jQuery Table Column Highlight

	// highlight columns by Christopher Clark
	$("tbody").delegate("td", "mouseover mouseout", function (e) {
	if (e.type == 'mouseover') {
	// multiple class attr value support - the column identifier is always the first class value
	var target = $(this).attr("class");
	if (target) {
	target = target.split(" ").slice(0, 1).toString();
	$("col." + target).addClass("highlight");
	}
	} else if (e.type == 'mouseout') {

parrfolio / Example

Created January 15, 2011 20:04

CSS3 :toggle

http://jsfiddle.net/ryanparr/yhd5v/

parrfolio / CSS3 Media Queries

Created February 26, 2011 17:02

Hardboiled CSS3 Media Queries

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
	/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {

parrfolio / Wrapping Long URLs and Text Content with CSS

Created March 31, 2011 14:30

Wrapping Long URLs and Text Content with CSS

	pre {
	white-space: pre; /* CSS 2.0 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3.0 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap; /* HP Printers */
	word-wrap: break-word; /* IE 5+ */
	}

parrfolio / CSS Transparency (Cross Browser)

Created April 19, 2011 17:29

CSS Transparency (Cross Browser)

	.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%;

	/* Theoretically for IE 8 & 9 (more valid) */
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

parrfolio / Facetime URL

Created May 1, 2011 17:39

Facetime URL's

parrfolio / @font-face cross browser

Created May 2, 2011 15:43

@font-face cross browser

	@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont.woff') format('woff'), /* Modern Browsers */
	url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
	url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

parrfolio / CSS3 Gradients Cross Browser

Created May 3, 2011 20:05

CSS3 Gradients Cross Browser

	background: #293c4d url("image.png") repeat 0 0;
	background: url("image.png"), -moz-linear-gradient(top, #293c4d 0%, #26353c 100%) repeat 0 0;
	background: url("image.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#293c4d), color-stop(100%,#26353c)) repeat 0 0;
	background: url("image.png"), -webkit-linear-gradient(top, #293c4d 0%, #26353c 100%) repeat 0 0;
	background: url("image.png"), -o-linear-gradient(top, #293c4d 0%, #26353c 100%) repeat 0 0;
	background: url("image.png"), -ms-linear-gradient(top, #293c4d 0%, #26353c 100%) repeat 0 0;
	background: url("image.png"), linear-gradient(top, #293c4d 0%, #26353c 100%) repeat 0 0;

parrfolio / Fix Background Bleed (webkit)

Created May 4, 2011 21:45

Fix Background Bleed (webkit)

-webkit-background-clip: padding-box;

parrfolio / HTML5 Video over Airplay (in iOS 4.3)

Created May 12, 2011 15:38

HTML5 Video over Airplay (in iOS 4.3)