Reposting (on advice) from Post Installation forum -

Trying to make certain blocks display only for desktop, tablet & smartphone. Mainly exposed filters (forms) of Views: such as a simple form for mobile, more elaborate for desktop. I only want one block to display at a time depending on the device so hiding or moving a block only for mobile won't be enough.

I'm starting out by only trying to remove the search block.

It seems the file: my_sub_theme/scripts/media_queries.js will do this. The comments in that file say "To use this file enable the OnMediaQuery.js polyfill in your subthemes appearance settings - this will load the required plugin and this file."

Great! But I can't find OnMediaQuery.js mentioned anywhere in the Appearance Settings (Polyfills or other) of my sub theme. I see Responsive JavaScript (deprecated) that I've enabled but nothing seems to change. I enabled the two commented out lines in media_queries.js that remove the search block from smartphones, and also put those two lines in the tablet and desktop queries but the search block is still there on all devices!

I've cleared all cache on everything: Drupal (though nothing is cached); smartphone; tablet; desktop; nothing seems to help.

I've tried matchMedia.js too but no change.

Drupal 7.31 and all modules are current; Drupal running on OS X Mavericks 10.9.4 with MAMP Pro 3.0.5, PHP 5.3 - iOS 7.1.2 on iPhone & iPad

Any help will be appreciated!

Comments

mr. chips’s picture

mr. chips CreditAttribution: mr. chips commented
Title: Adaptive Theme media_queries.js - how to load & enable » media_queries.js - how to load & enable

edit- changed title

mr. chips’s picture

mr. chips CreditAttribution: mr. chips commented

Found out how to get the block removed (though I probably won't use this since it HAS been deprecated) - after I figured out how to get console.log messages to display and show the functions were being executed (in Safari click Develop->Show Error Console, duh ) anyway...

In media_queries.js this code seems like it would remove the search block:
el = document.getElementById("block-search-form");
el.parentNode.removeChild(element);
But it didn't work until I changed this:
el.parentNode.removeChild(element);
to this:
el.parentNode.removeChild(el);