Hide/Show element if IE - Javascript - javascript

I am working with a script that pops up an alert if the user is or isn't using IE.
Instead of this, I'd like to show or hide a div element in my page.
I have tried unsuccessfully here: http://fiddle.jshell.net/shhv1Lx3/2/
Working alert demo here: http://fiddle.jshell.net/shhv1Lx3/3/
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
var e = document.getElementById(ie);
var e2 = document.getElementById(chrome);
if (GetIEVersion() > 0)
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
else
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
<div id="ie">
ie
</div>
<div id="chrome">
chrome
</div>


You could easily accomplish this (IE vs. not IE) without Javascript using conditional IE comments
<!--[if IE ]>
<style>
#chrome { display: none; }
</style>
<div id="ie">
ie
</div>
<![endif]-->
<div id="chrome">
chrome
</div>
Note This will only work for IE9 and below - if you are using standards or quirks mode in IE10 or above conditional comments will not work. Read more here


You should use {} when using if/else statements. The are optional when there is only one statement, but mandatory when there are multiple statements. I highly suggest using {} always, regardless of the number of statements.
You also need to pass a string to getElementById().
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0){
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
}
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./)){
return 11;
}
else{
return 0; //It is not IE
}
}
var e = document.getElementById('ie');
var e2 = document.getElementById('chrome');
if (GetIEVersion() > 0){
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
}
else{
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}
<div id="ie">
ie
</div>
<div id="chrome">
chrome
</div>


When you have multiple statements in an if or else, you need to wrap them in curly braces.
if (GetIEVersion() > 0) {
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
} else {
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}
Why is it considered a bad practice to omit curly braces?


Seems like syntax errors
if (GetIEVersion() > 0) {
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
}
else {
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}


