diff options
-rw-r--r-- | .DS_Store | bin | 0 -> 6148 bytes | |||
-rw-r--r-- | README.markdown | 0 | ||||
-rw-r--r-- | css/printliminator.css | 39 | ||||
-rw-r--r-- | css/style.css | 14 | ||||
-rw-r--r-- | images/printliminator-bg.png | bin | 0 -> 1023 bytes | |||
-rw-r--r-- | images/printliminator-close.png | bin | 0 -> 1469 bytes | |||
-rw-r--r-- | images/printliminator-printstylize.png | bin | 0 -> 2935 bytes | |||
-rw-r--r-- | images/printliminator-removeimages.png | bin | 0 -> 4814 bytes | |||
-rw-r--r-- | images/printliminator-sendtoprinter.png | bin | 0 -> 3164 bytes | |||
-rw-r--r-- | images/printliminator.png | bin | 0 -> 20669 bytes | |||
-rw-r--r-- | images/printliminator2.png | bin | 0 -> 36101 bytes | |||
-rw-r--r-- | index.php | 51 | ||||
-rw-r--r-- | js/printliminator-v1.js | 126 | ||||
-rw-r--r-- | js/printliminator.js | 178 |
14 files changed, 408 insertions, 0 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..ba3b77f --- /dev/null +++ b/.DS_Store diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/README.markdown diff --git a/css/printliminator.css b/css/printliminator.css new file mode 100644 index 0000000..9c9ef0f --- /dev/null +++ b/css/printliminator.css @@ -0,0 +1,39 @@ +@media print, screen { + + body { + margin:0; + padding:0; + line-height: 1.4; + word-spacing:1.1pt; + letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; } + + /*Headings */ + h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; } + h1{font-size:19pt;} + h2{font-size:17pt;} + h3{font-size:15pt;} + h4,h5,h6{font-size:12pt;} + + code { font: 10pt Courier, monospace; } + blockquote { margin: 1.3em; padding: 1em; font-size: 10pt; } + hr { background-color: #ccc; } + + /* Images */ + img { float: left; margin: 1em 1.5em 1.5em 0; } + a img { border: none; } + + /* Table */ + table { margin: 1px; text-align:left; border-collapse: collapse; } + th { border: 1px solid #333; font-weight: bold; } + td { border: 1px solid #333; } + th,td { padding: 4px 10px; } + tfoot { font-style: italic; } + caption { background: #fff; margin-bottom: 20px; text-align:left; } + thead {display: table-header-group;} + tr {page-break-inside: avoid;} + +} + +@media screen { + body { padding: 20px; } +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..c007153 --- /dev/null +++ b/css/style.css @@ -0,0 +1,14 @@ +/* + CSS-Tricks Example + by Chris Coyier + http://css-tricks.com +*/ + +* { margin: 0; padding: 0; } +body { font: 20px/1.6 Georgia, serif; } + +#page-wrap { width: 570px; margin: 25px auto; } +h1 { font: bold 50px Helvetica, sans-serif; letter-spacing: -2px; margin: 0 0 15px 0; } +p { margin: 0 0 15px 0; } +.bookmarklet { text-decoration: none; background: black; color: white; padding: 8px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } +h2 { font: bold 32px Helvetica, sans-serif; letter-spacing: -2px; margin: 40px 0 10px 0; }
\ No newline at end of file diff --git a/images/printliminator-bg.png b/images/printliminator-bg.png Binary files differnew file mode 100644 index 0000000..74073bd --- /dev/null +++ b/images/printliminator-bg.png diff --git a/images/printliminator-close.png b/images/printliminator-close.png Binary files differnew file mode 100644 index 0000000..dfbfaf5 --- /dev/null +++ b/images/printliminator-close.png diff --git a/images/printliminator-printstylize.png b/images/printliminator-printstylize.png Binary files differnew file mode 100644 index 0000000..8ed777b --- /dev/null +++ b/images/printliminator-printstylize.png diff --git a/images/printliminator-removeimages.png b/images/printliminator-removeimages.png Binary files differnew file mode 100644 index 0000000..b37d781 --- /dev/null +++ b/images/printliminator-removeimages.png diff --git a/images/printliminator-sendtoprinter.png b/images/printliminator-sendtoprinter.png Binary files differnew file mode 100644 index 0000000..ed273f1 --- /dev/null +++ b/images/printliminator-sendtoprinter.png diff --git a/images/printliminator.png b/images/printliminator.png Binary files differnew file mode 100644 index 0000000..ab8c6cb --- /dev/null +++ b/images/printliminator.png diff --git a/images/printliminator2.png b/images/printliminator2.png Binary files differnew file mode 100644 index 0000000..8b8a0b9 --- /dev/null +++ b/images/printliminator2.png diff --git a/index.php b/index.php new file mode 100644 index 0000000..fa21a6f --- /dev/null +++ b/index.php @@ -0,0 +1,51 @@ +<head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + + <title>The Printliminator</title> + + <link rel="stylesheet" type="text/css" href="css/style.css" /> +</head> + +<body> + + <div id="page-wrap"> + + <h1>The Printliminator <span style="font-size: 12px; color: red; letter-spacing: 1px;">BETA</span></h1> + + <div style="width: 50px; float: right; margin: 0 0 0 15px;"> + <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> + </div> + + <p>The Printliminator is a bookmarklet with some simple tools you can use + to makes websites print better. One click to activate, and then click to remove + elements from the page, remove graphics, and apply better print styling. + Here is the bookmarklet:</p> + + <p> + <a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2',function(){loadScript('http://css-tricks.com/examples/ThePrintliminator/js/printliminator.js',function(){printlimator()})})})()" class="bookmarklet">Printliminator</a> + <span style="font-size: 14px;">< drag to your bookmarks bar</span> + </p> + + <h2>Quick Video Demo</h2> + <embed src="http://blip.tv/play/hMAsgafAFQA" type="application/x-shockwave-flash" width="570" height="428" allowscriptaccess="always" allowfullscreen="true"></embed> + + <h2>Credits</h2> + <p>By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>. + Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>. + Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.</p> + + </div> + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-68528-29"); + pageTracker._initData(); + pageTracker._trackPageview(); + </script> + +</body> + +</html>
\ No newline at end of file diff --git a/js/printliminator-v1.js b/js/printliminator-v1.js new file mode 100644 index 0000000..c0bd33f --- /dev/null +++ b/js/printliminator-v1.js @@ -0,0 +1,126 @@ +function printlimator() { + //remove conflicts with other javascript libraries + var $ = jQuery; + var dont = false; + $('body *:not(._print_controls, ._print_controls *)').live('click', function (e) { + if (!dont) { + e.preventDefault(); + if(e.altKey) { + $("body *").not("._print_controls, ._print_controls *") + .not($(this).parents().andSelf()) + .not($(this).find("*")) + .remove(); + } + else $(this).remove() + } + }).live('mouseover', function () { + if (!dont) $(this).css('outline', '3px solid red') + }).live('mouseout', function () { + if (!dont) $(this).css('outline', 'none') + }); + + var controls = $('<div>').addClass('_print_controls').css({ + position: 'fixed', + top: 15, + right: 15, + width: 258, + height: 101, + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) no-repeat', + zIndex: 10000 + }).mouseover(function () { + dont = true + }).mouseout(function () { + dont = false + }).appendTo('body'); + + //fix IE6, which doesn't support position: fixed + if (controls.css('position') != 'fixed') { + controls.css('position', 'absolute'); + } + + //Remove Graphics + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) -68px -101px no-repeat', + position: 'absolute', + top: 12, + left: 15, + width: 68, + height: 68 + }).click(function () { + $('img,iframe,object,embed,input[type=image],ins').remove(); + $('*:not(._print_controls, ._print_controls *)').css('background-image', 'none'); + }).hover(function(){ + $(this).css({ + "background-position": "0 -101px" + }) + }, function(){ + $(this).css({ + "background-position": "-68px -101px" + }) + }).appendTo(controls); + + // Print Stylize + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) no-repeat -68px -237px', + position: 'absolute', + top: 12, + left: 96, + width: 68, + height: 68 + }).click(function () { + $("link[rel='stylesheet'], style:not(#_print_control_styles)").remove(); + $('body *:not(._print_controls, ._print_controls > *)').attr("style", ""); + $("head").append("<link rel='stylesheet' type='text/css' href='http://css-tricks.com/examples/ThePrintliminator/css/printliminator.css'/>"); + }).hover(function(){ + $(this).css({ + "background-position": "0 -237px" + }) + }, function(){ + $(this).css({ + "background-position": "-68px -237px" + }) + }).appendTo(controls); + + //Print + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) -68px -169px no-repeat', + position: 'absolute', + top: 12, + left: 176, + width: 68, + height: 68 + }).hover(function(){ + $(this).css({ + "background-position": "0 -169px" + }) + }, function(){ + $(this).css({ + "background-position": "-68px -169px" + }) + }).click(function () { + window.print(); + }).appendTo(controls); + + //Close + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator.png) -258px 0 no-repeat', + position: 'absolute', + top: -7, + right: -7, + width: 23, + height: 23 + }).hover(function(){ + $(this).css({ + "background-position": "-281px 0" + }) + }, function(){ + $(this).css({ + "background-position": "-258px 0" + }) + }).click(function(){ + $('._print_controls').remove(); + }).appendTo(controls); + + //make sure that the controls don't get printed + $('<style id="_print_control_styles">').text('@media print{._print_controls{display:none;}}').appendTo("head"); +}
\ No newline at end of file diff --git a/js/printliminator.js b/js/printliminator.js new file mode 100644 index 0000000..23c4a90 --- /dev/null +++ b/js/printliminator.js @@ -0,0 +1,178 @@ +function printlimator() { + //remove conflicts with other javascript libraries + var $ = jQuery; + + //like the hover function, but for mousedown state + $.fn.active = function(fn1, fn2) { + var el = this; + $(el).mousedown(fn1); + $(document).mouseup(function() { + fn2.call(el); + }); + + return this; + }; + + var history = []; + + var dont = false; + $('body *:not(._print_controls, ._print_controls *)').live('click', function (e) { + if (!dont) { + e.preventDefault(); + var done; + if(e.altKey) { + done = $("body *").not("._print_controls, ._print_controls *, style") + .not($(this).parents().andSelf()) + .not($(this).find("*")) + .hide(); + } + else done = $(this).hide(); + + done.addClass("_print_removed"); + history.push(done); + } + }).live('mouseover', function () { + if (!dont) $(this).css('outline', '3px solid red') + }).live('mouseout', function () { + if (!dont) $(this).css('outline', 'none') + }); + + var controls = $('<div>').addClass('_print_controls').css({ + position: 'fixed', + top: 25, + right: 25, + width: 162, + height: 182, + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) no-repeat', + zIndex: 10000 + }).mouseover(function () { + dont = true + }).mouseout(function () { + dont = false + }).appendTo('body'); + + //fix IE6, which doesn't support position: fixed + if (controls.css('position') != 'fixed') { + controls.css('position', 'absolute'); + } + + //Remove Graphics + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) 0 -182px no-repeat', + position: 'absolute', + top: 6, + left: 6, + width: 74, + height: 74 + }).click(function () { + var done = $('img,iframe,object,embed,input[type=image],ins').hide(); + var bg = $('body *:not(._print_controls, ._print_controls *)').css('background'); + var item = $('body *:not(._print_controls, ._print_controls *)').css('background', 'none'); + + done.addClass("_print_removed"); + history.push(function() { + done.show(); + item.css('background', bg); + }); + }).hover(function(){ + $(this).css({ "background-position": "0 -256px" }) }, function() { + $(this).css({ "background-position": "0 -182px" }) + }).active(function(){ + $(this).css({ "background-position": "0 -330px" }) }, function() { + $(this).css({ "background-position": "0 -182px" }) + }).appendTo(controls); + + // Print Stylize + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) no-repeat -222px -182px', + position: 'absolute', + top: 6, + left: 83, + width: 74, + height: 74 + }).click(function () { + window.print(); + }).hover(function(){ + $(this).css({ "background-position": "-222px -256px" }) }, function() { + $(this).css({ "background-position": "-222px -182px" }) + }).active(function(){ + $(this).css({ "background-position": "-222px -330px" }) }, function() { + $(this).css({ "background-position": "-222px -182px" }) + }).appendTo(controls); + + //Print + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -74px -182px no-repeat', + position: 'absolute', + top: 83, + left: 83, + width: 74, + height: 74 + }).hover(function(){ + $(this).css({ "background-position": "-74px -256px" }) }, function() { + $(this).css({ "background-position": "-74px -182px" }) + }).active(function(){ + $(this).css({ "background-position": "-74px -330px" }) }, function() { + $(this).css({ "background-position": "-74px -182px" }) + }).click(function () { + var links = $("link[rel='stylesheet'], style:not(#_print_control_styles)").remove(); + //cache and remove inline styles + var inline = $('body *:not(._print_controls, ._print_controls > *, ._print_removed)').map(function() { + var style = $(this).attr("style"); + $(this).attr("style", ""); + return { + el: this, + style: style + }; + }); + var print = $("<link rel='stylesheet' type='text/css' href='http://css-tricks.com/examples/ThePrintliminator/css/printliminator.css'/>").appendTo("head"); + + history.push(function() { + print.remove(); + links.appendTo("head"); + inline.each(function() { + $(this.el).attr("style", this.style); + }); + }); + }).appendTo(controls); + + //Close + $('<div>').css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -222px -3px no-repeat', + position: 'absolute', + top: -20, + right: -20, + width: 33, + height: 33 + }).hover(function(){ + $(this).css({ "background-position": "-222px -39px" }) }, function(){ + $(this).css({ "background-position": "-222px -3px" }) + }).click(function(){ + $('._print_controls').remove(); + }).appendTo(controls); + + $("<div>").css({ + background: 'url(http://css-tricks.com/examples/ThePrintliminator/images/printliminator2.png) -148px -182px no-repeat', + position: 'absolute', + top: 83, + left: 6, + width: 74, + height: 74 + }).hover(function(){ + $(this).css({ "background-position": "-148px -256px" }) }, function() { + $(this).css({ "background-position": "-148px -182px" }) + }).active(function(){ + $(this).css({ "background-position": "-148px -330px" }) }, function() { + $(this).css({ "background-position": "-148px -182px" }) + }).click(function() { + var last = history.pop(); + if(last) { + if(typeof last != 'function') + last.removeClass("_print_removed").show(); + else last.call(); + } + }).appendTo(controls); + + //make sure that the controls don't get printed + $('<style id="_print_control_styles">').text('@media print{._print_controls{display:none;}}').appendTo("head"); +}
\ No newline at end of file |