dcneiner · May 1, 2011 04:28
diff --git a/jquery-bookmarklet.html b/jquery-bookmarklet.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title>jQuery Mobile Original Source Bookmarklet for Chrome</title>
  <style type="text/css" media="screen">
    body, html, h1 { margin: 0; padding: 0; }
    
    html { padding: 20px; background: #ddd; }
    body { max-width: 600px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: #fff; font-family: Helvetica, arial; box-shadow: rgba(0,0,0,0.2)  0 0 5px }
    footer { display: block }
    hgroup { display: block; line-height: 100%; text-align: center; padding: 20px 0}
    h1 { font-size: 24pt; letter-spacing: -2px; textRendering: optimizeLegibility;}
    h2 { font-size: 16pt; letter-spacing: -1px; color: #888}
    p { line-height: 140%; margin: 15px 0; font-size: 12pt}
    div { text-align: center; padding: 20px 0}
    a:not(.bookmarklet) { color: #000; padding: 3px 6px; margin: -3px; border-radius: 5px }
    a:not(.bookmarklet):hover { background: #ddd;}
    a.bookmarklet { font-size: 12pt; border-radius: 15px; text-decoration: none; background: #333; display: inline-block; padding: 5px 15px; color: #fff; box-shadow: rgba(0,0,0,0.2) 1px 2px 2px; -webkit-transition: background-color linear 0.4s }
    a.bookmarklet:hover { background: #000}
    footer { font-size: 10pt; padding: 20px 0 0 0; text-align: center; color: #aaa }
  </style>
 </head>
 <body>
  <hgroup>
    <h1>jQuery Mobile Original Source</h1>
    <h2>Bookmarklet for Chrome</h2>
  </hgroup>
  <p>A frustrating thing about checking out a jQuery Mobile app (or even the Demos), is getting quick access to the <em>original</em> source of the page you are on. Getting the post-processed source is easy, but doesn't show you what the markup looked like <em>before</em> jQuery Mobile processed it. First you need to remove the hash, load the page and view the source. With this handy bookmarklet for Chrome, you can get at the source with one click.</p>
  <p>To use, drag the following bookmarklet up to your Bookmarks Bar, then use it to view the source of the page you are on in a jQuery Mobile app</p>
  
  <div><a class="bookmarklet" href="javascript:(function (){var l=location.toString(); window.open('view-source:' + l.replace(/#\/?/, ''));}())">View jQM Source</a></div>
  
  <p>Next, navigate to a page on a jQuery Mobile App (Oooh, try <a href="http://jquerymobile.com/demos">this one!</a>).</p>
  <p>Click the bookmarklet. <strong>Smile.</strong></p>
  
  <footer>
    <a href="https://twitter.com/dougneiner">Doug Neiner</a> | <a href="https://gist.github.com/950248">Fork on Github</a>
  </footer>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Original Source Bookmarklet for Chrome</title>
	<style type="text/css" media="screen">
	body, html, h1 { margin: 0; padding: 0; }

	html { padding: 20px; background: #ddd; }
	body { max-width: 600px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: #fff; font-family: Helvetica, arial; box-shadow: rgba(0,0,0,0.2) 0 0 5px }
	footer { display: block }
	hgroup { display: block; line-height: 100%; text-align: center; padding: 20px 0}
	h1 { font-size: 24pt; letter-spacing: -2px; textRendering: optimizeLegibility;}
	h2 { font-size: 16pt; letter-spacing: -1px; color: #888}
	p { line-height: 140%; margin: 15px 0; font-size: 12pt}
	div { text-align: center; padding: 20px 0}
	a:not(.bookmarklet) { color: #000; padding: 3px 6px; margin: -3px; border-radius: 5px }
	a:not(.bookmarklet):hover { background: #ddd;}
	a.bookmarklet { font-size: 12pt; border-radius: 15px; text-decoration: none; background: #333; display: inline-block; padding: 5px 15px; color: #fff; box-shadow: rgba(0,0,0,0.2) 1px 2px 2px; -webkit-transition: background-color linear 0.4s }
	a.bookmarklet:hover { background: #000}
	footer { font-size: 10pt; padding: 20px 0 0 0; text-align: center; color: #aaa }
	</style>
	</head>
	<body>
	<hgroup>
	<h1>jQuery Mobile Original Source</h1>
	<h2>Bookmarklet for Chrome</h2>
	</hgroup>
	<p>A frustrating thing about checking out a jQuery Mobile app (or even the Demos), is getting quick access to the <em>original</em> source of the page you are on. Getting the post-processed source is easy, but doesn't show you what the markup looked like <em>before</em> jQuery Mobile processed it. First you need to remove the hash, load the page and view the source. With this handy bookmarklet for Chrome, you can get at the source with one click.</p>
	<p>To use, drag the following bookmarklet up to your Bookmarks Bar, then use it to view the source of the page you are on in a jQuery Mobile app</p>

	<div><a class="bookmarklet" href="javascript:(function (){var l=location.toString(); window.open('view-source:' + l.replace(/#\/?/, ''));}())">View jQM Source</a></div>

	<p>Next, navigate to a page on a jQuery Mobile App (Oooh, try <a href="http://jquerymobile.com/demos">this one!</a>).</p>
	<p>Click the bookmarklet. <strong>Smile.</strong></p>

	<footer>
	<a href="https://twitter.com/dougneiner">Doug Neiner</a> \| <a href="https://gist.github.com/950248">Fork on Github</a>
	</footer>
	</body>
	</html>