Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

helpme

 

Need extra help with your Joomla site? Consider paid Joomla support by the developer of Chameleon and MetaMod.

 

Metamod in responsive templates: hide a module in small screens

Metamod in responsive templates: hide a module in small screens

Hi,

Is it possible to hide a module when the screensize become under a certain width?

I want to hide a module in a responsive template when the screensize reach the size of a mobile screen, let's say below 500px.

I found a topic how to hide it for a mobile browser. But in a normal browser when you make the screen smaller it still shows the module.

Thanks in advange,

Martin

Plugje
Beginner Modder
ranks
useravatar
Offline
3 Posts
Administrator has disabled public posting

Re: Metamod in responsive templates: hide a module in small screens

Hi Martin,

unfortunately that's really hard to do. There's a difference between visually hiding a module when the screen is shrunk (which would be a JS/CSS thing, probably related to the module position), and MetaMod deciding whether or not to include a module.

i.e. MetaMod can decide to hide/show a module at the moment when the page is requested. It has to have enough information to be able to act on that information. So somehow it would have to know the screen size in advance (and that's a bit of a problem). So once it does have that info, it will generate the page including (or not including) some module(s).

Now when you resize the browser, this does not normally cause a new page request, so your browser can't tell the server and MetaMod to create a new page based on the new dimensions, and send it back to the browser.

That's why MetaMod can't help directly when you resize your browser window.

HOWEVER...

You could design a little piece of Javascript which "reports back" to Joomla via a certain URL, every few seconds, and includes the screen width (presumably only if it has changed). Then you could catch that URL in MetaMod or Chameleon or your template, and put the screen size into the Session. Then MetaMod would have access to that information at the moment that the page is generated. In that way, even if the module does not disappear when the screen is shrunk, it WOULD disappear on the next page view.

So I think that the best answer is that most of the job is done with some JS and CSS/media queries that hide module positions when the screen has certain dimensions. Further to that, some JS that "reports back" to Joomla and tells it the most current screen width would help MetaMod to only generate modules when it needs to.

Hope that helps,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Re: Metamod in responsive templates: hide a module in small screens

Hi Stephen,

First of all: thanks for your answer smile

The reason I am asking this is that I want to hide a menu that's causing a conflict in another menu when the screen resized to smaller screens, so also mobiles. It's based on the Gantry framework and according Rockettheme it's not posible to have 2 Gantry menu's on the same page without conflict. Just hide it with mediaqueries in the template doesn't solve it.
That's why I tried metamod and I am able to hide this second menu in a mobile browser, without conflicts. So metamod is working perfect for this.

But for testing I would like to have it also work when you make the screen smaller and also I don't know how this menu behave on a smaller tablet.

After your answer I have some questions.

1)It wouldn't be a problem to refresh the screen first. Like I said I would like to have this work for testing and working on the template in my normal browser.
So in that way I could use mediaqueries in metamod to detect the screen size. I only don't know how to add them to metamod.

2)I have some modules that are hidden with a class in the mediaqueries css files. Would it posible in metamod to detect if a div is hidden and if yes hide the module? For instance the class is: .hidden-phone: display none !important;
In that way I just use the JS from the template to detect the screensize.

3) I don't have Javascript experience, so I have to search for a script like that in Google. In the time I am waiting for your answer I already will look for that.

When option 2 is possible it would be perfect I think smile

Regards,

Martin

Plugje
Beginner Modder
ranks
useravatar
Offline
3 Posts
Administrator has disabled public posting

Re: Metamod in responsive templates: hide a module in small screens

Hi Martin,

I think I have to go back to understanding the difference between media queries, CSS and MetaMod.

1 - A browser requests a page.
2 - MetaMod and other modules create HTML for the page. They have no access to screen dimensions etc, unless a previous request (e.g. via AJAX) or cookies have made those dimensions available. So the 1st page request NEVER has access to these.
3 - The browser gets the response and starts to render the page. Media queries can cause different CSS to be used on parts of the page.
4 - therefore, it's too late for MetaMod to dynamically change the way the page is rendered at this point. It already did its thing back in step 2. It does not have access to the CSS state of the page which is only calcualted AFTER the page is generated and starts to be rendered. (a sort of chicken-and-egg problem).

What I don't get is how you say that you can't have 2 of the menus on the page, but you seem to be saying that sometimes you can have that, on larger devices. So is it just that when they overlap on the screen (squeezed together) that it's a problem?


I just thought of another way to help you get around this. There are some extensions out there that can dynamically load a module via AJAX. One used to be "RokModule" - http://www.rockettheme.com/extensions-d … -rokmodule

Using RokModule you can do an AJAX request to load a module by ID. Now I don't know exactly what JS you would need for this but perhaps you can find that on the RocketTheme forums. Try asking there. I think the URL for the request is something like mysite.com/index.php?option=com_rokmodule&moduleid=XXX
it may also need something like &tmpl=component on the end of the URL; not sure about that.

So the JS on the page can then detect if the CSS or mediaqueries are set in a certain way, and can load the module in via RokModule if required.

Sorry I can't give you exact instructions how to do this. It's out of the scope of MetaMod help, and will require integration with the rest of your template.

Hope it helps though.

Cheers,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Re: Metamod in responsive templates: hide a module in small screens

hmm, it's complicated i see...

About this 2 menu's, i have this answer from a guy from Rockettheme. And he said it's giving conflicts, so the fact that it works in a normal browser is just luck (i think). The problem is that the last one opens totally itself instead of staying closed till you click on it.
See this topic I made on the Rockettheme forum, also with pictures:
http://www.rockettheme.com/forum/index. … =viewtopic

I have Rokmodule installed in my template, but on the rockettheme site there is no information how to use it.

Yesterday I found a JavaScript that detecting the viewport in realtime while changing the browser width.

see this link with the script:http://jstricks.com/detecting-viewport- … /#comments
And this link with a demo: http://jsbin.com/agacav

Can I use that in metamod maybe?

Regards,

Martin

Plugje
Beginner Modder
ranks
useravatar
Offline
3 Posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
1696
Total Polls:
6
Total Posts:
5941
Posts this week:
7
User Info:
 
Total Users:
5418
Newest User:
outsd2
Members Online:
0
Guests Online:
130

Online: 
There are no members online

Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked