Javascript browser notification not working

Question

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?

Is there a special reason why you want someone to use chrome on your site/webapp? Browser detection should really only be done there is no other possibility. The problem is that on the one hand someone could change the user-agent name, and even the vendor could change it with a new version (like MS did with IE 11) — t.niese, Dec 01 '13 at 08:02
Your script must be located AFTER the div tag or you must wait until the page is loaded before running it. — jfriend00, Dec 01 '13 at 08:03
@t.niese Yes. some animations of my app work only in chrome! — , Dec 01 '13 at 08:04
@whoIsCraig Then a better way would be to detect the browser features, and if the animation does not work, then display the warning. If you e.g. use css keyframes for you animations with the `webkit` vendor prefix for it, then it would most likely also run in latest Safari, Opera, Chromium or any other browser based on WebKit or Blink and not just only in Chrome. — t.niese, Dec 01 '13 at 08:08
If you put your code on a js fiddle and describe what you are trying to do/achieve, maybe peolple can help you improve it to work across other platforms other than just chrome — Godinall, Dec 01 '13 at 08:36

score 4 · Accepted Answer · edited Dec 01 '13 at 08:08

4

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.

edited Dec 01 '13 at 08:08

answered Dec 01 '13 at 07:57

Rob M.

35,491
6
51
50

1

For plain JS, better to use `document.getElementById('notify').style.display = "block";` and not overwrite other style values that might be set. – jfriend00 Dec 01 '13 at 08:00
2

@whoIsCraig - you also must put the script AFTER the div tag. – jfriend00 Dec 01 '13 at 08:04
@jfriend00 that was the culprit!! – Dec 01 '13 at 08:06

score 1 · Answer 2 · answered Dec 01 '13 at 07:57

1

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();

answered Dec 01 '13 at 07:57

Rajaprabhu Aravindasamy

66,513
17
101
130

score 1 · Answer 3 · answered Dec 01 '13 at 07:58

1

Try using,

document.getElementById('notify').style.display='block';

instead of ,

document.getElementById('notify').show();

answered Dec 01 '13 at 07:58

Krish R

22,583
7
50
59

score 1 · Answer 4 · answered Dec 01 '13 at 08:08

1

$("#notify").show()

instead of

document.getElementById('notify').show();

DEMO HERE

answered Dec 01 '13 at 08:08

Prasanth K C

7,073
5
39
62

score 0 · Answer 5 · answered Dec 01 '13 at 08:45

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>

Javascript browser notification not working

5 Answers5