7

How can I hide a div with javascript if the browser is firefox only?

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
Cameron
  • 4,181
  • 9
  • 36
  • 40
  • I just need to right now for something. – Cameron Mar 16 '10 at 13:26
  • @Cameron, I hope you're not the downvoter for all the questions here. – Buhake Sindi Mar 16 '10 at 13:39
  • No its not me. I am not sure which one to use now... I just need some code that works in a general way. Anyone.. – Cameron Mar 16 '10 at 13:40
  • 1
    @Cameron: If you could be a bit more specific maybe we could help you figure out a better solution. Browser detection is not often the best way to do anything Javascript related. – Andy E Mar 16 '10 at 13:41
  • There is a bug related to a video upload, that is only appearing in FF. I want to hide the content while I figure it out. Thats all – Cameron Mar 16 '10 at 13:47

6 Answers6

8

To check Firefox browser

//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);

if (FIREFOX) {
  document.getElementById("divId").style.display="none";
}


<!-- HTML-->
<div id="divId" />
Buhake Sindi
  • 87,898
  • 29
  • 167
  • 228
  • @Downvoter, since when is this wrong? This works well in Firefox. – Buhake Sindi Mar 16 '10 at 13:40
  • I'm not the Downvoter, but it doesn't work well on my browser (which identifies itself as ‘Shiretoko’), or many other Firefox variants. – bobince Mar 16 '10 at 13:42
  • 1
    @Bobince...The asker asked in Firefox....obviously you're not using plain old firefox. – Buhake Sindi Mar 16 '10 at 13:46
  • 1
    Well, it's a woolly question, yes, but Shiretoko is one way an official but unbranded Firefox 3.5 identifies itself. It's 100% the same as Firefox except with no fox on the icon. – bobince Mar 16 '10 at 13:52
  • 1
    Ok, then it's using the Mozilla engine, just like Opera does but that doesn't make Opera Firefox (unfortunately). – Buhake Sindi Mar 16 '10 at 13:53
  • "Current users of Mozilla Firefox should not use Shiretoko Alpha 1." Upvote to "Opera isn't Firefox, but is also built on the same engine." – Dean J Mar 16 '10 at 13:59
  • 3
    Opera doesn't use the **Gecko** rendering engine, but Presto. It doesn't even identify itself with the infamous "Mozilla" label in the User-Agent string (see http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ for info about this). And Bobince is right, there exist many unbranded Firefox versions (that don't have "Firefox" in the UA string) due to licence regulations: http://en.wikipedia.org/wiki/Mozilla_Firefox#Trademark_and_logo – Marcel Korpel Mar 16 '10 at 14:18
  • @Marcel, Opera 9 can "clone" IE/Firefox by changing the user agent string. Even though it runs Presto, when rendering "cloning" firefox, it uses the Mozilla engine, it even renders any CSS with "-moz-xxxx" attributes. – Buhake Sindi Mar 16 '10 at 20:21
  • Do you have a source for this? I just tested this using Opera 10.10 and although it identifies itself as "Mozilla/5.0 (X11; Linux i686; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0" when using "Mask as Firefox", it still uses Presto (not Gecko and certainly not something called the Mozilla engine) and doesn't process `-moz-` prefixed properties, at least not `-moz-border-radius`, nor does it support `window.onbeforeunload`. Border radius is only supported as of Opera 10.50: http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius – Marcel Korpel Mar 17 '10 at 00:14
  • @Marcel, correct, I just did a recheck, and "-moz" css doesn't render (Strange since I'm not using "border-radius" in any css styles i'm using but Opera 10.50 displays it). I'm too tired, so I'll be off to bed. :-) (it's 3am here). – Buhake Sindi Mar 17 '10 at 00:43
7

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • @BalusC: SO really needs to implement the @Downvoter thing or at least force people to explain their downvotes. I got three anonymous downvotes yesterday, 2 on an answer that has 10 upvotes! Robbed me of my bronze badge lol. /end rant - I've evened it out for you anyway. – Andy E Mar 16 '10 at 13:39
  • 1
    Think it's because your example isn't good - you aren't feature detecting the issue that causes the problem, you are feature detecting an unrelated feature that you know will be correct for firefox. – Rich Bradshaw Mar 16 '10 at 13:40
  • 3
    `mozInnerScreenX` is also only available from Firefox 3.6 on. – bobince Mar 16 '10 at 13:41
  • you could always do this `var FF = window.mozInnerScreenX ? true : false;`. PS. I didn't downvote you. – Buhake Sindi Mar 16 '10 at 13:42
  • this isn't working for me. i just put it in script tags in the . is that right? – Cameron Mar 16 '10 at 13:43
  • @Cameron: It has to be placed _after_ the div, otherwise document.getElementById() won't find the div. –  Mar 16 '10 at 13:45
  • @Cameron: or execute during page onload. – BalusC Mar 16 '10 at 13:50
  • @bobince: this was from top of head. I forgot to add the `getBoxObjectFor`. Fixed (also see the "feature detection" link). – BalusC Mar 16 '10 at 13:56
  • @BalusC: no insult intended, but if you read that article about feature detection well, you should have known that you shouldn't use feature detection just to do browser detection. – Marcel Korpel Mar 16 '10 at 14:23
2

“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>
bobince
  • 528,062
  • 107
  • 651
  • 834
  • Devil's Advocate: who really cares about SeaMonkey, Flock, Fennec, Iceweasel, and Minefield combined? That's maybe a hundredth-of-one-percent of userbase of a typical app, and when you're using one of those and it doesn't work... you often learn to occasionally expect quirks. – Dean J Mar 16 '10 at 13:57
  • @Dean: there are many users of Linux distribution that come with unbranded Firefox versions, called Iceweasel, Minefield, etc. – Marcel Korpel Mar 16 '10 at 14:26
  • No error in IE for me. Naturally, `document.body` must exist before using this particular test, so you couldn't do it in the ``, but then you couldn't anyway since the `
    ` in question would already have to be in the page.
     – bobince Mar 16 '10 at 15:01
2
 if(document.body.style.MozTransform!=undefined) //firefox only
kennebec
  • 102,654
  • 32
  • 106
  • 127
  • I'm using this successfully thus far, except I check `type` as well. `if(document.body.style.MozTransform!==undefined){}`. Anyone else here because of how Firefox manages `transform-origin` in svgs? – Jason Lydon Oct 16 '15 at 13:21
1
function  detectBrowser(){
  ....
}

hDiv = .... //getElementById or etc..

if (detectBrowser() === "firefox"){
  hDiv.style.display = "none"
}
Andy E
  • 338,112
  • 86
  • 474
  • 445
Falcon
  • 1,461
  • 3
  • 15
  • 29
0

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.

Andy Ford
  • 8,410
  • 3
  • 26
  • 36