├── .eslintrc.json ├── bower.json ├── javascripts └── scale.fix.js ├── package.json ├── jquery.backDetect.min.js ├── params.json ├── README.md ├── jquery.backDetect.js ├── stylesheets ├── github-light.css └── styles.css └── index.html /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb-base" 3 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-backdetect", 3 | "description": "backDetect is a jQuery plugin that fires a callback function when a user hits the browser's back button.", 4 | "main": "jquery.backDetect.js", 5 | "authors": [ 6 | "Ian Rogren" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "backdetect", 11 | "back-detect", 12 | "jquery", 13 | "jquery-plugin" 14 | ], 15 | "homepage": "https://github.com/ianrogren/jquery-backDetect", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /javascripts/scale.fix.js: -------------------------------------------------------------------------------- 1 | var metas = document.getElementsByTagName('meta'); 2 | var i; 3 | if (navigator.userAgent.match(/iPhone/i)) { 4 | for (i=0; i-1||f.frameNavigator.indexOf("Trident")>-1?setTimeout(function(){a('').appendTo(f.frameThis)},f.frameDelay):setTimeout(function(){a("").appendTo(f.frameThis)},f.frameDelay)},a.fn.frameInit=function(){f.frameDetect=document.getElementById("backDetectFrame"),f.frameLoaded>1&&2===f.frameLoaded&&(f.frameCallBack.call(this),r.history.go(-1)),f.frameLoaded+=1,1===f.frameLoaded&&(f.frameTime=setTimeout(function(){e.fn.setupFrames()},500))},a.fn.setupFrames=function(){clearTimeout(f.frameTime),f.frameSrc=f.frameDetect.src,1===f.frameLoaded&&-1===f.frameSrc.indexOf("historyLoaded")&&(f.frameNavigator.indexOf("MSIE ")>-1||f.frameNavigator.indexOf("Trident")>-1?f.frameDetect.src=f.frameDataSrc+"?historyLoaded":f.frameDetect.src="about:blank?historyLoaded")}}(jQuery); -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Jquery-backdetect","tagline":"jQuery backDetect is a jQuery plugin that is used to determine when a user clicks the back button and fire a callback function.","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery backDetect 2 | --- 3 | 4 | Determining when a user clicks their browser's back button has never been easier with this jQuery plugin. With a quick easy install and minimal set up work you'll be firing callback functions on back button declarations in no time. 5 | 6 | View a demo of it here. 7 | 8 | **Disclaimer:** This plugin was originally developed for an edge case where I did not have access to the all of the history state functions and I needed a way to set localStorage variable when the back button was clicked. This plugin works great for very simple back detection, but if you need to do anything more advanced that involves history state functions, this might not be the plugin for you. 9 | 10 | ### Installation 11 | --- 12 | - Download the latest release from here (or `npm install jquery-backdetect` or `bower install jquery-backdetect`) 13 | - Copy either `jquery.backDetect.js` or `jquery.backDetect.min.js` to your scripts folder 14 | - Include the script after you call on `jQuery` 15 | 16 | ### Browser Support 17 | 18 | | Chrome | Firefox | Internet Explorer | Safari | 19 | | --- | --- | --- | --- | 20 | | All ✔ | All ✔ | All ✔ | All ✔ | 21 | 22 | ### Basic Usage 23 | 24 | Can append to any element or class: 25 | 26 | ``` javascript 27 | 28 | $(window).load(function(){ 29 | $('body').backDetect(function(){ 30 | // Callback function 31 | alert("Look forward to the future, not the past!"); 32 | }); 33 | }); 34 | ``` 35 | 36 | ### Custom Options 37 | 38 | You can set a delay intiate the back detect. Very similar to setting the time in setTimeout: 39 | 40 | ``` javascript 41 | 42 | $(window).load(function(){ 43 | $('body').backDetect(function(){ 44 | // Callback function 45 | alert("Look forward to the future, not the past!"); 46 | }); 47 | }, 1000); // <- 1 second delay 48 | 49 | ```` 50 | 51 | | Settings | Default Value | Description 52 | | --- | --- | --- | 53 | | delay | 
delay: 0
| The length of time it takes for the backDetect plugin to fire and monitor when a user hits the back button. 54 | 55 | ### Change Log 56 | 57 | 1.0.3 Cleaned up javascript and updated README.md 58 | 59 | 1.0.2 Added backDetect to `npm` and `bower` repos. 60 | 61 | 1.0.1 Removed the need for the 1x1.png image for IE. 62 | 63 | 64 | ### Licence 65 | ``` 66 | 67 | __ 68 | _,..,_ (, ) 69 | .,' `,./ 70 | .' :`.----.': `, 71 | : : ^ ^ : ; 72 | : : 6 6 : ; 73 | : : : ; 74 | : : __ : ; 75 | < MIT > : `:'.--.`:' ; 76 | `. : o o : .' 77 | : `----' : 78 | : . :'`: . : 79 | `.:.' `.:.' 80 | ``` 81 | 82 | 83 | -------------------------------------------------------------------------------- /jquery.backDetect.js: -------------------------------------------------------------------------------- 1 | /* eslint-env es5 */ 2 | /* eslint no-undef: 0 */ 3 | /* eslint no-var: 0 */ 4 | /* eslint prefer-template: 0 */ 5 | /* eslint prefer-arrow-callback: 0 */ 6 | 7 | 8 | (function backDection(jQuery) { 9 | var $ = jQuery; 10 | var win = typeof window !== 'undefined' && window; 11 | var backDetectValues = { 12 | frameLoaded: 0, 13 | frameTry: 0, 14 | frameTime: 0, 15 | frameDetect: null, 16 | frameSrc: null, 17 | frameCallBack: null, 18 | frameThis: null, 19 | frameNavigator: window.navigator.userAgent, 20 | frameDelay: 0, 21 | frameDataSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', 22 | }; 23 | 24 | /** 25 | * Back Detect 26 | * 27 | * @param function callback 28 | * @param int delay 29 | */ 30 | $.fn.backDetect = function detectBackClick(callback, delay) { 31 | backDetectValues.frameThis = this; 32 | backDetectValues.frameCallBack = callback; 33 | if (delay !== null) { 34 | backDetectValues.frameDelay = delay; 35 | } 36 | if (backDetectValues.frameNavigator.indexOf('MSIE ') > -1 || backDetectValues.frameNavigator.indexOf('Trident') > -1) { 37 | setTimeout(function loadFrameIE() { 38 | $('').appendTo(backDetectValues.frameThis); 39 | }, backDetectValues.frameDelay); 40 | } else { 41 | setTimeout(function loadFrame() { 42 | $("").appendTo(backDetectValues.frameThis); 43 | }, backDetectValues.frameDelay); 44 | } 45 | }; 46 | 47 | /** 48 | * Initialize Frame 49 | */ 50 | $.fn.frameInit = function initFrame() { 51 | backDetectValues.frameDetect = document.getElementById('backDetectFrame'); 52 | if (backDetectValues.frameLoaded > 1) { 53 | if (backDetectValues.frameLoaded === 2) { 54 | backDetectValues.frameCallBack.call(this); 55 | win.history.go(-1); 56 | } 57 | } 58 | backDetectValues.frameLoaded += 1; 59 | if (backDetectValues.frameLoaded === 1) { 60 | backDetectValues.frameTime = setTimeout(function beginFrameSetup() { 61 | jQuery.fn.setupFrames(); 62 | }, 500); 63 | } 64 | }; 65 | 66 | /** 67 | * Frame Setup 68 | */ 69 | $.fn.setupFrames = function frameSetup() { 70 | clearTimeout(backDetectValues.frameTime); 71 | backDetectValues.frameSrc = backDetectValues.frameDetect.src; 72 | if (backDetectValues.frameLoaded === 1 && backDetectValues.frameSrc.indexOf('historyLoaded') === -1) { 73 | if (backDetectValues.frameNavigator.indexOf('MSIE ') > -1 || backDetectValues.frameNavigator.indexOf('Trident') > -1) { 74 | backDetectValues.frameDetect.src = backDetectValues.frameDataSrc + '?historyLoaded'; 75 | } else { 76 | backDetectValues.frameDetect.src = 'about:blank?historyLoaded'; 77 | } 78 | } 79 | }; 80 | }(jQuery)); 81 | -------------------------------------------------------------------------------- /stylesheets/github-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2014 GitHub Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | .pl-c /* comment */ { 19 | color: #969896; 20 | } 21 | 22 | .pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 23 | .pl-s .pl-v /* string variable */ { 24 | color: #0086b3; 25 | } 26 | 27 | .pl-e /* entity */, 28 | .pl-en /* entity.name */ { 29 | color: #795da3; 30 | } 31 | 32 | .pl-s .pl-s1 /* string source */, 33 | .pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ { 34 | color: #333; 35 | } 36 | 37 | .pl-ent /* entity.name.tag */ { 38 | color: #63a35c; 39 | } 40 | 41 | .pl-k /* keyword, storage, storage.type */ { 42 | color: #a71d5d; 43 | } 44 | 45 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 46 | .pl-s /* string */, 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 48 | .pl-sr /* string.regexp */, 49 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 50 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 51 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */ { 52 | color: #183691; 53 | } 54 | 55 | .pl-v /* variable */ { 56 | color: #ed6a43; 57 | } 58 | 59 | .pl-id /* invalid.deprecated */ { 60 | color: #b52a1d; 61 | } 62 | 63 | .pl-ii /* invalid.illegal */ { 64 | background-color: #b52a1d; 65 | color: #f8f8f8; 66 | } 67 | 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ { 69 | color: #63a35c; 70 | font-weight: bold; 71 | } 72 | 73 | .pl-ml /* markup.list */ { 74 | color: #693a17; 75 | } 76 | 77 | .pl-mh /* markup.heading */, 78 | .pl-mh .pl-en /* markup.heading entity.name */, 79 | .pl-ms /* meta.separator */ { 80 | color: #1d3e81; 81 | font-weight: bold; 82 | } 83 | 84 | .pl-mq /* markup.quote */ { 85 | color: #008080; 86 | } 87 | 88 | .pl-mi /* markup.italic */ { 89 | color: #333; 90 | font-style: italic; 91 | } 92 | 93 | .pl-mb /* markup.bold */ { 94 | color: #333; 95 | font-weight: bold; 96 | } 97 | 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ { 99 | background-color: #ffecec; 100 | color: #bd2c00; 101 | } 102 | 103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ { 104 | background-color: #eaffea; 105 | color: #55a532; 106 | } 107 | 108 | .pl-mdr /* meta.diff.range */ { 109 | color: #795da3; 110 | font-weight: bold; 111 | } 112 | 113 | .pl-mo /* meta.output */ { 114 | color: #1d3e81; 115 | } 116 | 117 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery backDetect - Back button click detection 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 26 | 27 | 28 |
29 |
30 |

