commiting index.html

boazsender · Feb 3, 2012 · 205dd13 · 205dd13
commit 205dd13
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html> 
+<html>
+  <head>
+    <title>Drag 'n Drop - Data URL Generator | Bocoup</title>
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script type="text/javascript">
+    jQuery(function($){
+
+      /*
+       * Handy drag n' drop -> Data URL tool
+       * by @boazsender: http://boazsender.com
+       *
+       */ 
+
+      // jQuery creates it's own event object, and it doesn't have a
+      // dataTransfer property yet. This adds dataTransfer to the event object.
+      // Thanks to @tbranyen for figuring this out!
+      $.event.props.push('dataTransfer');
+
+      var body = $('body')
+        .bind( 'dragenter dragover', false)
+        .bind( 'drop', function( e ) {
+          e.stopPropagation();
+          e.preventDefault();
+
+
+          body.html("<h2>You're welcome ;)</h2>")
+
+          $.each( e.dataTransfer.files, function(index, file){
+            var fileReader = new FileReader();
+                fileReader.onload = (function(file) {
+                   return function(e) { 
+                     body.append('<div class="dataurl"><strong>' + file.fileName + '</strong><a href="'+ e.target.result  +'">' + e.target.result + '</a></div>') 
+                   }; 
+                })(file);
+            fileReader.readAsDataURL(file);
+          });
+
+        });
+    });
+
+    // I'ma tracking the stats
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-1464992-48']);
+    _gaq.push(['_trackPageview']);
+
+    // thegoogleiife
+    (function() {
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+
+    </script>    
+    <link href="http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT" rel="stylesheet" type="text/css">
+    <style>
+      body {background: #eee; font-family: sans-serif;min-height: 800px; text-align:center; background-image : -moz-radial-gradient(top, #fff, #ccc);background-image : -webkit-gradient(radial, 330 280, 0, 62 60, 0, from(#fff), to(#ccc), color-stop(10%, #fff));}
+      h1, h2 {font-weight: bold; color: #555; text-shadow: 1px 1px 0px #ccc; font-family:'OFL Sorts Mill Goudy TT',georgia,times,serif;}
+      h1 {padding: 50px 70px;  font-size: 40px; line-height: 50px; background: #fff; -moz-box-shadow:0px 0px 5px #666 inset;-webkit-box-shadow:0px 0px 5px #666 inset;-o-box-shadow:0px 0px 5px #666 inset;box-shadow:0px 0px 5px #666 inset;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;}
+      h1 a {color: #DD4F4C; text-decoration: none; text-shadow: -1px -1px 0px #bbb;}
+      h1, .dataurl {margin: 60px auto 0 auto; width: 400px;}
+      .dataurl {text-align: left; overflow-x: scroll; margin-top:10px;white-space: nowrap;padding: 5px;background: #fff; border: 1px solid #ccc;padding:10px;}
+      strong {clear:both; display:block;}
+      p a{position:relative; bottom: 0px; margine: 0 auto; color: #339; font-size: 16px; text-decoration: none}
+    </style>
+  </head> 
+<body>  
+  <h1>Drop one or more files here to convert them to <a href="https://developer.mozilla.org/en/data_URIs">Data URIs</a></h1>
+  <p>A <a href="http://bocoup.com" title="The JavaScript Company">Bocoup</a> tool. <a href="http://weblog.bocoup.com/using-datatransfer-with-jquery-events">Using dataTransfer and FileReader with jQuery Explained &rarr;</a></p>
+</body> 
+</html>