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.
thêm chi tiết (bằng tiếng Anh)
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.
// thêm chi tiết (bằng tiếng Anh)
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>."
// thêm chi tiết (bằng tiếng Anh)
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) thêm chi tiết (bằng tiếng Anh) |
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 thêm chi tiết (bằng tiếng Anh) |
undefined |
dictionary or string | |
text_in_xx |
custom notification text for language "xx" e.g. text_de for german and text_it for italian thêm chi tiết (bằng tiếng Anh) |
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;
}