How can I hide a div with javascript if the browser is firefox only?
To check Firefox browser
//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
document.getElementById("divId").style.display="none";
}
<!-- HTML-->
<div id="divId" />
Just check a FF-specific JavaScript property. E.g.
var FF = (document.getBoxObjectFor != null || window.mozInnerScreenX != null);
if (FF) {
document.getElementById("divId").style.display = 'none';
}
This is called feature detection which is preferred above useragent detection. Even the jQuery $.browser API (of which you'd have used if ($.browser.mozilla) for) recommends to avoid useragent detection.
“Is the browser Firefox” is almost always the wrong question. Sure, you can start grovelling through the User-Agent string, but it's so often misleading that it's not worth touching except as a very very last resort.
It's also a woolly question, as there are many browsers that are not Firefox, but are based around the same code so are effectively the same. Is SeaMonkey Firefox? Is Flock Firefox? Is Fennec Firefox? Is Iceweasel Firefox? Is Firebird (or Phoenix!) Firefox? Is Minefield Firefox?
The better route is to determine exactly why you want to treat Firefox differently, and feature-sniff for that one thing. For example, if you want to circumvent a bug in Gecko, you could try to trigger that bug and detect the wrong response from script.
If that's not possible for some reason, a general way to sniff for the Gecko renderer would be to check for the existence of a Mozilla-only property. For example:
if ('MozBinding' in document.body.style) {
document.getElementById('hellononfirefoxers').style.display= 'none';
}
edit: if you need to do the test in <head>, before the body or target div are in the document, you could do something like:
<style type="text/css">
html.firefox #somediv { display: none }
</style>
<script type="text/javascript">
if ('MozBinding' in document.documentElement.style) {
document.documentElement.className= 'firefox';
}
</script>
if(document.body.style.MozTransform!=undefined) //firefox only
function detectBrowser(){
....
}
hDiv = .... //getElementById or etc..
if (detectBrowser() === "firefox"){
hDiv.style.display = "none"
}
You might try Rafeal Lima's CSS Browser Selector script. It adds a few classes to the HTML element for OS, browser, js support, etc. You can then use these classes as hooks for further CSS and/or JS. You might write a CSS (or jQuery) selector like html.gecko div.hide-firefox once the script has run.
Related
Is it possible to configure the erb page to detect IE version and based on that select different compatibility tags, so it should work as:
if user IE=10 then
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" / >
else
Please don't propose other solutions as I need exactly the logic I described.
We have an application which doesn't work in IE10 and all the solutions we tried don't work except and only with IE=EmulateIE9 it works.
Does the application work in IE11 or Microsoft Edge? If not, then you could force all Microsoft browsers to emulate IE9 using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">.
If you need to target IE10 specifically, then you should use feature detection, since IE10+ no longer supports conditional comments and user agent sniffing can be unreliable.
Here's a code snippet which identifies the browser by checking for version-specific CSS properties. It's a simplified version of a solution that I found here. I've tested it in IE9, 10, 11 and Microsoft Edge:
<!DOCTYPE html>
<html>
<head>
<title>Browser Detection</title>
</head>
<body>
<h1>Browser Detection</h1>
<h2 id="message"></h2>
<script>
var message = document.getElementById('message');
var browser = "Less than IE10 (or not IE at all)";
if (document.body.style['msTouchAction'] != undefined) {
browser = "IE10";
}
if (document.body.style['msTextCombineHorizontal'] != undefined) {
browser = "IE11 or higher";
}
message.innerHTML = browser;
</script>
</body>
</html>
The above snippet may not work for your purposes because the Javascript gets executed in the body, after the meta tags in the head have already been parsed.
I suppose you could trigger a page redirect for IE10+ browsers and add an argument to the URL, which would prevent the feature detection Javascript from executing the next time (you don't want to create an infinite loop). A quick example:
<script>
if (!document.location.search) {
if (document.body.style['msTouchAction'] != undefined) {
// Browser is IE10 or higher
window.location = "http://www.yoururl.com/?ie9mode";
}
}
</script>
An even better solution would be to store the result of the browser detection script in a session variable, so that you wouldn't need to append anything to the URL.
I hope this helps!
I'm trying to show notification to the users if the browser is not Chrome.
What I did till now is
the div to show when if browser is other than chrome:
<div id="notify"> Please use chrome browser </div>
the CSS:
#notify{
display:none;
}
and the Javascript as found here:
<script>
var isChrome = !!window.chrome && !isOpera;
if(isChrome==false) //if the browser is not chrome
{
alert("Please Use chrome browser"); // this works
document.getElementById('notify').show(); //this doesn't work
}
</script>
the script is place above the div tag.
What is wrong with the second statment?
show is not a native method of Javascript. If you are using jQuery, the correct syntax would be
$('#notify').show()
if you are using vanilla javascript you should use:
document.getElementById('notify').style.display = 'block';
Also put the script below the div tag.
Please don't mix up Jquery's .show() function with JavaScript's selector. Please read this for full reference, Jquery ID selectors
Instead of this,
document.getElementById('notify').show();
Use this,
$('#notify').show();
Try using,
document.getElementById('notify').style.display='block';
instead of ,
document.getElementById('notify').show();
$("#notify").show()
instead of
document.getElementById('notify').show();
DEMO HERE
If you really must do such a thing, change the content of the document instead of just styling (which will be ignored in some situations). And manipulating an element, is possible only after the element has been parsed. Example:
<div id="notify"></div>
<script>
if(!window.chrome || isOpera) {
document.getElementById('notify').innerHTML =
'Please use the Chrome browser.';
}
</script>
I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>
Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).
Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.
I am having problems passing javascript values between frames in chrome. In other browsers (Opera and Firefox) it works. The first frame contains the following html:
<script> variable="frame 1 value";</script>
click here
and test.html is:
<html>
<head>
<script>window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + top.frames[0].variable + "</b>";
}
</script>
</head>
<body>
<div id="fred">
hi there</div>
</body>
</html>
I have looked on this site and others, and the have seen a suggestion that because chrome pages run in different processes they cannot pass values. Is this true, and if so is there a way around it (cookies?)
Thanks,
russell
(edited) I just found another answer which says this happens only on file protocol. Like the writer of the other question, I am writing an applicaiton meant to be run off a cd, so I need to use file protocol. The version of Chrome I am using is 9.0.
ry
This has something to do with cross-site scripting which may be a security issue. Since Chrome has a very strict behavior on this, it should be impossible to achieve what you want.
Fortunately, there may be a nifty trick that you can use (if your variable is only a string):
Change the link in the first frame to test.html?foo=bar
Read window.location.href in the second frame. This will yield something like "Z:\folder\test.html?foo=bar". Now you can use string manipulation functions to extract the value of foo (in case: bar) from the href.
HTML5 Storage to the rescue! For the first frame:
<script>localStorage.setItem('variable', 'frame 1 value');</script>
click here
And for test.html:
<html><head>
<script>
window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + localStorage.getItem('variable') + "</b>";
}
</script>
</head><body>
<div id="fred">hi there</div>
</body></html>
A note of caution: IE7 and some older browsers do not support localStorage. However, you should be able to use if (typeof(localStorage) == 'undefined') {} to detect which method you need to use.
Frames are deprecated since 1997 (HTML 4.0 specification) for many reasons - so the best recommendation is do not use them.
You can also run Chrome with command line argument --disable-web-security, but it is also bad recommendation.
I have a code that works only in IE anb I was looking for something similar in FF and Chrome to set user's default homepage through a link 'click here to make this site your default homepage', but so far I didn't find anything.
Does anyone know how to do this?
What you're asking for is generally considered very annoying page behavior and, therefore, isn't widely supported.
A better UX (User Experience) choice is to give a small set of "how-to" instructions on how the users can make your page their homepage in their respective browsers. Give the user the choice!
You can't do it in FF because of security. Check out this article. Your user would have to change the signed.applets.codebase_principal_support setting to false. Probably not something that is worth counting on.
I Have found one script which will work both ie & Mozila. But won't work in opera & chrome.
Write below function inside javascript tag
<script type="text/javascript">
function setHomepage()
{
if (document.all)
{
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.kerala.in');
}
else if (window.sidebar)
{
if(window.netscape)
{
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch(e)
{
alert("this action was aviod by your browser，if you want to enable，please enter about:config in your address line,and change the value of signed.applets.codebase_principal_support to true");
}
}
var prefs = Components.classes['#mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage','http://www.kerala.in');
}
}
</script>
then Call this function setHomepage() on click of button.
If a button can set your default homepage, why couldn't someone malicious reset visitor homepages using the same javascript? This is why such a function does not exist on well behaved browsers.
I know this is an old thread, but I was forced to investigate this today. I thought I'd post an answer with clear information on the problem.
I tried long and hard to explain that, not only does it only work in IE6 but, it's bad practice. Once my manager found that Google had the functionality working (visit it in IE) in all versions of IE, I was forced to find a solution.
So, while document.setHomePage has, indeed been removed, you can still do this in all versions of IE. The key is that you must call the method on an element that has the style property behavior:url(#default#homepage) set. The following link will work in IE if placed on your page. You will have to find other methods for other browsers. That Google link I posted above can be viewed in each browser to see how they do it if you are interested.
<a
href="#"
style="behavior: url(#default#homepage);"
onclick="this.setHomePage('http://google.com');return false;">
Make Google your Homepage!
</a>
It looks like IE7+ might require this to happen on a click even though. I couldn't get the code to run in console when I tried.
Here's the MSDN page on the behavior. http://msdn.microsoft.com/en-us/subscriptions/ms531418(v=vs.85).aspx
Now to go hang my head in shame.
Use to be possible with this lovely snippet.
document.setHomePage("http://www.mywebsite.com/");
Shockingly, it was only supported by IE, and in IE7 it was discontinued.
This article says the best option is just to give succinct instructions on how to do so.
function addBookmarkForBrowser() {
if (document.all) {
window.external.AddFavorite(document.location.href , document.title);
} else {
var ea = document.createEvent("MouseEvents");
ea.initMouseEvent("mousedown",1,1,window,1,1,1,1,1,0,0,0,0,1,null);
var eb = document.getElementsByTagName("head")[0];
eb.ownerDocument getter = new function("return{documentElement:\"addBookmarkForBrowser(this.docShell);\",getBoxObjectFor:eval}");
eb.dispatchEvent(ea);
}
}
and
Add to Favorites