drupal_add_js and inline code

Question

I am trying to use inline javascript, added with hook_alpha_preprocess_page, to add support to IE.

drupal_add_js('
jQuery(document).ready(function () {
    if (jQuery.browser.msie && jQuery.browser.version < 10) {
            $("li#megamenu-mlid-774 .megamenu-items, li#megamenu-mlid-842 .megamenu-items").columnize({
                width: 420,
                columns: 3
            });
        }
  });', 'inline');

While this loads on the page, nothing is happening. Is this because my selector starts with $? What should I change it to for this to work?

Answer 1

yes it has something to do with your selector starting with $. Your code in your question may have worked in Drupal 6. jQuery has changed in Drupal 7

Try wrapping your function like this:

(function ($) {

 // in this function, you can use the $ which refers to the jQuery object

}(jQuery));

For more information checkout

http://drupal.org/update/modules/6/7#javascript_compatibility

Answer 2

First of all you need to replace $ with jQuery and secondly you also need to put the width and coulmn properties inside double quotes. i.e,

drupal_add_js('
jQuery(document).ready(function () {
    if (jQuery.browser.msie && jQuery.browser.version < 10) {
            jQuery("li#megamenu-mlid-774 .megamenu-items, li#megamenu-mlid-842 .megamenu-items").columnize({
                "width": "420",
                "columns": "3"
            });
        }
  });', 'inline');