backDetect

31 |

Determining when a user clicks their browser's back button has never been easier with this jQuery plugin. With a quick easy install and minimal set up work you'll be firing callback functions on back button declarations in no time.

32 |

View the Project on GitHub ianrogren/jquery-backDetect

33 | 38 |
39 |
40 |

41 | Using jQuery-backDetect 42 |

43 |

Can append to any element or class:

44 | 
  $(window).load(function(){
45 |     $('body').backDetect(function(){
46 |     // Callback function
47 |       alert("Look forward to the future, not the past!");
48 |     });
49 |   });</script>
50 |

Click the back button to test.

51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /stylesheets/styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Noto Sans'; 3 | font-weight: 400; 4 | font-style: normal; 5 | src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot'); 6 | src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix') format('embedded-opentype'), 7 | local('Noto Sans'), 8 | local('Noto-Sans-regular'), 9 | url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2') format('woff2'), 10 | url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff') format('woff'), 11 | url('../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf') format('truetype'), 12 | url('../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans') format('svg'); 13 | } 14 | 15 | @font-face { 16 | font-family: 'Noto Sans'; 17 | font-weight: 700; 18 | font-style: normal; 19 | src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot'); 20 | src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix') format('embedded-opentype'), 21 | local('Noto Sans Bold'), 22 | local('Noto-Sans-700'), 23 | url('../fonts/Noto-Sans-700/Noto-Sans-700.woff2') format('woff2'), 24 | url('../fonts/Noto-Sans-700/Noto-Sans-700.woff') format('woff'), 25 | url('../fonts/Noto-Sans-700/Noto-Sans-700.ttf') format('truetype'), 26 | url('../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans') format('svg'); 27 | } 28 | 29 | @font-face { 30 | font-family: 'Noto Sans'; 31 | font-weight: 400; 32 | font-style: italic; 33 | src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot'); 34 | src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix') format('embedded-opentype'), 35 | local('Noto Sans Italic'), 36 | local('Noto-Sans-italic'), 37 | url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2') format('woff2'), 38 | url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff') format('woff'), 39 | url('../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf') format('truetype'), 40 | url('../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans') format('svg'); 41 | } 42 | 43 | @font-face { 44 | font-family: 'Noto Sans'; 45 | font-weight: 700; 46 | font-style: italic; 47 | src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot'); 48 | src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix') format('embedded-opentype'), 49 | local('Noto Sans Bold Italic'), 50 | local('Noto-Sans-700italic'), 51 | url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2') format('woff2'), 52 | url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff') format('woff'), 53 | url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf') format('truetype'), 54 | url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans') format('svg'); 55 | } 56 | 57 | body { 58 | background-color: #fff; 59 | padding:50px; 60 | font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 61 | color:#727272; 62 | font-weight:400; 63 | } 64 | 65 | h1, h2, h3, h4, h5, h6 { 66 | color:#222; 67 | margin:0 0 20px; 68 | } 69 | 70 | p, ul, ol, table, pre, dl { 71 | margin:0 0 20px; 72 | } 73 | 74 | h1, h2, h3 { 75 | line-height:1.1; 76 | } 77 | 78 | h1 { 79 | font-size:28px; 80 | } 81 | 82 | h2 { 83 | color:#393939; 84 | } 85 | 86 | h3, h4, h5, h6 { 87 | color:#494949; 88 | } 89 | 90 | a { 91 | color:#39c; 92 | text-decoration:none; 93 | } 94 | 95 | a:hover { 96 | color:#069; 97 | } 98 | 99 | a small { 100 | font-size:11px; 101 | color:#777; 102 | margin-top:-0.3em; 103 | display:block; 104 | } 105 | 106 | a:hover small { 107 | color:#777; 108 | } 109 | 110 | .wrapper { 111 | width:860px; 112 | margin:0 auto; 113 | } 114 | 115 | blockquote { 116 | border-left:1px solid #e5e5e5; 117 | margin:0; 118 | padding:0 0 0 20px; 119 | font-style:italic; 120 | } 121 | 122 | code, pre { 123 | font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; 124 | color:#333; 125 | font-size:12px; 126 | } 127 | 128 | pre { 129 | padding:8px 15px; 130 | background: #f8f8f8; 131 | border-radius:5px; 132 | border:1px solid #e5e5e5; 133 | overflow-x: auto; 134 | } 135 | 136 | table { 137 | width:100%; 138 | border-collapse:collapse; 139 | } 140 | 141 | th, td { 142 | text-align:left; 143 | padding:5px 10px; 144 | border-bottom:1px solid #e5e5e5; 145 | } 146 | 147 | dt { 148 | color:#444; 149 | font-weight:700; 150 | } 151 | 152 | th { 153 | color:#444; 154 | } 155 | 156 | img { 157 | max-width:100%; 158 | } 159 | 160 | header { 161 | width:270px; 162 | float:left; 163 | position:fixed; 164 | -webkit-font-smoothing:subpixel-antialiased; 165 | } 166 | 167 | header ul { 168 | list-style:none; 169 | height:40px; 170 | padding:0; 171 | background: #f4f4f4; 172 | border-radius:5px; 173 | border:1px solid #e0e0e0; 174 | width:270px; 175 | } 176 | 177 | header li { 178 | width:89px; 179 | float:left; 180 | border-right:1px solid #e0e0e0; 181 | height:40px; 182 | } 183 | 184 | header li:first-child a { 185 | border-radius:5px 0 0 5px; 186 | } 187 | 188 | header li:last-child a { 189 | border-radius:0 5px 5px 0; 190 | } 191 | 192 | header ul a { 193 | line-height:1; 194 | font-size:11px; 195 | color:#999; 196 | display:block; 197 | text-align:center; 198 | padding-top:6px; 199 | height:34px; 200 | } 201 | 202 | header ul a:hover { 203 | color:#999; 204 | } 205 | 206 | header ul a:active { 207 | background-color:#f0f0f0; 208 | } 209 | 210 | strong { 211 | color:#222; 212 | font-weight:700; 213 | } 214 | 215 | header ul li + li + li { 216 | border-right:none; 217 | width:89px; 218 | } 219 | 220 | header ul a strong { 221 | font-size:14px; 222 | display:block; 223 | color:#222; 224 | } 225 | 226 | section { 227 | width:500px; 228 | float:right; 229 | padding-bottom:50px; 230 | } 231 | 232 | small { 233 | font-size:11px; 234 | } 235 | 236 | hr { 237 | border:0; 238 | background:#e5e5e5; 239 | height:1px; 240 | margin:0 0 20px; 241 | } 242 | 243 | footer { 244 | width:270px; 245 | float:left; 246 | position:fixed; 247 | bottom:50px; 248 | -webkit-font-smoothing:subpixel-antialiased; 249 | } 250 | 251 | @media print, screen and (max-width: 960px) { 252 | 253 | div.wrapper { 254 | width:auto; 255 | margin:0; 256 | } 257 | 258 | header, section, footer { 259 | float:none; 260 | position:static; 261 | width:auto; 262 | } 263 | 264 | header { 265 | padding-right:320px; 266 | } 267 | 268 | section { 269 | border:1px solid #e5e5e5; 270 | border-width:1px 0; 271 | padding:20px 0; 272 | margin:0 0 20px; 273 | } 274 | 275 | header a small { 276 | display:inline; 277 | } 278 | 279 | header ul { 280 | position:absolute; 281 | right:50px; 282 | top:52px; 283 | } 284 | } 285 | 286 | @media print, screen and (max-width: 720px) { 287 | body { 288 | word-wrap:break-word; 289 | } 290 | 291 | header { 292 | padding:0; 293 | } 294 | 295 | header ul, header p.view { 296 | position:static; 297 | } 298 | 299 | pre, code { 300 | word-wrap:normal; 301 | } 302 | } 303 | 304 | @media print, screen and (max-width: 480px) { 305 | body { 306 | padding:15px; 307 | } 308 | 309 | header ul { 310 | width:99%; 311 | } 312 | 313 | header li, header ul li + li + li { 314 | width:33%; 315 | } 316 | } 317 | 318 | @media print { 319 | body { 320 | padding:0.4in; 321 | font-size:12pt; 322 | color:#444; 323 | } 324 | } 325 | --------------------------------------------------------------------------------