Detect browser conditional statement

[rkhayat]

Hello CSS Tricks, I am battling some Javascript and it’s giving me a major headache. I was hoping you guys could provide some insight.

Website…

    <div class="modal hide fade in" id="myModal" style="display: block;" aria-hidden="false">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <div class="row pagination-centered">
<h3>This website runs best in Chrome</h3>
</div>
  </div>
  <div class="modal-body pagination-centered">
      <p><a href="http://www.google.com/chrome">Download Google Chrome</a></p>


            <iframe src="http://www.whatismybrowser.com/feature/iframe" width="600" height="150" scrolling="no" style="border: none; overflow: visible !important;" id="wimb-detection-iframe"></iframe> 

  </div>
  <div class="modal-footer">
  <div class="row pagination-centered">
  <p>Click anywhere to continue</p>
  </div>
</div>
</div>

The code above is the modal.


$(window).load(function(){
$('#myModal').modal('show');
});


The code above pops up when page loads.

What I’m trying to achieve is only have the popup when the browser detects the user is NOT using Chrome.

Thank you,

Robert

[Senff]

I know this is not what you’re looking for, but I personally think it’s a very bad idea to code a site so that it looks best in Chrome, nor to give non-Chrome users a popup telling them to download Chrome. I’d really advise to create a site that works fine in ALL major browsers, not just one.

Apologies for that, I realize there have been complaints on this forum that certain questions are being criticized (“why would you wanna do that?“) but this is a situation where you’re driving away some of your audience — I doubt you’d want that.

[rkhayat]

@Sneff

Thank you for the response, I appreciate the help.

After reading your post I understand why you this could be more harming than beneficial.

The modal used was just an example, I would like to use something a little less intrusive (not sure what they are called but a little bar that would sit above navbar with a few words in it, similar to the chrome “flash” notification bar)

I would also like to not have it show up for chrome users, I know I can detect chrome and IE with css / JS…

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Chrome- and Safari-specific CSS here*/
}


<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

<!--[if lt IE 8]>
    <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

I’m not sure how to tie that into the html though.

Robert

[Paulie_D]

I would also like to not have it show up for chrome users, I know I can detect chrome and IE with css / JS…

Then it would make more sense for it to be there all the time BUT hidden for Chrome uses rather than the other way round…wouldn’t it?

That way you only have to detect one browser…which you already know how to do.

[Author]

Posts