0

I am using a library that works perfectly on all browsers apart from IE10 where a button requires a double click instead of 1, so i want to create some JavaScript that will only run on IE10 that when a user clicks on this button to double click instead of a single, but how can i make it so it only runs in IE10.

EDIT :

this is the code that i am having issues with :

<p:fileUpload widgetVar="upload" id="upload" fileUploadListener="#{fileUploadController.handleFileUpload}"
                                  mode="advanced" 
                                  multiple="false" 
                                  update="messages Nav upload"
                                  label="Select File"
                                  sizeLimit="100000000" 
                                  allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf|html)$/"
                                  auto="true"
                                  disabled="#{fileUploadController.uploadComplete}"
                                  /> 

out of all the broswers tested, firefox, chrome, opera, safrai and I.E. 7 - 9 only I.E.10 has the isse where when you click upload it requires a double click

4
  • 4
    I think you're going the wrong way about this. The key is to detect features not browsers. IE10 is a very capable browser. If it doesn't work for some reason try to find a solution to that particular problem instead of "bah, I'll just hack this just for IE"
    – elclanrs
    Feb 19, 2013 at 22:07
  • 4
    "...works perfectly on all browsers apart from I.E. 10 where a button requires a double click instead of 1..." Sorry, that's very suspect. You should find out what that's about rather than trying to throw a browser-detect at it. Feb 19, 2013 at 22:07
  • ok thanks, i have added the piece of code i am having issues with, its a file upload using primefaces library Feb 19, 2013 at 22:18
  • if it requires a double-click, then I'd suggest that there is either an invisible, absolutely positioned element over the button, and/or event propagation is getting messed up in a click handler somewhere. I'd bet that there's a .click event handler that gets unbound after the first click, allowing the second one to correctly fire
    – Josh E
    Feb 19, 2013 at 23:26

5 Answers 5

2

While it's true Internet Explorer 10 no longer supports conditional comments in HTML, there is a less widely-used feature known as "conditional compilation" which is still supported by the IE10 JScript Engine.

/*@cc_on

  @if (@_jscript_version >= 10)
    console.log("You are using IE10 or greater!");
  @end

@*/

As you can see, all other browsers will parse this as a /* ... */ multi-line comment and ignore your IE-specific code.

When used in conjunction with feature detection, conditional compilation offers a very powerful method of narrowing down your IE version detection.

More than likely, it sounds like a bug with the library you're using. Consider reporting the bug to the authors of the Primefaces library rather than hacking around it.

If it's a library bug, and you're having issues with single click vs. double click in IE10, pure feature detection may not yield the most appropriate results because you'd be attempting to detect irrelevant features. "onclick" and "ondblclick" DOM0 events have been available to IE for ages.

Furthermore, if the button works from IE11 onward, feature detection by checking HTML5/CSS3 attributes may make it difficult to single out IE10, or, in a worst case scenario, trigger false positives. Especially when considering the dramatic changes made from one major version of IE (8) to its next major version (9), you want to minimize the threat of false positives and detection of irrelevant features as much as possible.

Note that unlike user agent sniffing (which is generally frowned upon), the JScript Engine is not exposed to the same risks such as user agent spoofing. The JScript engine version is hard-coded and usually only updated with each major version of Internet Explorer. (..., 6, 7, 8, 9, 10, etc.)

Therefore, for accurate detection of IE10 and to future-proof your software, conditional compilation is a must.

0

whatever you do - don't try to sniff the user agent. Use feature detection instead!

var isThisIeTen = document.getElementsByTagName("body")[0].style.msGrid;
if (isThisIeTen) { // that feature is present in IE10+, so yeah... }

Not sure what you're actually trying to detect, so I can't get more specific about which feature to detect, but that's the idea

0

If this is caused by a bug in IE 10 and you can't solve it in a nice way by changing the code I suggest that you instead ask IE to use an older engine, simply put this tag in the head section and you can replace the bug/feature set of IE 10 with the bug/feature set of IE 7, 8 or 9:

<meta http-equiv="X-UA-Compatible" content="IE=8">
0

I like doing this the following way:

First detect the browser in HTML:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]><!--> <html class=""> <!--<![endif]-->

Then write your JS

$(function () {
  var ie10 = true;
  if ($('html').is('.ie6, .ie7, .ie8')) {
      ie10 = false;
  }

  if (ie10) {
      // IE10 JS
  } else {
      // Other JS
  }
}

But as mentioned by others, browser detection is seldom a good way of dealing with such things. Its better to detect function support

4
  • 1
    this will fail to detect IE10 because IE 10 doesn't support conditional comments
    – Josh E
    Feb 19, 2013 at 22:12
  • And then no body class will be set. This is caught by the JS
    – oleron
    Feb 19, 2013 at 22:16
  • What about non-IE browsers? won't they all be identified as IE10?
    – Tim M.
    Feb 19, 2013 at 22:32
  • @TimMedora Yes, I made a little mistake there. It's fixed now
    – oleron
    Feb 19, 2013 at 22:46
0

Try this CSS work-around.

    .fileinput-button input {
      -moz-transform : none !important;
      border : none !important;
      border-width : 0 !important;
      transform : translate(-300px, 0) scale(4) !important;
      font-size : 23px !important;
   }

Check your generated button class(fileinput-button) and apply to it. In my case the class name is .file_upload.

Found this here. This worked for me well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.