diff options
author | Mottie <wowmotty@gmail.com> | 2015-08-19 05:15:51 +0300 |
---|---|---|
committer | Mottie <wowmotty@gmail.com> | 2015-08-19 05:41:11 +0300 |
commit | 7ba5fb154de66dfd4235b48072f5ca886254bfb9 (patch) | |
tree | 01480503f441bdb8b917861ef9f4195a856a99e4 | |
parent | 1e38c82cdac0d0a5ae489bd395b2a3c3c6a5476e (diff) |
Switch to using tabs, consistently
-rw-r--r-- | css/printliminator.css | 81 | ||||
-rw-r--r-- | css/style.css | 20 | ||||
-rw-r--r-- | index.html | 52 | ||||
-rw-r--r-- | js/printliminator.js | 395 |
4 files changed, 317 insertions, 231 deletions
diff --git a/css/printliminator.css b/css/printliminator.css index 9c9ef0f..add9bc5 100644 --- a/css/printliminator.css +++ b/css/printliminator.css @@ -1,39 +1,44 @@ -@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 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; } -} +}
+
+@media screen {
+ body { padding: 20px; }
+}
diff --git a/css/style.css b/css/style.css index c007153..882051e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,14 +1,14 @@ /* - CSS-Tricks Example - by Chris Coyier - http://css-tricks.com +CSS-Tricks Example +by Chris Coyier +http://css-tricks.com */ -* { margin: 0; padding: 0; } -body { font: 20px/1.6 Georgia, serif; } +* { 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 +#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; } @@ -1,37 +1,37 @@ <head> <meta charset='UTF-8'> - + <title>The Printliminator</title> - + <link rel="stylesheet" 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> - - <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> - -</body> + + <h1>The Printliminator <span style="font-size: 12px; color: red; letter-spacing: 1px;">BETA</span></h1> + + <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> + + </body> </html>
\ No newline at end of file diff --git a/js/printliminator.js b/js/printliminator.js index 23c4a90..035a53a 100644 --- a/js/printliminator.js +++ b/js/printliminator.js @@ -1,7 +1,7 @@ function printlimator() { - //remove conflicts with other javascript libraries + //remove conflicts with other javascript libraries var $ = jQuery; - + //like the hover function, but for mousedown state $.fn.active = function(fn1, fn2) { var el = this; @@ -9,170 +9,251 @@ function printlimator() { $(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'); - + $('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'); + 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); - + $('<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); - + $('<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); + $('<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 + }; }); - }); - }).appendTo(controls); - + 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 + $('<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"); + } |