Skip to content

Instantly share code, notes, and snippets.

Avatar

Jon Raasch jonraasch

View GitHub Profile
@jonraasch
jonraasch / jQuery.support-transition.js
Created Apr 21, 2010
Extends the jQuery.support object to CSS3 transition
View jQuery.support-transition.js
// jQuery.support.transition
// to verify that CSS3 transition is supported (or any of its browser-specific implementations)
$.support.transition = (function(){
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
})();
@jonraasch
jonraasch / jquery.json2.js
Created Jun 18, 2010
Adds JSON object support to browsers that don't support it natively. Uses the json2.js script from http://www.json.org , which is the same as is used by modern browsers.
View jquery.json2.js
// loads json2.js if JSON not supported
if ( typeof(JSON) == 'undefined' ) $.getScript('json2.js');
@jonraasch
jonraasch / clearfix.css
Created Jul 29, 2010
Alternative clearfix method
View clearfix.css
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{ display: inline-block;}
@jonraasch
jonraasch / full-page-slider.html
Created Sep 2, 2010
Full page sliding animation
View full-page-slider.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Full Page Slider</title>
<style type="text/css">
html {
@jonraasch
jonraasch / highlight.js
Created Sep 2, 2010
Live on-page text highlighting
View highlight.js
/*
highlight v3 !! Modified by Jon Raasch (http://jonraasch.com) to fix IE6 bug !!
Highlights arbitrary terms.
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
@jonraasch
jonraasch / drag-controls.html
Created Sep 2, 2010
Drag controls for oversized content
View drag-controls.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drag Controls for Oversized Content</title>
<style type="text/css">
#full-sized-area {
position: relative;
View comment-count-bars.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Comment Count Bars</title>
<style type="text/css">
View subtle-mouse-effects.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Subtle Mouse Effects</title>
<style type="text/css">
.subtle {
-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
@jonraasch
jonraasch / force-chrome-frame.html
Created Sep 30, 2010
force chrome frame (via Paul Irish)
View force-chrome-frame.html
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
View extrude-on-hover.html
<!doctype html>
<html lang="en">
<head>
<title>Extruding Text on Hover (example)</title>
<style type="text/css">
body {
background-color: #444;