├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── default-pt.html
    ├── default.html
    ├── design.html
    ├── index.html
    ├── jquery.html
    └── noajax-fr.html
├── outdatedbrowser
    ├── lang
    │   ├── ar.html
    │   ├── cs.html
    │   ├── da.html
    │   ├── de.html
    │   ├── el.html
    │   ├── en.html
    │   ├── es-pe.html
    │   ├── es.html
    │   ├── et.html
    │   ├── fa.html
    │   ├── fi.html
    │   ├── fr.html
    │   ├── hr.html
    │   ├── hu.html
    │   ├── hy.html
    │   ├── id.html
    │   ├── it.html
    │   ├── ja.html
    │   ├── ko.html
    │   ├── lt.html
    │   ├── nb.html
    │   ├── nl.html
    │   ├── pl.html
    │   ├── pt-br.html
    │   ├── pt.html
    │   ├── ro.html
    │   ├── ru.html
    │   ├── sk.html
    │   ├── sl.html
    │   ├── sv.html
    │   ├── tr.html
    │   ├── uk.html
    │   ├── zh-cn.html
    │   └── zh-tw.html
    ├── outdatedbrowser.css
    ├── outdatedbrowser.js
    ├── outdatedbrowser.min.css
    ├── outdatedbrowser.min.js
    └── outdatedbrowser.scss
└── package.json


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Outdated Browser — Changelog
 3 | 
 4 | ## v1.1.3
 5 | Date: 2016-03-07
 6 | 
 7 |  * New naming system for language files using the IETF language tags.
 8 |  * Changed urls to http://outdatedbrowser.com according to the new language naming system
 9 | 
