How to target only one browser? - javascript

I would like to set a height for a div only for one browser, so it doesn't look weird in Firefox or whatever.
Here is an example:
#example {
height: 200px; <!--How can I target Safari for example?-->
height: 250px; <!--How can I target Firefox for example?-->
height: 300px; <!--How can I target IE for example?-->
width: 250px;
background-color: #FFF;
}
<div id="example">
<img src="example.png">
<p>Just some text.</p>
<p>Click here to visit www.example.com</p>
</div>
I've already tried -moz-height: 250px; but it didn't work.

navigator.appName
it will return always the same value for all browsers. I've tested on Firefox, Chrome, and Safari all browsers show Netscape. But if you want to target specific browsers you can use this code
Firefox navigator.userAgent.includes("Firefox");
Safari navigator.userAgent.includes("Safari");
Chrome navigator.userAgent.includes("Chrome");

You can use conditional comments. So you tell the code to use a certain stylesheet for a particular browser. Here's an article about it.
Here's an example:
<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->
Note: this only works with Internet Explorer. If you want to do it for some other browser you need to use JavaScript. Here's an example of JS:
<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
document.getElementById("stylesheet").setAttribute("href", "special_style.css");
}

You can access the navigator object and get the browser.
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
Then
document.getElementById("example").style.height= y;
"y" it is a variable whose value changes depending on the browser.

For this, you can use JavaScript. There is a string that you can access called navigator.appName. You can just put this:
if(navigator.appName === "Google Chrome")
// Do whatever here
replacing Microsoft Internet Explorer with your target browser.
I really hope this helps!

Related

How to hide an image by src attribute in IE?

I’m trying to find an image that has a src that starts with a particular url and hide it. I can do it but it doesn’t work on IE.
Is there a version of this css (maybe javascript) that will also work for edge and IE
img[src ^= "https://www.google"]{
display: none;
}
Use this CSS3 attribute selector:
img[src*="hideme"] {
display: none;
}
As usual, some versions of IE are known to have bugs with CSS3 attribute selectors. The SitePoint Reference is useful: Link
Below is the example tested with IE 11 and MS Edge browser version 44. In both and other browsers the code is working fine.
<!DOCTYPE html>
<html>
<head>
<style>
img[src*="i.postimg.cc"] {display: none;}
</style>
</head>
<body>
<img src="https://i.postimg.cc/13D5v67n/223.png" alt="Trulli" width="500" height="333">
</body>
</html>
Reference:
Hide image of specific size, by CSS? (Refer the accepted answer in the thread.)

ios addEventListener not working

Why does this button not work on ios? It works fine on desktop and android. It works on ios if clickHandler is defined as a regular function.
http://codepen.io/CalebEverett/pen/RRmYgx
<html>
<head>
<style>
button {
width: 150px;
height 50px;
}
</style>
</head>
<body>
<div id="testdiv">it doesn't work</div>
<button id="do">Button</button>
</body>
<script>
const clickHandler = () => {
document.getElementById("testdiv").innerHTML = "it works!"
}
document.getElementById("do").addEventListener("click", clickHandler, false);
</script>
<html>
You are using an arrow function, which is an ES6 feature.
Support for ES6 in general and arrow functions specifically is not yet widespread, and is limited to recent versions of some browsers only. Specifically, Safari does not support arrow functions on either Desktop (Mac) or mobile (iOS), but many other browsers will have the same issue (including older Android browsers, IE, etc.).
You'll have to either transpile your ES6 code to something that is supported more widely, or stick to more standard Javascript.

Disabling an element when in IE

I'm making an HTML page that plays <audio> with a OnClick on an <img> tags as a trigger..
Javascript:
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("play"))
{
element.src="stop.png";
document.getElementById('audiotag1').src="music.mp3";
document.getElementById('audiotag1').play();
}
else
{
element.src="play.png";
document.getElementById('audiotag1').src="";
}
}
IMG tag:
<img id="myimage" onclick="changeImage()" src="play.png" width="20" height="20" style="position:absolute;top:5px;left:5px;">
AUDIO tag:
<audio loop id="audiotag1" src="music.mp3" preload="auto"></audio>
So, here's the problem, since IE8 not support <audio> tags, i want to make the image disappear only on IE8 or those who not support <audio> tag. Is it possible? What should I do?
I was once use disabled='disabled' but it wont work.
Try using conditional comments - namely the condition <!--[if lte IE 8]>.
This would hide your image for less than and including IE8 (so IE7, IE6 etc):
<!--[if lte IE 8]>
#myimage {
display: none;
}
-->
So your whole code for it would look something like this:
<!--[if IE 8]>
<style>
#myimage {
display: none;
}
</style>
<![end if]-->
What you need is Modernizr. You can check the support for like anything.
Also Modernizr includes the html5shiv that is a must if you are planning to support oldie with html5.
You can check for
if (Modernizr.audio) {}
This is much better then checking for specific browsers as it checks the actual support for the html5 audio tag and does not make assumptions based on the browser (IE is not the only outdated browser out there :D)
You can also check for actual file format support. The example from the Modernizr documentation:
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
(Although this is a confusing way of using nested ? : operators IMHO)
You can try through javascript
check if you detect IE then return false
if(navigator.appName.indexOf("Internet Explorer") == -1) {
document.getElementById('myimage').onclick = function () {
return false;
}
} else {
document.getElementById('myimage').onclick = function () {
alert("cliiing");
return true;
}
}

add dynamic css using javascript?

I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.

How to detect IE6, and show alert?

I'm trying to show an alert when a user using IE6 uses my site. I'm thinking something like this will work:
<!--[if IE 6]>
<script language="Javascript">
alert ("The year 2004 just called - they want their browser back!")
</script>
<![endif]-->
I'd test this but I don't have a Windows box I can use ATM. Is this the correct way to do it?
Yes, that works:
Of course, you could use something like this, which is a bit more friendly.
This has already been answered but I really wanted to post something I did for this.
My personal website, have configured a similar script:
<!--[if lt IE 9]>
<script type="text/javascript">
location.replace("/ie/?next=/");
</script>
<![endif]-->
So whenever anyone with IE vesion less then 9, the browser redirects to this page.
This way to detect Internet Explorer version
<!--[if IE 6]>
<p>Welcome to any incremental version of Internet Explorer 6!</p>
<![endif]-->
OR
<!--[if gte IE 6]>
<SCRIPT LANGUAGE="Javascript">
alert("Congratulations! You are running Internet Explorer 6 or greater.");
</SCRIPT>
<P>Thank you for closing the message box.</P>
<![endif]-->
More detail you can refer link as here
http://msdn.microsoft.com/en-us/library/ms537512.aspx
Thanks
Abhi.
Yes the code you posted should totally work. Maybe just add a semicolon at the end of the line.
And one more interesting way:
http://www.ie6nomore.com/
Perhaps this may be of some use to you.
#lowCssSupportNotice {
display: none !important;
display: block; /* IE6 sees this */
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
}

Categories