Skip to content

Instantly share code, notes, and snippets.

Jon Raasch jonraasch

Block or report user

Report or block jonraasch

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
@jonraasch
jonraasch / input-placeholder.js
Created Jun 7, 2012
HTML5 placeholder fallback that handles passwords (jquery)
View input-placeholder.js
/* JS fallback for HTML5 placeholder
* requires jQuery and Modernizr (to detect support)
* by Jon Raasch - @jonraasch - http://jonraasch.com/
* modified script from Nico Hagenburger: http://bit.ly/LgrkT0
*/
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
@jonraasch
jonraasch / animated-icon.html
Created May 5, 2011
animated icon on hover
View animated-icon.html
<!doctype html>
<html lang="en">
<head>
<title>Animated Icons (example)</title>
<style type="text/css">
body {
View animated-image.html
<!doctype html>
<html lang="en">
<head>
<title>Animated Image (example)</title>
<style type="text/css">
body {
View huge-dropdown-menu.html
<!doctype html>
<html lang="en">
<head>
<title>Huge Dropdown Menu (example)</title>
<style type="text/css">
body {
background-color: #86c6d7;
View fancy-slideshow-navigation.html
<!doctype html>
<html lang="en">
<head>
<title>Fancy Slideshow Navigation (example)</title>
<style type="text/css">
#slideshow {
width: 900px;
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;
@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 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 */
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">
@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;
You can’t perform that action at this time.