How to add conditional javascript to theme?

Question

I'd like to use Selectivizr script to emulate CSS3 selectors in IE6-8.

But I'm having a hard time adding it to my theme. So far tried:

1) Forcing this into html.tpl.php head section:

<!--[if lt IE 9]>
<script src="<?php print base_path() . path_to_theme(); ?>/js/selectivizr.js"></script>
<![endif]-->

But base_path() doesn't seem to return anything in D7 (at least in html.tpl.php - maybe in page.tpl.php...). And I know this isn't the Drupal way to do it anyway.

2) Adding to my theme's .info file:

scripts[] = selectivizr.js

But then it's unconditional, of course :(

3) Using drupal_add_js() in my template.php.

But again, I'm not sure that it can be set conditionally there?

Answer 1

I think your 1) is the best option.

You don't need to call any function, you have already those values:

<script type="text/javascript" src="<?php print $base_path . $directory; ?>/js/selectivizr.js"></script>

FYI, <?php dsm($variables) ?> in any template file to see what variables are available. (with devel module installed)

There is a module Conditional Stylesheets that has a elegant solution for adding IE conditions in the .info file, but still only for CSS. (see feature request for JS)

Answer 2

This is how I've added html5shiv in my template.php file:

$html5shiv = array(
  '#tag' => 'script',
  '#attributes' => array( // Set up an array of attributes inside the tag
    'src' => drupal_get_path('theme', 'mythemename') . '/js/lib/html5shiv.js', 
  ),
  '#prefix' => '<!--[if lte IE 8]>',
  '#suffix' => '</script><![endif]-->',
);
drupal_add_html_head($html5shiv, 'html5shiv');

Answer 3

I thought this was baked in but was wrong.

It looks like the mothership theme uses this librabry.

IT does things a little differently from you but essentially does your option 1

  $vars['selectivizr'] = '<!--[if (gte IE 6)&(lte IE 8)]>';
  $vars['selectivizr'] .= '<script type="text/javascript" src="/sites/all/libraries/selectivizr/selectivizr.js"></script>';
  $vars['selectivizr'] .= '<![endif]-->';

Looks like this code won't work if your site is not under /

But if the library is needed for your theme I don't see a problem with putting the conditional code into the page.tpl.php file.

Answer 4

I would use drupal_add_html_head() in your template.php. Unfortunately, #865536: drupal_add_js() is missing the 'browsers' option

Answer 5

If your JS file has no dependencies, it can be included just like this in head tag of HTML:

$selectivizr = array(
  '#tag' => 'script',
  '#attributes' => array(
    'src' => file_create_url(drupal_get_path('theme', 'theme_name') . '/js/lib/selectivizr.js'),
  ),
  '#prefix' => '<!--[if lte IE 9]>',
  '#suffix' => '</script><![endif]-->'
);
drupal_add_html_head($selectivizr, 'selectivizr');

If you have, let's say, jQuery dependency, it makes sense to put your code to bottom of the page:

function THEMENAME_preprocess_html(&$vars){
  $vars['page']['page_bottom']['jquery_dependent_js'] = array(
    'footer' => array(
      '#type' => 'markup',
      '#markup' => '<!--[if lte IE 9]><script src="' .
        file_create_url(drupal_get_path('theme', 'theme_name') . '/js/lib/jquery_dependent_js.js'). '"></script><![endif]-->',
    )     
  );
}