From 3c9c186796f9c72bb6e50ea8caebf2ea35dc62c4 Mon Sep 17 00:00:00 2001 From: Chris Coyier Date: Wed, 29 Jun 2011 21:38:44 -0400 Subject: first commit --- .DS_Store | Bin 0 -> 6148 bytes README.markdown | 0 css/printliminator.css | 39 +++++++ css/style.css | 14 +++ images/printliminator-bg.png | Bin 0 -> 1023 bytes images/printliminator-close.png | Bin 0 -> 1469 bytes images/printliminator-printstylize.png | Bin 0 -> 2935 bytes images/printliminator-removeimages.png | Bin 0 -> 4814 bytes images/printliminator-sendtoprinter.png | Bin 0 -> 3164 bytes images/printliminator.png | Bin 0 -> 20669 bytes images/printliminator2.png | Bin 0 -> 36101 bytes index.php | 51 +++++++++ js/printliminator-v1.js | 126 ++++++++++++++++++++++ js/printliminator.js | 178 ++++++++++++++++++++++++++++++++ 14 files changed, 408 insertions(+) create mode 100644 .DS_Store create mode 100644 README.markdown create mode 100644 css/printliminator.css create mode 100644 css/style.css create mode 100644 images/printliminator-bg.png create mode 100644 images/printliminator-close.png create mode 100644 images/printliminator-printstylize.png create mode 100644 images/printliminator-removeimages.png create mode 100644 images/printliminator-sendtoprinter.png create mode 100644 images/printliminator.png create mode 100644 images/printliminator2.png create mode 100644 index.php create mode 100644 js/printliminator-v1.js create mode 100644 js/printliminator.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ba3b77f Binary files /dev/null and b/.DS_Store differ diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..e69de29 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 new file mode 100644 index 0000000..74073bd Binary files /dev/null and b/images/printliminator-bg.png differ diff --git a/images/printliminator-close.png b/images/printliminator-close.png new file mode 100644 index 0000000..dfbfaf5 Binary files /dev/null and b/images/printliminator-close.png differ diff --git a/images/printliminator-printstylize.png b/images/printliminator-printstylize.png new file mode 100644 index 0000000..8ed777b Binary files /dev/null and b/images/printliminator-printstylize.png differ diff --git a/images/printliminator-removeimages.png b/images/printliminator-removeimages.png new file mode 100644 index 0000000..b37d781 Binary files /dev/null and b/images/printliminator-removeimages.png differ diff --git a/images/printliminator-sendtoprinter.png b/images/printliminator-sendtoprinter.png new file mode 100644 index 0000000..ed273f1 Binary files /dev/null and b/images/printliminator-sendtoprinter.png differ diff --git a/images/printliminator.png b/images/printliminator.png new file mode 100644 index 0000000..ab8c6cb Binary files /dev/null and b/images/printliminator.png differ diff --git a/images/printliminator2.png b/images/printliminator2.png new file mode 100644 index 0000000..8b8a0b9 Binary files /dev/null and b/images/printliminator2.png differ diff --git a/index.php b/index.php new file mode 100644 index 0000000..fa21a6f --- /dev/null +++ b/index.php @@ -0,0 +1,51 @@ + + + + The Printliminator + + + + + + +
+ +

The Printliminator BETA

+ +
+ +
+ +

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:

+ +

+ Printliminator + < drag to your bookmarks bar +

+ +

Quick Video Demo

+ + +

Credits

+

By Chris Coyier and Devon Govett. + Icons by Function. + Print stylesheet based on Hartija.

+ +
+ + + + + + + \ 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 = $('
').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 + $('
').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 + $('
').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(""); + }).hover(function(){ + $(this).css({ + "background-position": "0 -237px" + }) + }, function(){ + $(this).css({ + "background-position": "-68px -237px" + }) + }).appendTo(controls); + + //Print + $('
').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 + $('
').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 + $('