0

I have some font problems in Internet Explorer, so I am trying to apply font-family through JavaScript. It works, but the JavaScript code runs for every browser.

How do I run JavaScript code only on Internet Explorer?

This my code.

drupal_add_js('sites/all/themes/blogbuzz/js/cufon-yui.js');
drupal_add_js('sites/all/themes/blogbuzz/js/Helvetica_CE_35_Thin_100.font.js');
drupal_add_js('(function ($) {
  $(document).ready(function() {
    Cufon.replace("#content-header");
    Cufon.replace("#client_tle");
    Cufon.replace("#block-block-16");     
  });
})(jQuery)', "inline");
1

You can't apply JS only to one browser using Drupal functions. What you can do is:

  • CSS workaround:

    • apply CSS only to IE
    • assign some style that will not be visible, but also will not be present in non-IE, like white 1px border on white background
    • use css() jQuery method to test if element has property you expect it to have in IE, and if true, execute your code.
  • JavaScript way: Use jQuery Browser Plugin or similar solution to identify browser inside your js file. Execute your code if it's the browser you need it executed in.

  • It is possible,i got the answer – user2775188 Sep 13 '13 at 12:32
  • @user2775188 if you know how, then share. You can answer your own question. In Drupal, $options for drupal_add_js() does not support browsers element. It's OK only in drupal_add_css(). HTML on it's own does not provide functionality like that, either. – Mołot Sep 13 '13 at 12:37
  • You can use $.browser.msie variable of jQuery. Remember to use that with jQuery Migrate if you are using jQuery 1.9+. $(document).ready(function() { if($.browser.msie){ Cufon.replace("#content-header"); Cufon.replace("#client_tle"); Cufon.replace("#block-block-16"); } }); – user2775188 Sep 13 '13 at 12:59
  • @user2775188 that's exactly what my second bullet says: use javascript file on all browsers, and inside it test with jQuery if it's IE or not. Only difference is that I suggested other plugin. Of course feel free to add your own answer :) – Mołot Sep 13 '13 at 13:01
  • 1
    @Clive pretty useless in IE 10 anyway, it seems. "conditional comments can still be used, but will only target older versions of IE". – Mołot Sep 13 '13 at 14:02
-1

Something like this is what you are looking for:

function yourtheme_preprocess_html(&$variables) {
  // Add conditional stylesheets for IE
  drupal_add_css(path_to_theme() . '/css/ie8style.css', array(
    'group' => CSS_THEME,
    'browsers' => array(
      'IE' => 'lte IE 8',
      '!IE' => FALSE,
     ),
    'every_page' => TRUE,
    'weight' => 10,
   )
  );
} 
  • 1
    There is no equivalent for JS. – Mołot Sep 13 '13 at 12:11
  • You can use $.browser.msie variable of jQuery. Remember to use that with jQuery Migrate if you are using jQuery 1.9+. $(document).ready(function() { if($.browser.msie){ Cufon.replace("#content-header"); Cufon.replace("#client_tle"); Cufon.replace("#block-block-16"); } }); – user2775188 Sep 13 '13 at 12:59

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.