Detecting User Agent Firefox [duplicate] - javascript

This question already has answers here:
Detect all Firefox versions in JS
(8 answers)
Closed 3 years ago.
I'm pretty new to Javascript. What I've learned is from just playing around with code.
I'm having trouble getting this to load. Bascially I need a certain div to only show in Firefox. Here is what I have.
<div id="parent" class="control-group"></div>
<script type="text/javascript">
$(document).ready(function() {
switch ( BrowserDetect.browser )
{
case 'Firefox':
$("button[name='btn']").click(function() {
$("#parent").html("<div></div>");
});
});
break;
}
</script>


You probably shouldn't be doing it like this, but if you are absolutely sure you only want to target Firefox:
var browser = navigator.userAgent.toLowerCase();
if (browser.indexOf('firefox') > -1) {
alert('Firefox');
}
fiddle

Related

Script for show message only in IE browser [duplicate]

This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?

I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>

JavaScript doesn't run when tab isn't open [duplicate]

This question already has answers here:
How can I make setInterval also work when a tab is inactive in Chrome?
(16 answers)
Chrome: timeouts/interval suspended in background tabs?
(7 answers)
Closed 4 years ago.
For some reason, my code doesn't appear to run in the background if the tab's not open.
Here is the code:
num = 0;
window.setInterval(function() {
num = num + 1;
document.getElementById('num').innerHTML = num;
}, 10);
<html>
<head>
<title>Space...</title>
</head>
<body>
<span id="num">0</span>
<script src="main.js"></script>
</body>
But it is working on a separate game I've made, i.e. it does continue running if the tab's not open.
I've searched the web and Stack Overflow for answers, but I haven't been able to find any. I don't know why this is happening, so any help would be much appreciated. Thanks in advance!

setTimeout does not work as expected on IE11 [duplicate]

This question already has answers here:
setTimeout Internet Explorer
(7 answers)
Closed 5 years ago.
I have the following web page:
<html>
<head>
</head>
<body>
<h1>Wait until closed</h1>
<script>
function wait(popup){
if (!popup.closed){
setTimeout(wait,1000,popup);
} else {
alert('closed');
}
}
var popup = window.open("http://www.google.com", '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes, width=1000 , height=800, top=' + screen.top + ', left=' + screen.left);
wait(popup);
</script>
</body>
</html>
When I open it with Chrome or Firefox, I see the message 'closed' after I close the popup. In IE11 however nothing happens. What is the explanation of this difference in behaviour? (i.e. which part of the standards IE11 does not adhere to, or interpret differently in this case, if at all?)
EDIT: reading the suggested answers, I tried to change setTimeout(wait,1000,popup) to setTimeout(function() {wait(popup);},1000), like this:
<html>
<head>
</head>
<body>
<h1>Wait until closed</h1>
<script>
function wait(popup){
if (!popup.closed){
setTimeout( function() {
wait(popup);
}, 1000 );
} else {
alert('closed');
}
}
var popup = window.open("http://www.google.com", '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes, width=1000 , height=800, top=' + screen.top + ', left=' + screen.left);
wait(popup);
</script>
</body>
</html>
but this does not work either.
EDIT: The comments indicate that this is a duplicate, but since trying to change the code according to the suggested answers did not work for me until now, I modify the question by asking to change the above code so that it works in IE11 (hope that this is allowed by SO rules). The code shown does not work.

This one was kind of bugging me, so I tried it in on a local file and got the same behavior. window.open returning null in both IE and Edge. Apparently if protected mode is enabled, window.open will return null in both IE and Edge.
https://msdn.microsoft.com/en-us/library/Bb250462.aspx
I'm not sure how to work around it. Maybe a closeable frame?

Hide() function not working in safari [duplicate]

This question already has answers here:
$("#id option").hide(); not working on safari/chrome?
(5 answers)
Closed 8 years ago.
I am creating an app in android/ios(displaying webpages) for which I use a JS menu. The menu hide() function works in android browser but not in ios browser(safari). Already tried
toggle(), blur(), hide().
$(document).click(function(event) {
if (!$(event.target).closest('#jsmenu').length) {
if ($('#jsmenu').is(":visible")) {
/* $('#jsmenu').hide();*/
$("#jsmenu").remove();
}
}
})

if you don't need hide animation then try
$('#jsmenu').css('display', 'none');

To check whether the css3 and/or HTML5 property is supported by browser using JavaScript [duplicate]

This question already has answers here:
Detect if browser supports contentEditable?
(5 answers)
Closed 10 years ago.
I want to check whether the "contenteditable" or any HTML5 property is supported by user browser or not ?
So here is my JavaScript:
var isEditable=false;
function chk() {
var z=document.getElementById("mydivid");
if(typeof(z["isContentEditable"])==="boolean") {
isEditable=true;
}
}
function doEdit() {
chk();
var z=document.getElementById("mydivid");
if(isEditable) {
z.setAttribute("contenteditable","true");
z.focus();
} else {
/* add a texbox and put all div's innerHTML into it, All in all: a Boring Stuff. */
}
}
And Here is HTML:
Click To Edit
<div id="mydivid"> Hi Ssup ?? <img src='' alt="some image" /></div>
Can Anyone tell me Whether My Approach is right ? Will it work in IE(version<8.0) ? And Also A better approach is needed !

Simple check:
if ('isContentEditable' in document.createElement('span')) {
// supported
}
I will also share this great selection of snippets it will help you in future: http://diveintohtml5.info/everything.html

To chcek if any propery exits for a element. You can do this
var element = document.createElement('__ELEMENT__');
if ('__PROPERTY__' in element ) {
// property supported in the browser
}
or
if ('__PROPERTY__' in document.createElement('__ELEMENT__') ) {
// property supported in the browser
}
The below link contains it all.
https://github.com/Modernizr/Modernizr/issues/570
http://diveintohtml5.info/everything.html#contenteditable

Categories