Browser Detection - Simple JavaScript to Get Users to Upgrade Their Old Browsers
Framework: jQuery Listed in: User Interface
Description
Our friends at DevSlide recently launched a Labs area where they publish ideas, software, script, apps, etc., and we thought that this one could be interesting for JS developers and webmasters. It is a JavaScript browser detection tool that detects the user’s browser. If an old browser is detected, it will display a friendly suggestion for them to upgrade their browser to the latest version or download a new browser.
Background
Coding for old browsers (such as old versions of Internet Explorer, Firefox, Opera) can be a nightmare even for experienced web developers who hand code XHTML/CSS markup. It is difficult to find a balance of features, speed, and browser compatibility. It is particularly frustrating when you run a JS / CSS3 website and know that only a small percentage of your users are preventing you from using all the features of CSS3 (which, when used correctly, is feature rich, optimizes page load speeds and is easier to maintain).
Well, we have not opened a new world here :). But, this is a big problem and it is further complicated, because most users who are running such an out-dated browser do not even know where to go to upgrade their browser. The DevSlide team created a script written from scratch in JavaScript and will not conflict with any existing JavaScript frameworks such as jQuery, and MooTools. It displays a nicely styled and friendly message. You can choose from five predefined messages (professional, informal, goofy, technical, and even a mean one, lol) or customize your own message. There is also a cookie feature, so that the user can choose to ignore the message or ask to be reminded later.
How to Install It
It’s easy to add to your site and configure. There is even a configuration form where you can customize it and load it from the DevSlide servers or download and host it on your server.
1.) Go to DevSlide Labs and configure the script.
2.) Add generated code to your <head>…</head> tag.
3.) Help us all to eliminate out dated browsers ;)
That’s it ;) Click the links below to visit DevSlide Labs to download and configure the script.
Browser Compatibility
Old and modern browsers.
Popular Categories
View All- Effects (8)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (11)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
Mendy
January 19, 2011
Always nice to learn abt new things! Will certainly install it to my puter!
Brian
May 10, 2011
I can get the script to detect an old browser, but I want the light box to be at the top of the page –and– ON TOP OF EVERYTHING on the page.
That way, the user will see it for sure.
Do I need to change something in the *.css file?
Do I need to change something in the *.js file?
A more complex example can be see here
ajaxBlender.com
May 30, 2011
Hello, Brian!
In file browser-detection.js find the following line: noticeEl.style.top = (windowSize.height – noticeSize.height – 20 + offset) + “px”;
And replace it with: noticeEl.style.top = (50 + offset) + “px”;
Jason
June 9, 2011
This is looking great, but I would want it to display within the homepage not above it. Any ideas?
Thank you for your time!