tallykatt · July 24, 2016 23:28 · May 1, 2011 · May 1, 2011 · May 1, 2011 · May 1, 2011
diff --git a/jquery-bookmarklet.html b/jquery-bookmarklet.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8" />
-  <title>jQuery Mobile View Source Bookmarklet for Chrome</title>
+  <title>jQuery Mobile Original Source Bookmarklet for Chrome</title>
   <style type="text/css" media="screen">
     body, html, h1 { margin: 0; padding: 0; }
 
@@ -23,11 +23,11 @@
 </head>
 <body>
   <hgroup>
-    <h1>jQuery Mobile View Source</h1>
+    <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 source of the page you are on. 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>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>
+  <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>
 
@@ -37,6 +37,5 @@ <h2>Bookmarklet for Chrome</h2>
   <footer>
     <a href="https://twitter.com/dougneiner">Doug Neiner</a> | <a href="https://gist.github.com/950248">Fork on Github</a>
   </footer>
-
 </body>
 </html>
diff --git a/jquery-bookmarklet.html b/jquery-bookmarklet.html
@@ -14,10 +14,11 @@
     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 }
-    footer a { color: #000 }
   </style>
 </head>
 <body>
@@ -29,6 +30,10 @@ <h2>Bookmarklet for Chrome</h2>
   <p>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>

diff --git a/jquery-bookmarklet.html b/jquery-bookmarklet.html
@@ -30,7 +30,7 @@ <h2>Bookmarklet for Chrome</h2>
 
   <div><a class="bookmarklet" href="javascript:(function (){var l=location.toString(); window.open('view-source:' + l.replace(/#\/?/, ''));}())">View jQM Source</a></div>
   <footer>
-    <a href="https://twitter.com/dougneiner">Doug Neiner</a> | <a href="https://gist.github.com/">Fork on Github</a>
+    <a href="https://twitter.com/dougneiner">Doug Neiner</a> | <a href="https://gist.github.com/950248">Fork on Github</a>
   </footer>
 
 </body>

diff --git a/jquery-bookmarklet.html b/jquery-bookmarklet.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>jQuery Mobile View 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.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 }
+    footer a { color: #000 }
+  </style>
+</head>
+<body>
+  <hgroup>
+    <h1>jQuery Mobile View 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 source of the page you are on. 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>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>
+  <footer>
+    <a href="https://twitter.com/dougneiner">Doug Neiner</a> | <a href="https://gist.github.com/">Fork on Github</a>
+  </footer>
+
+</body>
+</html>