Use omega to hide or show content for responsive?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
zphen's picture
Posted by zphen on August 8, 2013 at 7:00pm

Is there anything built into Omega that allows you to hide or display blocks or nodes dependent on the media queries?

Or are additional modules required for that?

Categories:

Comments

The server doesn't know the result of the media queries

Posted by dhalbert on August 8, 2013 at 7:25pm
dhalbert's picture

The server doesn't know the width of the browser window. The browser runs the media queries and chooses the appropriate CSS file.

So you can't do anything on the server side based on the media query results. To hide or display blocks based on the media queries, you can do that in the CSS. You need to use things like display: none or display: block in the CSS that's specific to that media query.

This means that all the blocks get sent to the page, and you hide some of them.

Here are some discussions along the same lines, more about reorganization than just hiding/showing:

Omega and responsive menus

Posted by tdodson on August 9, 2013 at 1:01pm
tdodson's picture

I use omega and a change from a horizontal menu to a menu icon with a drop-down menu on both these sites: http://pdrjournal.org and http://blackkeypress.com. I hide the horizontal menu in global.css and narrow.css (displaying it only in normal.css). At a tablet portrait or narrower layout I make use of an unused region of my omega sub-theme (I believe it's the branding region) to contain the mobile menu (a block). I tagged that region with "display: none" by default so that it begins collapsed. In an adjacent region I have a menu icon (and text "menu") that, with a three line jQuery script toggles the "display" attribute for the menu on and off on-click. It may sound a bit complicated, but I found it simple to implement and it's working consistently.

You can find the code for one implementation on my github: https://github.com/tdodson/pdr_omega. Feel free to download and tinker if this seems like a solution that might work for you; I'm also happy to answer any questions.

Thomas Dodson
Editor, Printer's Devil Review | http://pdrjournal.org (http://blackkeypress.com)
Techneblog, a tech blog for non-techies | http://techneblog.com

Very Nice Thanks

Posted by slsonnier on August 9, 2013 at 4:01pm
slsonnier's picture

Very Nice

Thanks