10 | ## v1.1.2
11 | Date: 2015-09-10
12 | 
13 |  * @alexprg: Add Traditional Chinese
14 | 
15 | ## v1.1.1
16 | Date: 2015-08-21
17 | 
18 |  * @alexprg: Bower support
19 |  * @alexprg: New languages
20 | 
21 | 
22 | ## v1.1.0
23 | Date: 2014-08-05
24 | 
25 |  * @alexprg: Support Languages
26 |  * @alexprg: Ajax and no Ajax Support
27 | 
28 | 
29 | ## v1.0.2
30 | Date: 2014-07-03
31 | 
32 |  * @alexprg: Inline colors for all elements (override page styles)
33 |  * @alexprg: /demo - jquery demo, more info how to use
34 |  * @alexprg: update instructions & link for notice image
35 | 
36 | <br><br>
37 | [Bürocratik](http://burocratik.com)
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 burocratik
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Outdated Browser v1.1.5
  2 | 
  3 | ### A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.
  4 | 
  5 | So, you're tired of people visiting your modern website with an outdated browser and not doing anything about it.
  6 | Maybe they aren't "power" users, maybe it's your auntie running a last century browser trying to see awesome CSS3 animations and transforms. Let the user know that’s an outdated browser, and advise them on a better one.
  7 | 
  8 | With this solution you can check if the user’s browser can handle your website. If not, it will show a cool [looking notice](http://d.pr/i/Xhf) advising the user to update the browser. It’ll be up to the user to upgrade or not. Don't force the user!
  9 | 
 10 | That's it! As simple as it can get.
 11 | 
 12 | ## How to use it
 13 | **Important:** Because of old browsers (e.g. IE6, IE7), we recommend:
 14 | 
 15 | 
 16 | * Implement this plugin before any other javascripts (plugins or your own scripts); 
 17 | * Although we tested the AJAX approach, and it's easier to implement, we recommend to use the plugin without AJAX calls (5.).
 18 | 
 19 | With these points in consideration is less prone to have conflicts with your code. These browsers have "strange" js errors and the plugin may not be working as intended. So keep it simple! 
 20 | 
 21 | 1. Include the CSS located in the HTML head:
 22 | 
 23 |     ```html
 24 |     <link rel="stylesheet" href="your_path/outdatedbrowser/outdatedbrowser.min.css">
 25 |     ```
 26 | 
 27 | 2. Include plugin's script at the bottom of the HTML body:
 28 | 
 29 |     ```html
 30 |     <script src="your_path/outdatedbrowser/outdatedbrowser.min.js"></script>
 31 |     ```
 32 | 
 33 | 3. Paste the required HTML at the end of your document (see demo examples):
 34 | 
 35 |     ```html
 36 |     <div id="outdated"></div>
 37 |     ```
 38 | 
 39 | 4. Call the plugin by placing the following at the bottom of the HTML body:
 40 | 
 41 |     ```javascript
 42 |     // Plain Javascript
 43 |     //event listener: DOM ready
 44 |     function addLoadEvent(func) {
 45 |         var oldonload = window.onload;
 46 |         if (typeof window.onload != 'function') {
 47 |             window.onload = func;
 48 |         } else {
 49 |             window.onload = function() {
 50 |                 if (oldonload) {
 51 |                     oldonload();
 52 |                 }
 53 |                 func();
 54 |             }
 55 |         }
 56 |     }
 57 |     //call plugin function after DOM ready
 58 |     addLoadEvent(function(){
 59 |         outdatedBrowser({
 60 |             bgColor: '#f25648',
 61 |             color: '#ffffff',
 62 |             lowerThan: 'transform',
 63 |             languagePath: 'your_path/outdatedbrowser/lang/en.html'
 64 |         })
 65 |     });
 66 |     ```
 67 | 
 68 |     ```javascript
 69 |     // Using jQuery (version that supports IE < 9)
 70 |     $( document ).ready(function() {
 71 |         outdatedBrowser({
 72 |             bgColor: '#f25648',
 73 |             color: '#ffffff',
 74 |             lowerThan: 'transform',
 75 |             languagePath: 'your_path/outdatedbrowser/lang/en.html'
 76 |         })
 77 |     })
 78 |     ```
 79 | 
 80 | 5. Using the plugin without AJAX calls:
 81 |     
 82 |     ```html
 83 |     <!-- Paste the required HTML at the end of your document (see demo examples) -->
 84 |     <div id="outdated">
 85 |         <h6>Your browser is out-of-date!</h6>
 86 |         <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="https://bestvpn.org/outdatedbrowser/"> Outdated Browser </a></p>
 87 |         <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
 88 |     </div>
 89 |     ```
 90 | 
 91 |     
 92 |     ```javascript
 93 |     // Call the plugin (see 4.) but with the variable languagePath empty: 
 94 |     // DOM ready or jQuery
 95 |     
 96 |     outdatedBrowser({
 97 |         bgColor: '#f25648',
 98 |         color: '#ffffff',
 99 |         lowerThan: 'transform',
100 |         languagePath: ''
101 |     })
102 |     ```
103 | 
104 | 6. Targeting browsers:
105 | 
106 |     You can do it in one of two ways: using Internet Explorer browsers as reference or specifying a CSS property. The outcome is the same, choose what is easier for you (for Edge vs IE11 check issue [#198](https://github.com/burocratik/outdated-browser/issues/198)).
107 | 
108 |     Lower Than (<):
109 |     * "IE11","borderImage"
110 |     * "IE10", "transform" (Default property)
111 |     * "IE9", "boxShadow"
112 |     * "IE8", "borderSpacing"
113 | 
114 | 7. Choose the language:
115 | 
116 |     Download the “lang" folder: If you have the language you want, just write the correct path for the language file in your project; If you don’t have your language, you can write your own html file, and please share it with us.
117 | 
118 | And you're done!
119 | 
120 | *PS*: check the "demo" folder, it may help you.
121 | 
122 | ***
123 | 
124 | 
125 | ## How to install
126 | 
127 | You have several options: you can download the repository manually or you can use a package manager to do that work for you.
128 | 
129 | ```bash
130 | # NPM
131 | $ npm install outdatedbrowser
132 | 
133 | # Yarn
134 | $ yarn add outdatedbrowser
135 | 
136 | # Bower
137 | $ bower install outdated-browser
138 | ```
139 | 
140 | ## FAQ
141 | 
142 | Before opening a new issue please check our [FAQ page](https://github.com/burocratik/outdated-browser/wiki/FAQ)
143 | 
144 | 
145 | ## Contributing
146 | 
147 | * Fork the project.
148 | * Read through the issues or report new ones.
149 | * Write some tests to make sure we don't accidentally break each other's code.
150 | * Send a pull request.
151 | 
152 | **Note:** mind that this is NOT a plugin for the latest browsers, but the complete opposite! The html, css and javascript must work properly in very old browsers (IE6, IE7, etc), so there is no point to use the latest recommendations. It must work properly at least on IE6, so please double test it before sending a pull request.
153 | 
154 | **TRANSLATIONS**
155 | Rename with a proper language abbreviation using the IETF language tags: two-letter language (ISO 639-1)  — two-letter country code (ISO 3166-1). For simplicity we are using all **lower case** and **country code can be omitted if** there is no regional variation. Links with language-country codes: [ISO Language Code Table](http://www.lingoes.net/en/translator/langcode.htm), [Windows Locale Codes](http://www.science.co.il/Language/Locale-codes.asp).
156 | 
157 | Current available languages: ar, cs, da, de, el, en, es, es-pe, et, fa, fi, fr, hr, hu, hy, id, it, ja, ko, lt, nb, nl, pl, pt, pt-br, ro, ru, sk, sl, sv, tr, uk, zh-cn, zh-tw
158 | 
159 | ## CMS, Frameworks, etc
160 | — [Wordpress Plugin](https://github.com/deblynprado/wp-outdated-browser) by Deblyn Prado
161 | — [Ruby Gem](https://github.com/luisalima/outdatedbrowser_rails) by Luisa Lima
162 | — [Yii2 widget](http://www.yiiframework.com/extension/yii2-outdated-browser)
163 | — [Drupal Plugin](https://www.drupal.org/sandbox/agoradesign/2369737) by Mag. Andreas Mayr
164 | — [Magento Extension](https://github.com/gaugeinteractive/magento-outdated-browser) by Joey Hoer
165 | — [Contao Open Source CMS Module](https://github.com/lucasgehin/contao-outdatedbrowser) by Lucas Gehin
166 | 
167 | ## Team
168 | 
169 | Made with love at [Bürocratik](http://burocratik.com) 2014—2019.<br>
170 | Outdated Browser was acquired on June 2019.
171 | 
172 | ## License
173 | 
174 | [MIT License](http://zenorocha.mit-license.org/)
175 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "outdated-browser",
 3 |   "version": "1.1.3",
 4 |   "homepage": "https://github.com/burocratik/outdated-browser",
 5 |   "authors": [
 6 |     "Bürocratik <hello@burocratik.com>"
 7 |   ],
 8 |   "description": "A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.",
 9 |   "moduleType": [
10 |     "globals"
11 |   ],
12 |   "license": "MIT",
13 |   "main": [
14 |     "outdatedbrowser/outdatedbrowser.min.js",
15 |     "outdatedbrowser/outdatedbrowser.min.css",
16 |     "outdatedbrowser/lang"
17 |   ],
18 |   "ignore": [
19 |     "CHANGELOG.md",
20 |     "demo",
21 |     "bower_components"
22 |   ],
23 |   "dependencies": {
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/demo/default-pt.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Outdated Browser</title>
 6 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 7 |     <!-- Styles -->
 8 |     <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
 9 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
10 |     <style type="text/css">
11 |         body {
12 |             font-family: 'Open Sans', sans-serif; text-align: center;
13 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
14 |         }
15 |         h1{font-size: 2.6em; line-height: 2em;}
16 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
17 |         h3 span, h4 span{text-transform: none;}
18 |         p{padding-bottom: 1em;}
19 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
20 |         a {color: #0a0a0a;}
21 |         ul{list-style-type: none; padding: 0;}
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 |     <!-- ============= YOUR CONTENT ============= -->
27 |     <h1><a href="index.html">Outdated Browser</a></h1>
28 |     <p>Remember: If you can't see the message, it's a good thing! You are using a modern browser :D</p>
29 |     <h3>DEFAULT with another language</h3>
30 |     <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform' (&lt;IE10), languagePath: 'your_path/outdatedbrowser/lang/pt.html'</p>
31 |     <h3>What does it look like? <span>(it may differ in your tests)</span></h3>
32 |     <ul>
33 |         <li><a href="http://cl.ly/WiWB">IE6 - XP</a></li>
34 |     </ul>
35 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
36 | 
37 |     <!-- ============= Outdated Browser ============= -->
38 |     <div id="outdated"></div>
39 | 
40 |     <!-- javascript includes -->
41 |     <script src="../outdatedbrowser/outdatedbrowser.min.js"></script>
42 | 
43 |     <!-- plugin call -->
44 |     <script>
45 |         //event listener form DOM ready
46 |         function addLoadEvent(func) {
47 |             var oldonload = window.onload;
48 |             if (typeof window.onload != 'function') {
49 |                 window.onload = func;
50 |             } else {
51 |                 window.onload = function() {
52 |                     if (oldonload) {
53 |                         oldonload();
54 |                     }
55 |                     func();
56 |                 }
57 |             }
58 |         }
59 |         //call function after DOM ready
60 |         addLoadEvent(function(){
61 |             outdatedBrowser({
62 |                 bgColor: '#f25648',
63 |                 color: '#ffffff',
64 |                 lowerThan: 'transform',
65 |                 languagePath: '../outdatedbrowser/lang/pt.html'
66 |             })
67 |         });
68 |     </script>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/demo/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Outdated Browser</title>
 6 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 7 |     <!-- Styles -->
 8 |     <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
 9 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
10 |     <style type="text/css">
11 |         body {
12 |             font-family: 'Open Sans', sans-serif; text-align: center;
13 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
14 |         }
15 |         h1{font-size: 2.6em; line-height: 2em;}
16 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
17 |         h3 span, h4 span{text-transform: none;}
18 |         p{padding-bottom: 1em;}
19 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
20 |         a {color: #0a0a0a;}
21 |         ul{list-style-type: none; padding: 0;}
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 |     <!-- ============= YOUR CONTENT ============= -->
27 |     <h1><a href="index.html">Outdated Browser</a></h1>
28 |     <p>Remember: If you can't see the message, it's a good thing! You are using a modern browser :D</p>
29 |     <h3>DEFAULT</h3>
30 |     <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform' (&lt;IE10), languagePath: 'your_path/outdatedbrowser/lang/en.html'</p>
31 |     <h3>What does it look like? <span>(it may differ in your tests) </span></h3>
32 |     <ul>
33 |         <li><a href="http://cl.ly/Win3">IE9 - Win7</a></li>
34 |         <li><a href="http://cl.ly/WiRz">IE8 - XP</a></li>
35 |         <li><a href="http://cl.ly/Wj3Q">IE7 - Vista</a></li>
36 |         <li><a href="http://cl.ly/WieT">IE6 - XP</a></li>
37 |     </ul>
38 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
39 | 
40 |     <!-- ============= Outdated Browser ============= -->
41 |     <div id="outdated"></div>
42 | 
43 | 
44 |     <!-- javascript includes -->
45 |     <script src="../outdatedbrowser/outdatedbrowser.min.js"></script>
46 | 
47 |     <!-- plugin call -->
48 |     <script>
49 |         //event listener form DOM ready
50 |         function addLoadEvent(func) {
51 |             var oldonload = window.onload;
52 |             if (typeof window.onload != 'function') {
53 |                 window.onload = func;
54 |             } else {
55 |                 window.onload = function() {
56 |                     if (oldonload) {
57 |                         oldonload();
58 |                     }
59 |                     func();
60 |                 }
61 |             }
62 |         }
63 |         //call function after DOM ready
64 |         addLoadEvent(function(){
65 |             outdatedBrowser({
66 |                 bgColor: '#f25648',
67 |                 color: '#ffffff',
68 |                 lowerThan: 'transform',
69 |                 languagePath: '../outdatedbrowser/lang/en.html'
70 |             })
71 |         });
72 |     </script>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/demo/design.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Outdated Browser</title>
 6 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 7 |     <!-- Styles -->
 8 |     <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
 9 | 
10 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
11 |     <style type="text/css">
12 |         body {
13 |             font-family: 'Open Sans', sans-serif; text-align: center;
14 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
15 |         }
16 |         h1{font-size: 2.6em; line-height: 2em;}
17 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
18 |         h3 span, h4 span{text-transform: none;}
19 |         p{padding-bottom: 1em;}
20 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
21 |         a {color: #0a0a0a;}
22 |         ul{list-style-type: none; padding: 0;}
23 |         /*do not use this!*/
24 |         h6, p{color: #0a0a0a;} /* test to be sure that I have inline colors! IE6-9 kills me!*/
25 |         #outdated{display: block;}
26 |     </style>
27 | </head>
28 | 
29 | <body>
30 |     <!-- ============= YOUR CONTENT ============= -->
31 |     <h1><a href="index.html">Outdated Browser</a></h1>
32 |     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu accumsan nisi. Aenean consequat, metus faucibus commodo tristique, quam lorem porta eros, fermentum commodo dolor arcu nec est. Vivamus commodo, eros vel accumsan tempus, nisl lorem lobortis nisl, rhoncus pretium odio ligula quis arcu. Praesent eget sapien mattis, aliquam velit ut, hendrerit dui. Aliquam eget sapien erat. Vestibulum tristique tempor dolor. Vestibulum pulvinar condimentum nibh, id cursus massa faucibus vitae.</p>
33 |     <h3>DEFAULT</h3>
34 |     <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform'  (&lt;IE10), languagePath: ''</p>
35 |     <h3>IMPORTANT</h3>
36 |     <p>DO NOT USE THIS HTML! It's just to show off the design!</p>
37 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
38 | 
39 | 
40 |     <!-- ============= Outdated Browser ============= -->
41 |     <div id="outdated">
42 |         <h6>Your browser is out-of-date!</h6>
43 |         <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
44 |         <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
45 |     </div>
46 | 
47 |     <!-- javascript includes -->
48 |     <script src="../outdatedbrowser/outdatedbrowser.min.js"></script>
49 | 
50 | 
51 |     <!-- plugin call -->
52 |     <script>
53 |         //event listener form DOM ready
54 |         function addLoadEvent(func) {
55 |             var oldonload = window.onload;
56 |             if (typeof window.onload != 'function') {
57 |                 window.onload = func;
58 |             } else {
59 |                 window.onload = function() {
60 |                     if (oldonload) {
61 |                         oldonload();
62 |                     }
63 |                     func();
64 |                 }
65 |             }
66 |         }
67 |         //call function after DOM ready
68 |         addLoadEvent(function(){
69 |             outdatedBrowser({
70 |                 bgColor: '#f25648',
71 |                 color: '#ffffff',
72 |                 lowerThan: 'transform',
73 |                 languagePath: ''
74 |             })
75 |         });
76 |     </script>
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Outdated Browser</title>
 6 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 7 |     <!-- Styles -->
 8 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 9 |     <style type="text/css">
10 |         body {
11 |             font-family: 'Open Sans', sans-serif; text-align: center;
12 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
13 |         }
14 |         h1{font-size: 2.6em; line-height: 2em;}
15 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
16 |         h3 span, h4 span{text-transform: none;}
17 |         p{padding-bottom: 1em;}
18 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
19 |         a {color: #0a0a0a;}
20 |         ul{list-style-type: none; padding: 0;}
21 |     </style>
22 | </head>
23 | 
24 | <body>
25 |     <h1><a href="index.html">Outdated Browser</a></h1>
26 |     <h3>Examples</h3>
27 |     <ul>
28 |         <li><a href="default.html">Default use: Ajax + English</a></li>
29 |         <li><a href="default-pt.html">Ajax + Portuguese</a></li>
30 |         <li><a href="noajax-fr.html">No ajax + Français</a></li>
31 |         <li><a href="jquery.html">jQuery version that supports IE6 to IE8 (default use)</a></li>
32 |         <li><a href="design.html">Design example (no ajax)</a></li>
33 |     </ul>
34 |     <h4>Remember:</h4>
35 |     <ul>
36 |         <li>1. AJAX: test in a WEB SERVER, because some browsers won't allow access to local files from the ajax script.</li>
37 |         <li>2. CSS in the html head</li>
38 |         <li>3. HTML at the bottom of your the document</li>
39 |         <li>4. JS just before <code> &lt;&#47;body&gt;</code></li>
40 |         <li>5. Because of old browsers (e.g. IE6, IE7), we recommend to implement this plugin before <br> any other javascripts (plugins or your own scripts) - these browsers have "strange" js errors <br> and the plugin may not be working as intended</li>
41 |     </ul>
42 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/demo/jquery.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Outdated Browser</title>
 7 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 8 |     <!-- Styles -->
 9 |     <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
10 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
11 |     <style type="text/css">
12 |         body {
13 |             font-family: 'Open Sans', sans-serif; text-align: center;
14 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
15 |         }
16 |         h1{font-size: 2.6em; line-height: 2em;}
17 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
18 |         h3 span, h4 span{text-transform: none;}
19 |         p{padding-bottom: 1em;}
20 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
21 |         a {color: #0a0a0a;}
22 |         ul{list-style-type: none; padding: 0;}
23 |     </style>
24 | </head>
25 | 
26 | <body>
27 |     <!-- ============= YOUR CONTENT ============= -->
28 |     <h1><a href="index.html">Outdated Browser</a></h1>
29 |     <p>Remember: If you can't see the message, it's a good thing! You are using a modern browser :D</p>
30 |     <h3>DEFAULT properties but using jQuery (must support IE6+)</h3>
31 |     <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform'  (&lt;IE10), languagePath: 'your_path/outdatedbrowser/lang/en.html'</p>
32 |     <h3>What does it look like? <span>(it may differ in your tests) </span></h3>
33 |     <ul>
34 |         <li><a href="http://cl.ly/Whwf">IE7 - VISTA</a></li>
35 |     </ul>
36 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
37 | 
38 |     <!-- ============= Outdated Browser ============= -->
39 |     <div id="outdated"></div>
40 | 
41 |     <!-- javascript includes -->
42 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
43 |     <script src="../outdatedbrowser/outdatedbrowser.min.js"></script>
44 | 
45 |     <!-- plugin call -->
46 |     <script>
47 |         //USING jQuery
48 |         $(document).ready(function() {
49 |             outdatedBrowser({
50 |                 bgColor: '#f25648',
51 |                 color: '#ffffff',
52 |                 lowerThan: 'transform',
53 |                 languagePath: '../outdatedbrowser/lang/en.html'
54 |             })
55 |         })
56 |     </script>
57 | 
58 |     </script>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/demo/noajax-fr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Outdated Browser</title>
 6 |     <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
 7 |     <!-- Styles -->
 8 |     <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
 9 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
10 |     <style type="text/css">
11 |         body {
12 |             font-family: 'Open Sans', sans-serif; text-align: center;
13 |             background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
14 |         }
15 |         h1{font-size: 2.6em; line-height: 2em;}
16 |         h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
17 |         h3 span, h4 span{text-transform: none;}
18 |         p{padding-bottom: 1em;}
19 |         p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
20 |         a {color: #0a0a0a;}
21 |         ul{list-style-type: none; padding: 0;}
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 |     <!-- ============= YOUR CONTENT ============= -->
27 |     <h1><a href="index.html">Outdated Browser</a></h1>
28 |     <p>Remember: If you can't see the message, it's a good thing! You are using a modern browser :D</p>
29 |     <h3>NOAJAX with another language</h3>
30 |     <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform'  (&lt;IE10), languagePath: ''</p>
31 |     <h3>What does it look like? <span>(it may differ in your tests) </span></h3>
32 |     <ul>
33 |         <li><a href="http://cl.ly/Wj2x">IE6 - XP</a></li>
34 |     </ul>
35 |     <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>
36 | 
37 |     <!-- ============= Outdated Browser ============= -->
38 |     <div id="outdated">
39 |         <h6>Votre navigateur est désuet!</h6>
40 |         <p>Mettez à jour votre navigateur pour afficher correctement ce site Web. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/fr">Mettre à jour maintenant </a></p>
41 |         <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Fermer">&times;</a></p>
42 |     </div>
43 | 
44 |     <!-- javascript includes -->
45 |     <script src="../outdatedbrowser/outdatedbrowser.min.js"></script>
46 | 
47 |     <!-- plugin call -->
48 |     <script>
49 |         //event listener form DOM ready
50 |         function addLoadEvent(func) {
51 |             var oldonload = window.onload;
52 |             if (typeof window.onload != 'function') {
53 |                 window.onload = func;
54 |             } else {
55 |                 window.onload = function() {
56 |                     if (oldonload) {
57 |                         oldonload();
58 |                     }
59 |                     func();
60 |                 }
61 |             }
62 |         }
63 |         //call function after DOM ready
64 |         addLoadEvent(function(){
65 |             outdatedBrowser({
66 |                 bgColor: '#f25648',
67 |                 color: '#ffffff',
68 |                 lowerThan: 'transform',
69 |                 languagePath: ''
70 |             })
71 |         });
72 |     </script>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/ar.html:
--------------------------------------------------------------------------------
1 |  <h6 dir="rtl">متصفحك يحتاج تحديث!</h6>
2 |  <p dir="rtl">الرجاء تحديث متصفحك لمشاهدة الموقع بشكل جيد۔ <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/ar">تحديث المتصفح الآن </a></p>
3 |  <p class="last" dir="rtl"><a href="#" id="btnCloseUpdateBrowser" title="إغلاق">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/cs.html:
--------------------------------------------------------------------------------
1 |  <h6>Váš prohlížeč je zastaralý!</h6>
2 |  <p>Pro správné zobrazení těchto stránek aktualizujte svůj prohlížeč. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/cs">Aktualizovat prohlížeč nyní</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Zavřít">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/da.html:
--------------------------------------------------------------------------------
1 |  <h6>Din browser er forældet!</h6>
2 |  <p>Opdatér din browser for at få vist denne hjemmeside ordentligt. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/da">Opdater min browser nu </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/de.html:
--------------------------------------------------------------------------------
1 |  <h6>Ihr Browser ist veraltet!</h6>
2 |  <p>Bitte aktualisieren Sie Ihren Browser, um diese Website korrekt darzustellen. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/de">Den Browser jetzt aktualisieren </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Schließen">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/el.html:
--------------------------------------------------------------------------------
1 | <h6>Το προγραμμα περιηγησης (φυλλομετρητης/browser) που χρησιμοποιεις για το internet δεν ειναι ενημερωμενο!</h6>
2 | <p>Ενημερωσε το προγραμμα περιηγησης για να δεις αυτη την ιστοσελιδα σωστα. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/el">Ενημερωση του προγραμματος περιηγησης τωρα</a> </p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>


--------------------------------------------------------------------------------
/outdatedbrowser/lang/en.html:
--------------------------------------------------------------------------------
1 |  <h6>Your browser is out of date!</h6>
2 |  <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/es-pe.html:
--------------------------------------------------------------------------------
1 | <h6>¡Tu navegador no está actualizado!</h6>
2 | <p>Actualiza tu navegador para visualizar esta página correctamente. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/es">Actualizar mi navegador ahora! </a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Cerrar">&times;</a></p>


--------------------------------------------------------------------------------
/outdatedbrowser/lang/es.html:
--------------------------------------------------------------------------------
1 |  <h6>¡Tu navegador está obsoleto!</h6>
2 |  <p>Actualiza tu navegador para ver esta página correctamente. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/es">Actualizar mi navegador ahora</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Cerrar">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/et.html:
--------------------------------------------------------------------------------
1 | <h6>Sinu veebilehitseja on vananenud!</h6>
2 | <p>Palun uuenda oma veebilehitsejat, et näha lehekülge korrektselt. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/et">Uuenda oma veebilehitsejat kohe</a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Sulge">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/fa.html:
--------------------------------------------------------------------------------
1 | <h6 dir="rtl">مرورگر شما منسوخ شده است!</h6>
2 | <p dir="rtl">جهت مشاهده صحیح این وبسایت، مرورگرتان را بروز رسانی نمایید. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">همین حالا مرورگرم را بروز کن </a></p>    
3 | <p dir="rtl" class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/fi.html:
--------------------------------------------------------------------------------
1 |  <h6>Selaimesi on vanhentunut!</h6>
2 |  <p>Lataa ajantasainen selain n&auml;hd&auml;ksesi t&auml;m&auml;n sivun oikein. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/fi">P&auml;ivit&auml; selaimeni nyt </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Sulje">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/fr.html:
--------------------------------------------------------------------------------
1 |  <h6>Votre navigateur est obsolète!</h6>
2 |  <p>Mettez à jour votre navigateur pour afficher correctement ce site Web. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/fr">Mettre à jour maintenant </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Fermer">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/hr.html:
--------------------------------------------------------------------------------
1 |  <h6>Vaš Internet preglednik nije ažuriran!</h6>
2 |  <p>Ažurirajte Vaš preglednik za ispravan prikaz ove stranice. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Ažuriraj odmah </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Zatvori">&times;</a></p>


--------------------------------------------------------------------------------
/outdatedbrowser/lang/hu.html:
--------------------------------------------------------------------------------
1 |  <h6>A böngészője elavult!</h6>
2 |  <p>Frissítse vagy cserélje le a böngészőjét. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/hu">A böngészőm frissítése </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/hy.html:
--------------------------------------------------------------------------------
1 |  <h6>Ձեր բրոուզերը հնացել է!</h6>
2 |  <p>Թարմացրեք այն, որպեսզի տեսնեք այս կայքը ճշգրիտ։ <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Թարմացնել իմ բրոուզերը հիմա։ </a></p>
3 |  <p class="last"><button id="btnCloseUpdateBrowser" title="Close" aria-label="Close">&times;</button></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/id.html:
--------------------------------------------------------------------------------
1 |  <h6>Browser yang Anda gunakan sudah ketinggalan zaman!</h6>
2 |  <p>Perbaharuilah browser Anda agar bisa menjelajahi website ini dengan nyaman. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Perbaharui browser sekarang </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/it.html:
--------------------------------------------------------------------------------
1 |  <h6>Il tuo browser non &egrave; aggiornato!</h6>
2 |  <p>Aggiornalo per vedere questo sito correttamente. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/it">Aggiorna ora</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Chiudi">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/ja.html:
--------------------------------------------------------------------------------
1 | <h6>あなたのブラウザはもう古いです</h6>
2 | <p>こちらのサイトを閲覧するためには、ブラウザをアップグレードしてください。 <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/ja">ブラウザをアップグレードする</a></p>
3 | <p class="last"> <a href="#" id="btnCloseUpdateBrowser" title="閉じる"> &times; </a></p>


--------------------------------------------------------------------------------
/outdatedbrowser/lang/ko.html:
--------------------------------------------------------------------------------
1 |  <h6>브라우저가 오래되었습니다!</h6>
2 |  <p>이 웹 페이지가 현재 브라우저에서는 정상적으로 보이지 않을 수 있습니다. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/ko">지금 브라우저를 업그레이드하세요! </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/lt.html:
--------------------------------------------------------------------------------
1 |  <h6>Jūsų naršyklės versija yra pasenusi!</h6>
2 |  <p>Atnaujinkite savo naršyklę, kad galėtumėte peržiūrėti šią svetainę tinkamai. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Atnaujinti naršyklę </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/nb.html:
--------------------------------------------------------------------------------
1 | <h6>Nettleseren din er avleggs!</h6>
2 | <p>Oppdater nettleseren din for å oppleve nettstedet riktig. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com">Oppdater nettleseren min nå</a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Lukk">&times;</a></p>
4 | 
5 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/nl.html:
--------------------------------------------------------------------------------
1 |  <h6>Je gebruikt een verouderde browser!</h6>
2 |  <p>Update je browser om deze website correct te bekijken. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/nl">Update mijn browser nu </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Sluiten">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/pl.html:
--------------------------------------------------------------------------------
1 | <h6>Twoja przeglądarka jest przestarzała!</h6>
2 | <p>Zaktualizuj swoją przeglądarkę, aby poprawnie wyświetlić tę stronę. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/pl">Zaktualizuj przeglądarkę już teraz </a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/pt-br.html:
--------------------------------------------------------------------------------
1 |  <h6>O seu navegador est&aacute; desatualizado!</h6>
2 |  <p>Atualize o seu navegador para ter uma melhor experi&ecirc;ncia e visualiza&ccedil;&atilde;o deste site. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/pt-br">Atualize o seu navegador agora</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Fechar">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/pt.html:
--------------------------------------------------------------------------------
1 |  <h6>O seu browser est&aacute; desatualizado!</h6>
2 |  <p>Atualize o seu browser para ter uma melhor experi&ecirc;ncia e visualiza&ccedil;&atilde;o deste site. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/pt">Atualize o seu browser agora</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Fechar">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/ro.html:
--------------------------------------------------------------------------------
1 |  <h6>Navigatorul este învechit!</h6>
2 |  <p>Actualizați navigatorul pentru a vizualiza corect acest site. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Actualizați navigatorul acum!</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/ru.html:
--------------------------------------------------------------------------------
1 |  <h6>Ваш браузер устарел!</h6>
2 |  <p>Обновите ваш браузер для правильного отображения этого сайта. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/ru">Обновить мой браузер</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Закрыть">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/sk.html:
--------------------------------------------------------------------------------
1 | <h6>Váš prehliadač je zastaraný!</h6>
2 | <p>Pre správne zobrazenie tejto webstránky aktualizujte svoj prehliadač. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/sk">Aktualizovať prehliadač teraz</a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Zavrieť">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/sl.html:
--------------------------------------------------------------------------------
1 |  <h6>Vaš brskalnik je zastarel!</h6>
2 |  <p>Za pravilen prikaz spletne strani posodobite vaš brskalnik. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/sl">Posodobi brskalnik </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Zapri">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/sv.html:
--------------------------------------------------------------------------------
1 |  <h6>Din webbläsare stödjs ej längre!</h6>
2 |  <p>Uppdatera din webbläsare för att webbplatsen ska visas korrekt. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Uppdatera min webbläsare nu</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Stäng">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/tr.html:
--------------------------------------------------------------------------------
1 | <h6>Tarayıcınız güncel değil!</h6>
2 | <p>Web sitemizi düzgün görüntülemek için tarayıcınızı güncelleyin.<a id="btnUpdateBrowser" href="http://outdatedbrowser.com/tr">Şimdi güncelle </a></p>
3 | <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Kapat">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/uk.html:
--------------------------------------------------------------------------------
1 |  <h6>Ваш браузер застарів!</h6>
2 |  <p>Оновіть ваш браузер для правильного відображення цього сайта. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/uk">Оновити мій браузер </a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/zh-cn.html:
--------------------------------------------------------------------------------
1 |  <h6>您的浏览器已过时</h6>
2 |  <p>要正常浏览本网站请升级您的浏览器。<a id="btnUpdateBrowser" href="http://outdatedbrowser.com/zh-cn">现在升级</a></p>
3 |  <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="关闭">&times;</a></p>
4 | 


--------------------------------------------------------------------------------
/outdatedbrowser/lang/zh-tw.html:
--------------------------------------------------------------------------------
1 | <h6>您的瀏覽器已過時</h6>
2 | <p>要正常瀏覽本網站請升級您的瀏覽器。 <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/zh-tw">現在升級​​</a></p>
3 | <p class="last"> <a href="#" id="btnCloseUpdateBrowser" title="關閉"> &times; </a> </p>


--------------------------------------------------------------------------------
/outdatedbrowser/outdatedbrowser.css:
--------------------------------------------------------------------------------
 1 | /*!--------------------------------------------------------------------
 2 | STYLES "Outdated Browser"
 3 | Version:    1.1.2 - 2015
 4 | author:     Burocratik
 5 | website:    http://www.burocratik.com
 6 | * @preserve
 7 | -----------------------------------------------------------------------*/
 8 | #outdated{
 9 |     display: none; position: fixed; top: 0; left: 0; width: 100%; height: 170px;
10 |     text-align: center; text-transform: uppercase; z-index:1500;
11 |     background-color: #f25648; color: #ffffff;
12 | }
13 | * html #outdated{position: absolute;}
14 | #outdated h6{font-size: 25px; line-height: 25px; margin: 30px 0 10px;}
15 | #outdated p{font-size: 12px; line-height: 12px; margin: 0;}
16 | #outdated #btnUpdateBrowser{
17 |     display: block; position: relative; padding: 10px 20px; margin: 30px auto 0; width: 230px; /*need for IE*/
18 |     color: #ffffff; text-decoration: none; border: 2px solid #ffffff; cursor: pointer;
19 | }
20 | #outdated #btnUpdateBrowser:hover{color: #f25648; background-color:#ffffff;}
21 | #outdated .last{position: absolute; top: 10px; right: 25px; width: 20px; height: 20px;}
22 | #outdated .last[dir='rtl']{right: auto !important; left: 25px !important;}
23 | #outdated #btnCloseUpdateBrowser{
24 |     display: block; position: relative; width: 100%; height: 100%;
25 |     text-decoration: none; color: #ffffff; font-size: 36px; line-height: 36px;
26 | }
27 | 


--------------------------------------------------------------------------------
/outdatedbrowser/outdatedbrowser.js:
--------------------------------------------------------------------------------
  1 | /*!--------------------------------------------------------------------
  2 | JAVASCRIPT "Outdated Browser"
  3 | Version:    1.1.2 - 2015
  4 | author:     Burocratik
  5 | website:    http://www.burocratik.com
  6 | * @preserve
  7 | -----------------------------------------------------------------------*/
  8 | var outdatedBrowser = function(options) {
  9 | 
 10 |     //Variable definition (before ajax)
 11 |     var outdated = document.getElementById("outdated");
 12 | 
 13 |     // Default settings
 14 |     this.defaultOpts = {
 15 |         bgColor: '#f25648',
 16 |         color: '#ffffff',
 17 |         lowerThan: 'transform',
 18 |         languagePath: '../outdatedbrowser/lang/en.html'
 19 |     }
 20 | 
 21 |     if (options) {
 22 |         //assign css3 property or js property to IE browser version
 23 |         if (options.lowerThan == 'IE8' || options.lowerThan == 'borderSpacing') {
 24 |             options.lowerThan = 'borderSpacing';
 25 |         } else if (options.lowerThan == 'IE9' || options.lowerThan == 'boxShadow') {
 26 |             options.lowerThan = 'boxShadow';
 27 |         } else if (options.lowerThan == 'IE10' || options.lowerThan == 'transform' || options.lowerThan == '' || typeof options.lowerThan === "undefined") {
 28 |             options.lowerThan = 'transform';
 29 |         } else if (options.lowerThan == 'IE11' || options.lowerThan == 'borderImage') {
 30 |             options.lowerThan = 'borderImage';
 31 |         }  else if (options.lowerThan == 'Edge' || options.lowerThan == 'js:Promise') {
 32 |             options.lowerThan = 'js:Promise';
 33 |         }
 34 | 
 35 |         //all properties
 36 |         this.defaultOpts.bgColor = options.bgColor;
 37 |         this.defaultOpts.color = options.color;
 38 |         this.defaultOpts.lowerThan = options.lowerThan;
 39 |         this.defaultOpts.languagePath = options.languagePath;
 40 | 
 41 |         bkgColor = this.defaultOpts.bgColor;
 42 |         txtColor = this.defaultOpts.color;
 43 |         cssProp = this.defaultOpts.lowerThan;
 44 |         languagePath = this.defaultOpts.languagePath;
 45 |     } else {
 46 |         bkgColor = this.defaultOpts.bgColor;
 47 |         txtColor = this.defaultOpts.color;
 48 |         cssProp = this.defaultOpts.lowerThan;
 49 |         languagePath = this.defaultOpts.languagePath;
 50 |     } //end if options
 51 | 
 52 | 
 53 |     //Define opacity and fadeIn/fadeOut functions
 54 |     var done = true;
 55 | 
 56 |     function function_opacity(opacity_value) {
 57 |         outdated.style.opacity = opacity_value / 100;
 58 |         outdated.style.filter = 'alpha(opacity=' + opacity_value + ')';
 59 |     }
 60 | 
 61 |     // function function_fade_out(opacity_value) {
 62 |     //     function_opacity(opacity_value);
 63 |     //     if (opacity_value == 1) {
 64 |     //         outdated.style.display = 'none';
 65 |     //         done = true;
 66 |     //     }
 67 |     // }
 68 | 
 69 |     function function_fade_in(opacity_value) {
 70 |         function_opacity(opacity_value);
 71 |         if (opacity_value == 1) {
 72 |             outdated.style.display = 'block';
 73 |         }
 74 |         if (opacity_value == 100) {
 75 |             done = true;
 76 |         }
 77 |     }
 78 | 
 79 |     //check if element has a particular class
 80 |     // function hasClass(element, cls) {
 81 |     //     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
 82 |     // }
 83 | 
 84 |     var supports = ( function() {
 85 |         var div = document.createElement('div');
 86 |         var vendors = 'Khtml Ms O Moz Webkit'.split(' ');
 87 |         var len = vendors.length;
 88 | 
 89 |         return function(prop) {
 90 |             if (prop in div.style) return true;
 91 | 
 92 |             prop = prop.replace(/^[a-z]/, function(val) {
 93 |                 return val.toUpperCase();
 94 |             });
 95 | 
 96 |             while (len--) {
 97 |                 if (vendors[len] + prop in div.style) {
 98 |                     return true;
 99 |                 }
100 |             }
101 |             return false;
102 |         };
103 |     } )();
104 | 
105 |     var validBrowser = false;
106 | 
107 |     // browser check by js props
108 |     if(/^js:+/g.test(cssProp)) {
109 |         var jsProp = cssProp.split(':')[1];
110 |         if(!jsProp)
111 |             return;
112 | 
113 |         switch (jsProp) {
114 | 			case 'Promise':
115 |                 validBrowser = window.Promise !== undefined && window.Promise !== null && Object.prototype.toString.call(window.Promise.resolve()) === '[object Promise]';
116 |                 break;
117 |             default:
118 |                 validBrowser = false;
119 | 		}
120 |     } else {
121 |         // check by css3 property (transform=default)
122 |         validBrowser = supports('' + cssProp + '');
123 |     }
124 | 
125 | 
126 | 	if (!validBrowser) {
127 | 		if (done && outdated.style.opacity !== '1') {
128 | 			done = false;
129 | 			for (var i = 1; i <= 100; i++) {
130 | 				setTimeout((function (x) {
131 | 					return function () {
132 | 						function_fade_in(x);
133 | 					};
134 | 				})(i), i * 8);
135 | 			}
136 | 		}
137 | 	} else {
138 |         return;
139 |     } //end if
140 | 
141 | 
142 |     //Check AJAX Options: if languagePath == '' > use no Ajax way, html is needed inside <div id="outdated">
143 |     if (languagePath === ' ' || languagePath.length == 0) {
144 |         startStylesAndEvents();
145 |     } else {
146 |         grabFile(languagePath);
147 |     }
148 | 
149 |     //events and colors
150 |     function startStylesAndEvents() {
151 |         var btnClose = document.getElementById("btnCloseUpdateBrowser");
152 |         var btnUpdate = document.getElementById("btnUpdateBrowser");
153 | 
154 |         //check settings attributes
155 |         outdated.style.backgroundColor = bkgColor;
156 |         //way too hard to put !important on IE6
157 |         outdated.style.color = txtColor;
158 |         outdated.children[0].style.color = txtColor;
159 |         outdated.children[1].style.color = txtColor;
160 | 
161 |         //check settings attributes
162 |         btnUpdate.style.color = txtColor;
163 |         // btnUpdate.style.borderColor = txtColor;
164 |         if (btnUpdate.style.borderColor) {
165 |             btnUpdate.style.borderColor = txtColor;
166 |         }
167 |         btnClose.style.color = txtColor;
168 | 
169 |         //close button
170 |         btnClose.onmousedown = function() {
171 |             outdated.style.display = 'none';
172 |             return false;
173 |         };
174 | 
175 |         //Override the update button color to match the background color
176 |         btnUpdate.onmouseover = function() {
177 |             this.style.color = bkgColor;
178 |             this.style.backgroundColor = txtColor;
179 |         };
180 |         btnUpdate.onmouseout = function() {
181 |             this.style.color = txtColor;
182 |             this.style.backgroundColor = bkgColor;
183 |         };
184 |     } //end styles and events
185 | 
186 | 
187 |     // IF AJAX with request ERROR > insert english default
188 |     var ajaxEnglishDefault = '<h6>Your browser is out-of-date!</h6>'
189 |         + '<p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>'
190 |         + '<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>';
191 | 
192 | 
193 |     //** AJAX FUNCTIONS - Bulletproof Ajax by Jeremy Keith **
194 |     function getHTTPObject() {
195 |         var xhr = false;
196 |         if (window.XMLHttpRequest) {
197 |             xhr = new XMLHttpRequest();
198 |         } else if (window.ActiveXObject) {
199 |             try {
200 |                 xhr = new ActiveXObject("Msxml2.XMLHTTP");
201 |             } catch ( e ) {
202 |                 try {
203 |                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
204 |                 } catch ( e ) {
205 |                     xhr = false;
206 |                 }
207 |             }
208 |         }
209 |         return xhr;
210 |     }//end function
211 | 
212 |     function grabFile(file) {
213 |         var request = getHTTPObject();
214 |         if (request) {
215 |             request.onreadystatechange = function() {
216 |                 displayResponse(request);
217 |             };
218 |             request.open("GET", file, true);
219 |             request.send(null);
220 |         }
221 |         return false;
222 |     } //end grabFile
223 | 
224 |     function displayResponse(request) {
225 |         var insertContentHere = document.getElementById("outdated");
226 |         if (request.readyState == 4) {
227 |             if (request.status == 200 || request.status == 304) {
228 |                 insertContentHere.innerHTML = request.responseText;
229 |             } else {
230 |                 insertContentHere.innerHTML = ajaxEnglishDefault;
231 |             }
232 |             startStylesAndEvents();
233 |         }
234 |         return false;
235 |     }//end displayResponse
236 | 
237 | ////////END of outdatedBrowser function
238 | };
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 


--------------------------------------------------------------------------------
/outdatedbrowser/outdatedbrowser.min.css:
--------------------------------------------------------------------------------
1 | /*!--------------------------------------------------------------------
2 | STYLES "Outdated Browser"
3 | Version:    1.1.2 - 2015
4 | author:     Burocratik
5 | website:    http://www.burocratik.com
6 | * @preserve
7 | -----------------------------------------------------------------------*/
8 | #outdated{display:none;position:fixed;top:0;left:0;width:100%;height:170px;text-align:center;text-transform:uppercase;z-index:1500;background-color:#f25648;color:#fff}* html #outdated{position:absolute}#outdated h6{font-size:25px;line-height:25px;margin:30px 0 10px}#outdated p{font-size:12px;line-height:12px;margin:0}#outdated #btnUpdateBrowser{display:block;position:relative;padding:10px 20px;margin:30px auto 0;width:230px;color:#fff;text-decoration:none;border:2px solid #fff;cursor:pointer}#outdated #btnUpdateBrowser:hover{color:#f25648;background-color:#fff}#outdated .last{position:absolute;top:10px;right:25px;width:20px;height:20px}#outdated #btnCloseUpdateBrowser{display:block;position:relative;width:100%;height:100%;text-decoration:none;color:#fff;font-size:36px;line-height:36px}


--------------------------------------------------------------------------------
/outdatedbrowser/outdatedbrowser.min.js:
--------------------------------------------------------------------------------
1 | /*!--------------------------------------------------------------------
2 | JAVASCRIPT "Outdated Browser"
3 | Version:    1.1.2 - 2015
4 | author:     Burocratik
5 | website:    http://www.burocratik.com
6 | * @preserve
7 | -----------------------------------------------------------------------*/
8 | var outdatedBrowser=function(t){function o(t){s.style.opacity=t/100,s.style.filter="alpha(opacity="+t+")"}function e(t){o(t),1==t&&(s.style.display="block"),100==t&&(u=!0)}function r(){var t=document.getElementById("btnCloseUpdateBrowser"),o=document.getElementById("btnUpdateBrowser");s.style.backgroundColor=bkgColor,s.style.color=txtColor,s.children[0].style.color=txtColor,s.children[1].style.color=txtColor,o.style.color=txtColor,o.style.borderColor&&(o.style.borderColor=txtColor),t.style.color=txtColor,t.onmousedown=function(){return s.style.display="none",!1},o.onmouseover=function(){this.style.color=bkgColor,this.style.backgroundColor=txtColor},o.onmouseout=function(){this.style.color=txtColor,this.style.backgroundColor=bkgColor}}function l(){var t=!1;if(window.XMLHttpRequest)t=new XMLHttpRequest;else if(window.ActiveXObject)try{t=new ActiveXObject("Msxml2.XMLHTTP")}catch(o){try{t=new ActiveXObject("Microsoft.XMLHTTP")}catch(o){t=!1}}return t}function a(t){var o=l();return o&&(o.onreadystatechange=function(){n(o)},o.open("GET",t,!0),o.send(null)),!1}function n(t){var o=document.getElementById("outdated");return 4==t.readyState&&(o.innerHTML=200==t.status||304==t.status?t.responseText:d,r()),!1}var s=document.getElementById("outdated");this.defaultOpts={bgColor:"#f25648",color:"#ffffff",lowerThan:"transform",languagePath:"../outdatedbrowser/lang/en.html"},t?("IE8"==t.lowerThan||"borderSpacing"==t.lowerThan?t.lowerThan="borderSpacing":"IE9"==t.lowerThan||"boxShadow"==t.lowerThan?t.lowerThan="boxShadow":"IE10"==t.lowerThan||"transform"==t.lowerThan||""==t.lowerThan||"undefined"==typeof t.lowerThan?t.lowerThan="transform":("IE11"==t.lowerThan||"borderImage"==t.lowerThan)&&(t.lowerThan="borderImage"),this.defaultOpts.bgColor=t.bgColor,this.defaultOpts.color=t.color,this.defaultOpts.lowerThan=t.lowerThan,this.defaultOpts.languagePath=t.languagePath,bkgColor=this.defaultOpts.bgColor,txtColor=this.defaultOpts.color,cssProp=this.defaultOpts.lowerThan,languagePath=this.defaultOpts.languagePath):(bkgColor=this.defaultOpts.bgColor,txtColor=this.defaultOpts.color,cssProp=this.defaultOpts.lowerThan,languagePath=this.defaultOpts.languagePath);var u=!0,i=function(){var t=document.createElement("div"),o="Khtml Ms O Moz Webkit".split(" "),e=o.length;return function(r){if(r in t.style)return!0;for(r=r.replace(/^[a-z]/,function(t){return t.toUpperCase()});e--;)if(o[e]+r in t.style)return!0;return!1}}();if(!i(""+cssProp)){if(u&&"1"!==s.style.opacity){u=!1;for(var c=1;100>=c;c++)setTimeout(function(t){return function(){e(t)}}(c),8*c)}" "===languagePath||0==languagePath.length?r():a(languagePath);var d='<h6>Your browser is out-of-date!</h6><p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p><p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>'}};


--------------------------------------------------------------------------------
/outdatedbrowser/outdatedbrowser.scss:
--------------------------------------------------------------------------------
 1 | /*!--------------------------------------------------------------------
 2 | STYLES "Outdated Browser"
 3 | Version:    1.1.2 - 2015
 4 | author:     Burocratik
 5 | website:    http://www.burocratik.com
 6 | * @preserve
 7 | -----------------------------------------------------------------------*/
 8 | #outdated {
 9 | 	display: none;
10 | 	position: fixed;
11 | 	top: 0;
12 | 	left: 0;
13 | 	width: 100%;
14 | 	height: 170px;
15 | 	text-align: center;
16 | 	text-transform: uppercase;
17 | 	z-index:1500;
18 | 	background-color: #f25648;
19 | 	color: #ffffff;
20 | 	h6 {
21 | 		font-size: 25px;
22 | 		line-height: 25px;
23 | 		margin: 30px 0 10px;
24 | 	}
25 | 	p {
26 | 		font-size: 12px;
27 | 		line-height: 12px;
28 | 		margin: 0;
29 | 	}
30 | 	#btnUpdateBrowser {
31 | 		display: block;
32 | 		position: relative;
33 | 		padding: 10px 20px;
34 | 		margin: 30px auto 0;
35 | 		width: 230px; /*need for IE*/
36 | 		color: #ffffff;
37 | 		text-decoration: none;
38 | 		border: 2px solid #ffffff;
39 | 		cursor: pointer;
40 | 		&:hover {
41 | 			color: #f25648;
42 | 			background-color:#ffffff;
43 | 		}
44 | 	}
45 | 	.last {
46 | 		position: absolute;
47 | 		top: 10px;
48 | 		right: 25px;
49 | 		width: 20px;
50 | 		height: 20px;
51 | 		&[dir='rtl'] {
52 | 			right: auto !important;
53 | 			left: 25px !important;
54 | 		}
55 | 	}
56 | 	#btnCloseUpdateBrowser{
57 | 		display: block;
58 | 		position: relative;
59 | 		width: 100%;
60 | 		height: 100%;
61 | 		text-decoration: none;
62 | 		color: #ffffff;
63 | 		font-size: 36px;
64 | 		line-height: 36px;
65 | 	}
66 | 	* html & {
67 | 		position: absolute;
68 | 	}
69 | }
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "outdatedbrowser",
 3 |   "version": "1.1.5",
 4 |   "description": "A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.",
 5 |   "main": "outdatedbrowser/outdatedbrowser.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/burocratik/outdated-browser.git"
 9 |   },
10 |   "author": "Bürocratik <hello@burocratik.com>",
11 |   "license": "MIT",
12 |   "bugs": {
13 |     "url": "https://github.com/burocratik/outdated-browser/issues"
14 |   },
15 |   "homepage": "http://outdatedbrowser.com"
16 | }
17 | 


--------------------------------------------------------------------------------