Reaction to media queries with JavaScript in Omega 4?

Yes, this is still possible (with some other syntax and some extra work). Will tell you how it works tomorrow (currently writing from my phone). i improved this quite a bit for 4.x. It's faster and more flexible now. Will get back to you tomorrow.

Would love some clarification on this as well. RE: my comment , I feel I'm doing this wrong / not in line with Omega.

Sorry, was too busy yesterday to work on the issue queue... Here is the promised answer:

I assume that you are using Omega 4.x-dev (latest, as stated in the *version* dropdown in this issue).

Due to #2036299: Remove third party libraries from repository we had to remove all external libraries from Omega 4.x core. It now lies in the responsibilty of each theme to download and place them in the right spot.

Before we can start, we have to download the matchMedia polyfill: https://github.com/paulirish/matchMedia.js/

Simply download matchMedia.js and matchMedia.addListener.js to YOURTHEME/js.

Now that we have the polyfill in place we can already use custom JS code to match media queries or add listeners. However, it sounds like you just want a simple solution to provide media-query classes. For that, you have to do this:

Create a YOURTHEME_preprocess_html() in YOURTHEME/preprocess/html.preprocess.inc and write the following code there:

/**
 * Implements hook_preprocess_html()
 */
function YOURTHEME_preprocess_html() {
  // Load the matchMedia polyfill.
  $path = drupal_get_path('theme', YOURTHEME);
  $options = array('group' => JS_THEME);
  drupal_add_js("$path/js/matchMedia.js", $options);
  drupal_add_js("$path/js/matchMedia.addListener.js", options);

  // Load the mediaquery behavior from Omega. This allows registering media
  // queries via Drupal.settings to automatically print body classes based on
  // whether or not they currently apply.
  $omega = drupal_get_path('theme', 'omega');
  drupal_add_js("$omega/js/omega.mediaqueries.min.js", options);

  // Register the media queries. The array keys will be used to compose the body
  // class names and the values are the actual media queries.
  drupal_add_js(array('omega' => array('mediaQueries' => array(
    'my-media-query' => 'all and (min-width: 700px)',
    'another-media-query' => 'all and (min-width: 900px)',
  ))), 'setting');
}

I know this is an old post, but I would guess alot of people are viewing this still.

in case you copied/pasted this and wondered why it doesn't work, "options" should be "$options" in all 3 drupal_add_js functions, not just the first :)

<?php
/**
 * Implements hook_preprocess_html()
 */
function YOURTHEME_preprocess_html() {
  // Load the matchMedia polyfill.
  $path = drupal_get_path('theme', YOURTHEME);
  $options = array('group' => JS_THEME);
  drupal_add_js("$path/js/matchMedia.js", $options);
  drupal_add_js("$path/js/matchMedia.addListener.js", $options);

  // Load the mediaquery behavior from Omega. This allows registering media
  // queries via Drupal.settings to automatically print body classes based on
  // whether or not they currently apply.
  $omega = drupal_get_path('theme', 'omega');
  drupal_add_js("$omega/js/omega.mediaqueries.min.js", $options);

  // Register the media queries. The array keys will be used to compose the body
  // class names and the values are the actual media queries.
  drupal_add_js(array('omega' => array('mediaQueries' => array(
    'my-media-query' => 'all and (min-width: 700px)',
    'another-media-query' => 'all and (min-width: 900px)',
  ))), 'setting');
}
?>