Skip to content

Instantly share code, notes, and snippets.

View jonraasch's full-sized avatar

Jon Raasch jonraasch

18 followers · 1 following
View GitHub Profile
@jonraasch
jonraasch / input-placeholder.js
Created June 7, 2012 22:42
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 / jQuery.support-transition.js
Created April 21, 2010 14:32
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 / highlight.js
Created September 2, 2010 22:14
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 / animated-image.html
Created May 5, 2011 15:07
animated image
View animated-image.html
<!doctype html>
<html lang="en">
<head>
<title>Animated Image (example)</title>
<style type="text/css">
body {
@jonraasch
jonraasch / full-page-slider.html
Created September 2, 2010 22:06
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 / extrude-on-hover.html
Created May 5, 2011 14:59
extrude text on hover
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 / animated-icon.html
Created May 5, 2011 15:15
animated icon on hover
View animated-icon.html
<!doctype html>
<html lang="en">
<head>
<title>Animated Icons (example)</title>
<style type="text/css">
body {
@jonraasch
jonraasch / huge-dropdown-menu.html
Created May 5, 2011 15:05
huge dropdown menu
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;
@jonraasch
jonraasch / fancy-slideshow-navigation.html
Created May 5, 2011 15:02
fancy slideshow navigation
View fancy-slideshow-navigation.html
<!doctype html>
<html lang="en">
<head>
<title>Fancy Slideshow Navigation (example)</title>
<style type="text/css">
#slideshow {
width: 900px;
@jonraasch
jonraasch / force-chrome-frame.html
Created September 30, 2010 18:45
force chrome frame (via Paul Irish)
View force-chrome-frame.html
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>