If you open your website with #test-bu appended to the url, the bar will always show up. Example: http://browser-update.org/#test-bu. Make sure the page is properly reloaded by opening the url in an new browser tab. viac informácií (v angličtine)
The following options can be passed to the script:
$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. // viac informácií (v angličtine) 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>." // viac informácií (v angličtine) 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. };| Parameter | Description | Values | Default value | Type |
|---|---|---|---|---|
style | The position where the notification should be shown. Available options are: "top", "bottom", "corner" | "top", "bottom", "corner" | "top" | string |
shift_page_down | Shift down the page in order not to obscure content behind the notification bar. Adds margin-top to the <body> tag. | true, false | true | boolean |
notify_esr | Also notify Firefox ESR (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. | true, false | false | boolean |
text | custom notification text (html) viac informácií (v angličtine) | 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' } | dictionary or string | |
text_for_x | custom notification text for browser x viac informácií (v angličtine) | undefined | dictionary or string | |
text_in_xx | custom notification text for language "xx" e.g. text_de for german and text_it for italian viac informácií (v angličtine) | undefined | dictionary or string | |
text_for_x_in_xx | custom notification text for browser x in language xx text_for_i: {'msg':'Internet Explorer is not supported on this site.'} | undefined | dictionary or string |
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. body .buorg {font-size:20px}
.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; }