I've had great success with the following code snippet from this Stack Overflow answer to detect Chrome:
I have tested and it works just fine for Internet Explorer.
It avoids the .indexOf() methodology which I prefer. You would simply replace the search parameter in the regex with MSIE
var detectID = (function() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE ' + (tem[1] || '');
}
if (M[1] === 'Chrome') {
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
if (detectID.match("IE") || detectID.match("MSIE") ) {
console.log("IE Browser Detected: " + detectID);
} else {
console.log("Not IE: " + detectID);
}

Related

error Unable to get property 'display' of undefined or null reference

<script language="javascript">
function dropOrderDropDown() {
var currentInThisElement = document.activeElement.id
var currentInThisElementArray = currentInThisElement.split('_')
var foundOneToDrop = false;
var haveOneCurrentSelected = false;
var dropDownTempArray = new Array();
if ((dropDownDivValuesString != "") || (dropDownDivValuesString != null)){
dropDownTempArray = dropDownDivValuesString.split(',');
for (i=0; i < dropDownTempArray.length - 1; i++){
if (acdf != dropDownTempArray[i]){
if (document.all[dropDownTempArray[i] + "_hideThisControl"] != null){
if (document.all[dropDownTempArray[i] + "_hideThisControl"].style.display != "none"){
if (document.all[dropDownTempArray[i] + "_dropdown"] != null){
if (document.all[dropDownTempArray[i] + "_dropdown"].style.display == "block"){
document.all[dropDownTempArray[i] + '_txtValue'].click();
}
}
}
}
}
}
}
acdf = "";
return true;
</script>

First, I would recommend using getElementById() over document.all. document.all has limited browser support. Then, bear in mind that style only gets inline style properties. So if you aren't declaring style inline, you won't get any results.
Let me know if your issues persist!

javascript form validation is not working in IE8

This javascript form validation is not working in IE8 !!
the form submits while the user inters invalid inputs.
it is working properly in other browsers firefox ,opera, chrome.
can you help me please?
<form method="post" name="form1" id="form1" action="editAction.php" onsubmit="return check_user_info()">
===============================
<script type="text/javascript">
function check_user_info()
{
var proceed = true;
if (checkUserFirstName() == 1)
{
document.getElementById("userFname_msg").style.display = "block";
document.getElementById("userFname_msg1").style.display = "none";
proceed = false;
}
else if (checkUserFirstName() == 11)
{
document.getElementById("userFname_msg1").style.display = "block";
document.getElementById("userFname_msg").style.display = "none";
proceed = false;
}
else
{
document.getElementById("userFname_msg").style.display = "none";
document.getElementById("userFname_msg1").style.display = "none";
}
//-----------------------------
if (checkUserLastName() == 1)
{document.getElementById("userLname_msg").style.display = "block";
document.getElementById("userLname_msg1").style.display = "none";
proceed = false;}
else if (checkUserLastName() == 11)
{document.getElementById("userLname_msg1").style.display = "block";
document.getElementById("userLname_msg").style.display = "none";
proceed = false;}
else{document.getElementById("userLname_msg").style.display = "none";
document.getElementById("userLname_msg1").style.display = "none";
}
//-----------------------------
if (checkMobile() == 1)
{
document.getElementById("mobile_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("mobile_msg").style.display = "none";
//----------------------------------
if (checkPhone() == 1)
{
document.getElementById("phone_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("phone_msg").style.display = "none";
//----------------------------
if (proceed)
{
alert ("your information has been updated successfully ..");
return proceed;
}
else
{
return false;
}
} // End function ...
//----------------------------------------------------
function checkUserFirstName()
{
if (document.getElementById("firstName").value.trim().length == 0)
return 1 ;
else if (!(document.getElementById("firstName").value.match(/^[ \.\-_a-zA-Z]+$/)))
return 11 ;
} // End function ...
//--------------------------------------------------
function checkUserLastName()
{
if (document.getElementById("lastName").value.trim().length == 0)
return 1 ;
else if (!document.getElementById("lastName").value.match(/^[ \.\-_a-zA-Z]+$/))
return 11 ;
} // End function ...
//-------------------------------------------------------------
function checkMobile()
{
if (((document.getElementById("mobile").value.trim().length >0) && (document.getElementById("mobile").value.trim().length != 10))|| (isNaN(document.getElementById("mobile").value)))
return 1 ;
} // end function ...
//----------------------------------------------------------
function checkPhone()
{
if(!document.getElementById("TelephoneNumber").value.match(/^[ \/0-9]*$/))
return 1 ;
} // end function ...
</script>

I'm guessing the problem is probably because of the .trim() method on the strings in your check functions. There isn't a String trim method in older browsers, you'd have to use a polyfill to make sure it's always available, no matter the browser. A good example is:
Trim string in JavaScript?
"".trim || String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
is what I use.

Error in javascript

I am trying to get a collapsible link list to work using JavaScript.
However, there is a continual error in the Java document and I don't know why:
var css Node = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssnode);
function toggle(toggler) {
if (document.getElementById) {
targetElement = toggler.nextsibling;
if (targetElement.classname == undefined) {
targetElement = toggler.nextsiblig.nextsibling;
}
if {
targetElement.style.display == "block") {
targetElement.style.display = "none";
}
else {
targetElement.style.display = "block"
}
}
}
function swap(targetid) {
if (document.getElementById) {
target = document.getElementById(targetid);
if (target.style.display == "block") {
target.style.display = "none";
}
else {
target.style.display = "block";
}
}
}
The error in on line 15 where is states "if ( document.getElementById){" but it seems fine to me.
Any advice?

jsLint returns 3 errors (and assuming your first line is var cssNode)
Compare to undefined with === ( if (targetElement.classname === undefined) )
if { targetElement.style.display == "block")} must be if (
Missing semicolon (targetElement.style.display = "block")
Broken Fiddle here (Push the jsLint button to see the errors)
Fixed Fiddle here

Getting a browser's name client-side

Is there any object or method that returns data about the browser, client-side?
For example, I need to detect if the browser is IE (Interner Explorer). Following is the code snippet.
function isInternetExplorer()
{
if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
return true;
}
return false;
}
Is there a better way?

JavaScript side - you can get browser name like these ways...
if(window.navigator.appName == "") OR if(window.navigator.userAgent == "")

This is pure JavaScript solution. Which I was required.
I tried on different browsers. It is working fine. Hope it helps.
How do I detect the browser name ?
You can use the navigator.appName and navigator.userAgent properties. The userAgent property is more reliable than appName because, for example, Firefox (and some other browsers) may return the string "Netscape" as the value of navigator.appName for compatibility with Netscape Navigator.
Note, however, that navigator.userAgent may be spoofed, too – that is, clients may substitute virtually any string for their userAgent. Therefore, whatever we deduce from either appName or userAgent should be taken with a grain of salt.
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
fullVersion = ''+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
document.write(''
+'Browser name = '+browserName+'<br>'
+'Full version = '+fullVersion+'<br>'
+'Major version = '+majorVersion+'<br>'
+'navigator.appName = '+navigator.appName+'<br>'
+'navigator.userAgent = '+navigator.userAgent+'<br>');
From the source javascripter.net

EDIT: Since the answer is not valid with newer versions of jquery As jQuery.browser is deprecated in ver 1.9, So Use Jquery Migrate Plugin for that matter.
Original Answer
jQuery.browser
jQuery.browser
and
jQuery.browser.version
is your way to go...

I found a purely Javascript solution here that seems to work for major browsers for both PC and Mac. I tested it in BrowserStack for both platforms and it works like a dream. The Javascript solution posted in this thread by Jason D'Souza is really nice because it gives you a lot of information about the browser, but it has an issue identifying Edge which seems to look like Chrome to it. His code could probably be modified a bit with this solution to make it work for Edge too. Here is the snippet of code I found:
var browser = (function (agent) {
switch (true) {
case agent.indexOf("edge") > -1: return "edge";
case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
case agent.indexOf("trident") > -1: return "ie";
case agent.indexOf("firefox") > -1: return "firefox";
case agent.indexOf("safari") > -1: return "safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
console.log(window.navigator.userAgent.toLowerCase() + "\n" + browser);
UPDATED
Here is a better version from BSlink's answer which has a few problems. There are too many edits in the queue for me to submit one in his answer so I'm editing my own answer to share the corrections:
const agent = window.navigator.userAgent.toLowerCase();
const browser =
agent.indexOf('edge') > -1 ? 'edge'
: agent.indexOf('edg') > -1 ? 'chromium based edge'
: agent.indexOf('opr') > -1 && window.opr ? 'opera'
: agent.indexOf('chrome') > -1 && window.chrome ? 'chrome'
: agent.indexOf('trident') > -1 ? 'ie'
: agent.indexOf('firefox') > -1 ? 'firefox'
: agent.indexOf('safari') > -1 ? 'safari'
: 'other';
console.log(`${agent}\n${browser}`);

In c# you your browser name using:
System.Web.HttpBrowserCapabilities browser = Request.Browser;
For details see a link.
http://msdn.microsoft.com/en-us/library/3yekbd5b%28v=vs.100%29.aspx
and in Client side:
JQuery:
jQuery.browser
For details see a link:
http://api.jquery.com/jQuery.browser/

I liked Sintrias's answer but I wanted to uppdate a bit with a slightly more modern syntax.
const userAgent = window.navigator.userAgent.toLowerCase();
const browser =
userAgent.indexOf('edge') > -1 ? 'edge'
: userAgent.indexOf('edg') > -1 ? 'chromium based edge'
: userAgent.indexOf('opr') > -1 && !!window.opr ? 'opera'
: userAgent.indexOf('chrome') > -1 && !!window.chrome ? 'chrome'
: userAgent.indexOf('trident') > -1 ? 'ie'
: userAgent.indexOf('firefox') > -1 ? 'firefox'
: userAgent.indexOf('safari') > -1 ? 'safari'
: 'other';
console.log(`${userAgent.toLowerCase()}\n${browser}`);

The browser discloses it in navigator.userAgent. If you're using jQuery, you're better off using jQuery.browser as #Rab Nawaz said. However, as the API documentation says, it's better to check for feature support if possible. Quoting the documentation:
We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery.
Here is a code example:
function isIE() {
if (window.jQuery) {
return jQuery.browser.msie || false;
} else {
// adapted from jQuery's source:
return navigator.userAgent.toLowerCase().indexOf('msie') >= 0;
}
}

This is answered in
How to detect Safari, Chrome, IE, Firefox and Opera browser?
Check this fiddle.
Hope this helps.

It's all about what you really want to do, but in times to come and right now, the best way is avoid browser detection and check for features. like Canvas, Audio, WebSockets, etc through simple javascript calls or in your CSS, for me your best approach is use a tool like ModernizR:
Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do.
If using CSS, you can do this:
.no-js .glossy,
.no-cssgradients .glossy {
background: url("images/glossybutton.png");
}
.cssgradients .glossy {
background-image: linear-gradient(top, #555, #333);
}
as it will load and append all features as a class name in the <html> element and you will be able to do as you wish in terms of CSS.
And you can even load files upon features, for example, load a polyfill js and css if the browser does not have native support
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
a simple example of requesting features from javascript:
http://jsbin.com/udoyic/1

This code will return "browser" and "browserVersion"
Works on 95% of 80+ browsers
var geckobrowsers;
var browser = "";
var browserVersion = 0;
var agent = navigator.userAgent + " ";
if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("like Gecko") != -1){
geckobrowsers = agent.substring(agent.indexOf("like Gecko")+10).substring(agent.substring(agent.indexOf("like Gecko")+10).indexOf(") ")+2).replace("LG Browser", "LGBrowser").replace("360SE", "360SE/");
for(i = 0; i < 1; i++){
geckobrowsers = geckobrowsers.replace(geckobrowsers.substring(geckobrowsers.indexOf("("), geckobrowsers.indexOf(")")+1), "");
}
geckobrowsers = geckobrowsers.split(" ");
for(i = 0; i < geckobrowsers.length; i++){
if(geckobrowsers[i].indexOf("/") == -1)geckobrowsers[i] = "Chrome";
if(geckobrowsers[i].indexOf("/") != -1)geckobrowsers[i] = geckobrowsers[i].substring(0, geckobrowsers[i].indexOf("/"));
}
if(geckobrowsers.length < 4){
browser = geckobrowsers[0];
} else {
for(i = 0; i < geckobrowsers.length; i++){
if(geckobrowsers[i].indexOf("Chrome") == -1 && geckobrowsers[i].indexOf("Safari") == -1 && geckobrowsers[i].indexOf("Mobile") == -1 && geckobrowsers[i].indexOf("Version") == -1)browser = geckobrowsers[i];
}
}
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Gecko/") != -1){
browser = agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).substring(0, agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Clecko/") != -1){
browser = agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).substring(0, agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0"){
browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(";"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 == agent.length-1){
browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ")[agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ").length-1];
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 != agent.length-1){
if(agent.substring(agent.indexOf(") ")+2).indexOf("/") != -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf("/"));
if(agent.substring(agent.indexOf(") ")+2).indexOf("/") == -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf(" "));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(0, 6) == "Opera/"){
browser = "Opera";
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
if(agent.substring(agent.indexOf("(")+1).indexOf(";") != -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(";"));
if(agent.substring(agent.indexOf("(")+1).indexOf(";") == -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(")"));
} else if(agent.substring(0, agent.indexOf("/")) != "Mozilla" && agent.substring(0, agent.indexOf("/")) != "Opera"){
browser = agent.substring(0, agent.indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else {
browser = agent;
}
alert(browser + " v" + browserVersion);

You can also get an array of brands that is used by user using the following way:
let browser = window.navigator.userAgentData.brands;
console.log('browser', browser);

Based on is.js you can write a helper file for getting browser name like this-
const Browser = {};
const vendor = (navigator && navigator.vendor || '').toLowerCase();
const userAgent = (navigator && navigator.userAgent || '').toLowerCase();
Browser.getBrowserName = () => {
if(isOpera()) return 'opera'; // Opera
else if(isChrome()) return 'chrome'; // Chrome
else if(isFirefox()) return 'firefox'; // Firefox
else if(isSafari()) return 'safari'; // Safari
else if(isInternetExplorer()) return 'ie'; // Internet Explorer
}
// Start Detecting browser helpers functions
function isOpera() {
const isOpera = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
return isOpera !== null;
}
function isChrome() {
const isChrome = /google inc/.test(vendor) ? userAgent.match(/(?:chrome|crios)\/(\d+)/) : null;
return isChrome !== null;
}
function isFirefox() {
const isFirefox = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
return isFirefox !== null;
}
function isSafari() {
const isSafari = userAgent.match(/version\/(\d+).+?safari/);
return isSafari !== null;
}
function isInternetExplorer() {
const isInternetExplorer = userAgent.match(/(?:msie |trident.+?; rv:)(\d+)/);
return isInternetExplorer !== null;
}
// End Detecting browser helpers functions
export default Browser;
And just import this file where you need.
import Browser from './Browser.js';
const userBrowserName = Browser.getBrowserName() // return your browser name
// opera | chrome | firefox | safari | ie

javascript hide/show fails in ie8

I have the following javascript
function hide(id)
{
var ele = document.getElementById(id);
if ((ele.style.display == 'none') || (ele.style.display == '')) {
try{
ele.style.display = 'table-row';
}
catch (e)
{
ele.style.display='block';
}}
else {ele.style.display = 'none';}
}
which works in ie7, chrome, ff, but fails in ie8
I have to get it to work in ie8 even if it fails in chrome or ff.
I believe the issue is 'ele.style.display = 'table-row'
any ideas? thanks in advance

Not sure what you are experiencing as a failure in IE8, but you might change in your if this:
ele.style.display == ''
to this:
ele.style.display == undefined

Why don't you use:
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display == "none" || el.style.display == "") ? "block" : "none";
}

Categories