Customize and test - Browser-Update.org

<!DOCTYPE html > <html lang="nb"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Customize and test - Browser-Update.org</title> <meta name="description" content=""/> <meta name="keywords" content="browser, webbrowser, upgrade browser, update browser, choice, change browser, firefox, safari, opera, firefox, upgrade internet explorer, internet explorer update, ie, safari, konqueror"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="shortcut icon" href="/static/img/favicon.png" type="image/png"/> <link rel="icon" href="/static/img/favicon.png" type="image/png"/> <meta name="robots" content="index,follow"/> <link rel="stylesheet" href="/static/base2.css" type="text/css"/>   </head> <body> <div class="header"> <div class="innerhead"> <h1><a href="/nb/">Browser-Update.org</a></h1> <div class="tagline">Et initiativ av nettsteder for å informere brukere om å oppdatere nettleseren sin</div> <div id="menu"> <input type="checkbox"/> <span></span> <span></span> <span></span> <nav> <div><a href="/nb/">Om prosjektet</a></div> <div><a href="/nb/update-browser.html#3">Oppdater din nettleser</a></div> <div><a href="/nb/stat.html">Statistikk</a></div> <div><a href="/blog.html">Blogg</a></div> <div><a href="/nb/contact.html">Kontakt</a></div> <div id="lang2"> <a>Languages ▼</a> <div> <a href="/en/">english</a> <a href="/de/">deutsch</a> <a href="/fr/">français</a> <a href="/it/">italiano</a> <a href="/pt/">português</a> <a href="/es/">español</a> <a href="/pl/">polski</a> <a href="/nl/">nederlands</a> <a href="/ja/">日本語</a> <a href="/sl/">slovenščina</a> <a href="/ru/">Русский</a> <a href="/ko/">한국어</a> <a href="/id/">Bahasa Indonesia</a> <a href="/uk/">Українська</a> <a href="/rm/">rumantsch</a> <a href="/da/">dansk</a> <a href="/sq/">shqipe</a> <a href="/ca/">català</a> <a href="/sv/">svenska</a> <a href="/hu/">magyar</a> <a href="/fa/">فارسی</a> <a href="/gl/">galego</a> <a href="/he/">עברית</a> <a href="/cs/">Čeština</a> <a href="/nb/">Norsk bokmål</a> <a href="/zh/">簡體中文</a> <a href="/zh_TW/">正體中文</a> <a href="/fi/">suomi</a> <a href="/tr/">Türkçe</a> <a href="/ro/">Română</a> <a href="/hr/">hrvatski</a> <a href="/bg/">български</a> <a href="/el/">Ελληνικά</a> <a href="/ar/">العربية</a> <a href="/sr/">Srpski</a> <a href="/lv/">Latviešu</a> <a href="/ga/">Gaeilge</a> <a href="/no/">Norsk</a> <a href="/th/">ภาษาไทย</a> <a href="/sk/">slovenčina</a> <a href="/hi/">हिन्दी</a> <a href="/vi/">tiếng Việt</a> <a href="/uz/">oʻzbekcha</a> <a href="/et/">eesti keel</a> <a href="/cy/">cymraeg</a> <a href="/nb/contact.html"><b>translate...</b></a> </div> </div> </nav> </div> </div> </div> <div id="co"> <h2>Customize and test</h2> <h3>Test the script</h3> <p> If you open your website with <code>#test-bu</code> appended to the url, the bar will always show up. Example: <code>http://browser-update.org/#test-bu</code>. Make sure the page is properly reloaded by opening the url in an new browser tab. <a href="https://github.com/browser-update/browser-update/wiki/Test-the-notification">flere detaljer (på engelsk)</a> </p> <h3>Options</h3> <p> The following options can be passed to the script: </p> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <pre><code class="javascript">$buoop = { required: {i:8,f:25,o:17,s:9,c:22}, // Specifies required browser versions // Browsers older than this will be notified. // f:22 ---> Firefox < 22 gets notified // Negative numbers specify how much versions behind current version. // c:-5 ---> Chrome < 35 gets notified if latest Chrome version is 40. // <a href="https://github.com/browser-update/browser-update/wiki/Details-on-configuration">flere detaljer (på engelsk)</a> reminder: 24, // after how many hours should the message reappear // 0 = show all the time reminderClosed: 150, // if the user explicitly closes message it reappears after x hours onshow: function(infos){}, onclick: function(infos){}, onclose: function(infos){}, // callback functions after notification has appeared / was clicked / closed l: false, // set a fixed language for the message, e.g. "en". This overrides the default detection. test: false, // true = always show the bar (for testing) text: "", // custom notification text (html) // Placeholders {brow_name} will be replaced with the browser name, {up_but} with contents of the update link tag and {ignore_but} with contents for the ignore link. // Example: "Your browser, {brow_name}, is too old: <a{up_but}>update</a> or <a{ignore_but}>ignore</a>." // <a href="https://github.com/browser-update/browser-update/wiki/Details-on-configuration#user-content-different-messages-depening-on-browser">flere detaljer (på engelsk)</a> text_in_xx: "", // custom notification text for language "xx" // e.g. text_de for german and text_it for italian newwindow: true, // open link in new window/tab url: null, // the url to go to after clicking the notification noclose:false, // Do not show the "ignore" button to close the notification nomessage: false, // Do not show a message if the browser is out of date, just call the onshow callback function jsshowurl: "//browser-update.org/update.show.min.js", // URL where the script, that shows the notification, is located. This is only loaded if the user actually has an outdated browser. container: document.body, // DOM Element where the notification will be injected. no_permanent_hide: false // Do not give the user the option to permanently hide the notification api: xxx // This is the version of the browser-update api to use. Please do not remove. };</code></pre> <table class="bordered"> <tr> <th>Parameter</th> <th>Description</th> <th>Values</th> <th>Default value</th> <th>Type</th> </tr> <tr> <td><code>style</code></td> <td>The position where the notification should be shown. Available options are: "top", "bottom", "corner" </td> <td>"top", "bottom", "corner"</td> <td>"top"</td> <td>string</td> </tr> <tr> <td><code>shift_page_down</code></td> <td>Shift down the page in order not to obscure content behind the notification bar. Adds <code>margin-top</code> to the <code><body></code> tag. </td> <td>true, false</td> <td>true</td> <td>boolean</td> </tr> <tr> <td><code>notify_esr</code></td> <td> Also notify <a href="https://www.mozilla.org/de/firefox/organizations/">Firefox ESR</a> (Extended Support releases) versions if they are below requirement - although they are still supported. Default is to not notify them. They are supported by mozilla for about a year after their initial release. </td> <td>true, false</td> <td>false</td> <td>boolean</td> </tr> <tr> <td><code>text</code></td> <td> custom notification text (html)<br/> <a href="https://github.com/browser-update/browser-update/wiki/Details-on-configuration#user-content-different-messages-depening-on-browser">flere detaljer (på engelsk)</a> </td> <td></td> <td><code> text: { 'msg':'Your web browser ({brow_name}) is out of date.', 'insecure': 'Your web browser ({brow_name}) has a serious security vulnerability!', 'msgmore': 'Update your browser for...', 'bupdate': 'Update browser', 'bignore': 'Ignore', 'remind': 'You will be reminded in {days} days.', 'bnever': 'Never show again' }</code></td> <td>dictionary or string</td> </tr> <tr> <td><code>text_for_x</code></td> <td> custom notification text for browser x<br/> <a href="https://github.com/browser-update/browser-update/wiki/Details-on-configuration#user-content-different-messages-depening-on-browser">flere detaljer (på engelsk)</a> </td> <td></td> <td><code>undefined</code></td> <td>dictionary or string</td> </tr> <tr> <td><code>text_in_xx</code></td> <td> custom notification text for language "xx"<br/> e.g. text_de for german and text_it for italian<br/> <a href="https://github.com/browser-update/browser-update/wiki/Details-on-configuration#user-content-different-messages-depening-on-browser">flere detaljer (på engelsk)</a> </td> <td></td> <td><code>undefined</code></td> <td>dictionary or string</td> </tr> <tr> <td><code>text_for_x_in_xx</code></td> <td> custom notification text for browser x in language xx<br/> <code> text_for_i: {'msg':'Internet Explorer is not supported on this site.'}</code> </td> <td></td> <td><code>undefined</code></td> <td>dictionary or string</td> </tr> </table> <h3>Change the style</h3> <p> The following CSS rules are applied by the notification. You can overwrite them in your own CSS. To do so you need to add some more specificity to the css-rules: e.g. <code>body .buorg {font-size:20px}</code> </p> <pre><code class="css"> .buorg { position: absolute; position: fixed; z-index: 111111; width: 100%; top: 0px; left: 0px; border-bottom: 1px solid #A29330; text-align: center; color: #000; background-color: #fff8ea; font: 18px Calibri, Helvetica, sans-serif; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); animation: 1s ease-out 0s buorgfly } .buorg-pad { padding: 9px; line-height: 1.7em; } .buorg-buttons { display: block; text-align: center; } #buorgig, #buorgul, #buorgpermanent { color: #fff; text-decoration: none; cursor: pointer; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); padding: 1px 10px; border-radius: 4px; font-weight: normal; background: #5ab400; white-space: nowrap; margin: 0 2px; display: inline-block; } #buorgig { background-color: #edbc68; } @media only screen and (max-width: 700px) { .buorg div { padding: 5px 12px 5px 9px; line-height: 1.3em; } } @keyframes buorgfly { from { opacity: 0; transform: translateY(-50px) } to { opacity: 1; transform: translateY(0px) } } .buorg-fadeout { transition: visibility 0s 8.5s, opacity 8s ease-out .5s; } .buorg-icon { width: 22px; height: 16px; vertical-align: middle; position: relative; top: -0.05em; display: inline-block; background: no-repeat 0px center; }</code></pre> </div> <footer> <div class="footer-column"> <div><a href="/nb/#install">Installér nettleseroppdateringsvarselet på nettstedet ditt</a></div> <div><a href="/nb/browsers.html">List of Webbrowsers</a></div> <div><a href="/nb/browsers-marked-as-insecure.html">Insecure browser versions</a></div> </div> <div class="footer-column"> <div><a href="/nb/what-is-my-browser.html'">What is my webbrowser?</a></div> <div><a href="/nb/stat.html">Statistikk</a></div> <div><a href="/nb/customize.html">Customize and test</a></div> </div> <div class="footer-column"> <div><a href="/nb/">Om prosjektet</a></div> <div><a href="/blog.html">Blogg</a></div> <div><a href="/nb/contact.html">Kontakt</a></div> </div> </footer> </body> </html>

CINXE.COM

Customize and test - Browser-Update.org