Have an Idea?
If you have a good idea and want it to be implemented by DevSlide Labs, get in touch with us!
Browser Detection
Version: 1.1
What It’s For
This Browser Detection script is a tiny JS script written in core JavaScript and is compatible with any JS frameworks such as jQuery and MooTools. The script detects which browser the user is using and displays a friendly (and nice looking) suggestion to anyone running an old browser.
You may download the script for use on your server or you can just load the script from our servers. We created a generator form which will help you quickly configure the script and modify the message to better match your user base.
Key Features
- Easy to install, clean, light script
- Written in core JS and compatible with any JavaScript framework (i.e. jQuery, MooTools, ExtJS, and others)
- Ability to detect browser and operating system
- Fully customizable, or choose from variety of messages
- Nicely styled light box message
A Little History
If you ask anyone who works with XHTML/CSS what they hate most, the answer is always: “I hate IE 6 and Starbuck’s coffee”. Well, we can’t help you with coffee, but we can with the IE6 problem.
We made a tiny (but effective) JS script which detects if an old browser is being used and shows a nice looking, friendly message to the user asking them to upgrade their browser to a more modern browser. It provides the user with links to the official download sites for the most recent versions of several popular browsers. The links open in another window and there is also an option for the user to skip the message and elect to be reminded later or never show the message again.
As for the coffee problem, here is a $13k solution (not a promotion, just a solid solution to crappy coffee) :)
Shot-Down Names ~Sorta’ — (suggest a better name)
- I hate IE6
- Browser Detective
- JavaScript Browser Detection Script
- No old browsers allowed
- Browser Upgrade Notification
- Browser Detection (current choice)
- Browser Breakthrough
- Browservention
- Smart Browser Detection (or Detector)
- Smart Browser Notice (or Notifier)
- Friendly Browser Detection (or Detector)
- Friendly Browser Notice (or Notifier)
- Smart Browser Informer
- Friendly Browser Informer
Technologies Used
- JavaScript
- Ugg… old browsers
Screenshots
System Requirements
- An old crappy browser with ability to display HTML, run JavaScript and store cookies (cookies used to remember the user’s preference if they skip the browser upgrade — to not annoy them too much)
- A solid hatred of hand coding markup for IE6 compatibility
23 Comments
Leave a comment
Have a good idea?
While we've been making apps, scripts and programs for a long time, our labs area is new. So, help us grow it! - It's easy. If you have an idea, need a tool or whatever, just tell us about it, and it might end up in the labs area. :)
Our labs area is for sharing and developing new ideas, which may or may not end up as products. If you have a proprietary project and are looking for a development team, checkout MW7!
Thank you for sharing this script! I added it to my site (and this might be a silly question), but how on earth do I test it? I am using new browsers, of course. Thanks again!
Comment by Maggy
can this be tricked to read if user has a mobile browser???
Comment by christopher
Hi. It’s me again with another name suggestion for Browser Detection. I think a great name would be:
Browservention
It’s a cross between Browser and Intervention because I believe anyone not using the latest and greatest browsers needs an intervention.
Mike
Comment by Mike
This works fantastically well. Thanks for sharing!
The only thing that caused an issue for me was a missing ” after calling the JS (using the browser detection configuration).
Cheers
DaithÃ
Comment by DaithÃ
The IE link is not working. when i tried clicking on IE its redirected me to http://windows.microsoft.com/en-us/internet-explorer/products/ie/home where it says The page you requested cannot be found. Please Fix it
Comment by anish@pcpedia
Why not shuffle the list?
Array.prototype.shuffle = function () {
var j, tmp, i = this.length;
if (i == 0) return false;
while (–i) {
j = Math.floor(Math.random() * (i + 1));
tmp = this[i];
this[i] = this[j];
this[j] = tmp;
}
browsersList.shuffle();
Comment by Kenny
Hi…how to make its pop once? because when user click remind me later, it will pop up again when user visit the website after that.
Thanks
Comment by Arm
This browser detection script is great! I have noticed a minor bug during custom configuration, however:
Line 145 of browser-detection.js:
noticeLangCustom.neverRemindMeAgain
should be
noticeLangCustom.neverRemindAgain
Keep up the great work!
Comment by Taylor
Hi Taylor,
Thank you for pointing this out to us. We were able to recreate the issue and apply a patch. It is now available in the download above.
Comment by Casey - DevSlide Support
Great Script i added this on my site, and i am being reminded that i have to upgrade my browser..cool..
Comment by Surya Kiran
Hi, this script is very useful. Thank you.
I have a problem; It doesn’t detect IE 9 Compatibility Mode. But Trident token indicates browser is IE 9. (Trident/5.0) If the users view in compatible mode, I don’t want to show browser upgrade message. I am going to try fix. Thanks.
Comment by karayakar
Hi, finally I fixed the script, now it is detect to IE 9 Compatibility mode and gives alert to user. here is the changes.
add Trident ;
this.browser = ”;
this.browserVersion = 0;
this.Trident = -1;
……
if (this.browser == ”) {
this.browser = ‘Unknown’;
} else if (this.browserVersion == 0) {
this.browserVersion = parseFloat(new Number(RegExp.$1));
this.Trident = navigator.userAgent.indexOf(“Trident”);
if (this.Trident != -1) {
alert(‘You are using IE 9 Compability Mode\nPlease Exit from Compability mode for best view.’);
}
}
and add trident control to here;
if ((notSupportedBrowsers[i].version == “Any” || (this.browserVersion <= parseFloat(notSupportedBrowsers[i].version) && this.Trident == -1))) {
oldBrowser = true;
break;
}
That's it :)
Thanks.
Comment by karayakar
Your code classifies Internet Explorer 10 as an old browser. Will there be an update to fix this? Thanks!
Comment by Steve Cole
Nice Browser Detection script !
In your Browser Detection Configuration page, the configuration script generated for custom message is not working. the var noticeLang must be set as \’custom\’ to correct the bug !
Have a nice day !
Vincent.
Comment by Vincent
Is this detection script still actively maintained? We’re looking at adding something like this to some of our platforms, but it looks like this one has been forgotten. We couldn’t even get the download link to work (it produced a ZIP file that Windows said was corrupted).
Comment by Miles Rausch
Miles,
It is maintained (May 2013) and an updated version is in progress. I have emailed you the zip file. Let me know if there is still an issue. We will check the compression script for the download on the site. Thanks for the heads up!
Travis
Comment by Travis - DevSlide Support
Hello!
I have used the script and it works, but it creates a problem: my custom JavaScript/jQuery is ignored by the browser unless page is manually reloaded.
Also,
$(“#browser-detection-close,ul.bd-skip-buttons li button”).on(‘click’, function () {
location.reload();
});
does NOT work. What should I do?
Thank you!
Comment by Razvan
I tried to download the zip but it never works. Could you e-mail the zip, please?
Comment by Geoff Oliver
Hi Geoff,
The file has been emailed. Thanks!
Travis
Comment by Travis - DevSlide Support
The Zip file looks to be corrupt. Tried downloading it from a few different browsers and I get the same error message. Can you take a look to see if the Zip file works for you?
Comment by WebGirl
Hi WebGirl,
The file has been emailed to you. Note: we plan to release an updated version soon.
Thank you,
Travis
Comment by Travis - DevSlide Support
Hi All,
The download issue has been fixed. Please report to us if there are any other issues.
Thanks,
Travis
Comment by Travis - DevSlide Support
Hi Supriya,
I’ve emailed the file to you. The code is commented and should be clear where you can make the edits to the list. Let us know if any questions.
Thanks,
Travis
Comment by Travis - DevSlide Support