RocketTheme - TOPIC: Mobile Question

Welcome Guest! Login

0 items Join Now

- Lawrence Keith
- Sr. Rocketeer
- Posts: 176
- Thanks: 0
Mobile Question

Posted 13 years 6 months ago
- Is there a way to publish a certain module for viewing only on the mobile version?
  
  I'm wanting to publish a module on the mobile version, but keep it off of the "desktop/laptop" version.
  
  Thanks.
  
  Note: I asked this in Camber, but since it's not template specific, I asked it here.
#726663

Adamck
Elite Rocketeer
Posts: 546
Thanks: 2
Web Developer, IT Assistant, Graphics design, App Developer

Re: Mobile Question

Posted 13 years 6 months ago

Not sure about the entire module, but you could have a module that shows something to the mobile user and something different to the desktop user (same module) by capturing the user agent...

if( !function_exists('mobile_user_agent_switch') ){
     function mobile_user_agent_switch(){
          $device = '';
 
          if( stristr($_SERVER['HTTP_USER_AGENT'],'ipad') ) {
               $device = "ipad";
          } else if( stristr($_SERVER['HTTP_USER_AGENT'],'iphone') || strstr($_SERVER['HTTP_USER_AGENT'],'iphone') ) {
               $device = "iphone";
          } else if( stristr($_SERVER['HTTP_USER_AGENT'],'blackberry') ) {
               $device = "blackberry";
          } else if( stristr($_SERVER['HTTP_USER_AGENT'],'android') ) {
               $device = "android";
          }
 
          if( $device ) {
               echo 'This is a special message to all my MOBILE device users!'; 
          } else {
               echo 'This is a special message to all my DESKTOP users!'; 
          }
     }
}

This just detects if they are mobile users and if they are shows a message, else shows another message.

Hope it helps a little.

Kiss my RSS

#726675

- Adamck
- Elite Rocketeer
- Posts: 546
- Thanks: 2
- Web Developer, IT Assistant, Graphics design, App Developer
Re: Mobile Question

Posted 13 years 6 months ago
- OR try some tricky CSS stuff
  <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1224px)" href="hidesomemodules.css">
  
  Here if the screen resolution is over 1224px (most desktop screen sizes are more than this) it will add in some CSS (in the CSS you can hide divs, modules etc...).
  
  If the screen size is less than 1224 (ipads, iphone, mobiles etc...) then the css will not be added therefor the module will be shown
  
  Loads more CSS3 media queries HERE
  stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
- Kiss my RSS
#726678
- Lawrence Keith
- Sr. Rocketeer
- Posts: 176
- Thanks: 0
Re: Mobile Question

Posted 13 years 6 months ago
- So I would add this code to the Custom HTML module?
  Adamck wrote:
  OR try some tricky CSS stuff
  <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1224px)" href="hidesomemodules.css">
#726683
- Adamck
- Elite Rocketeer
- Posts: 546
- Thanks: 2
- Web Developer, IT Assistant, Graphics design, App Developer
Re: Mobile Question

Posted 13 years 6 months ago
- No this will go in the templates html code (administrator>extensions>template>edit html) along with the rest of the css links (usually in the header), then you make a css file 'hidesomemodules.css' which some css for hiding specific modules with a suffix.
  You can of course change that css file name/directory etc...
  
  Then add this suffix (specified in the CSS file) to the modules you want to hide from desktop users (each module allows you to add a css suffix to it on the right hand menu when managing the module).
  Ad.
- Kiss my RSS
#726686
- Lawrence Keith
- Sr. Rocketeer
- Posts: 176
- Thanks: 0
Re: Mobile Question

Posted 13 years 6 months ago
- Ohhh.... Guess it'd help if i knew CSS then... lol...
  
  Any other ideas? Anybody?
#726689
- Adamck
- Elite Rocketeer
- Posts: 546
- Thanks: 2
- Web Developer, IT Assistant, Graphics design, App Developer
Re: Mobile Question

Posted 13 years 6 months ago
- Your trying to build a website without any CSS knowledge? :shock:
  
  You should know the basics of CSS to be editing websites, Try some of the tutorials on the net theres millions of them.
  
  CSS isnt too hard to learn, a quick google around should give you explanations on how to hide DIV's and modules etc...
  
  RT staff and members can only offer support and point you in the right direction, we cant build your sites for you! :cheesy:
- Kiss my RSS
#726882
- Macmaster
- Jr. Rocketeer
- Posts: 47
- Thanks: 0
Re: Mobile Question

Posted 13 years 6 months ago
- Lawrence Keith wrote:
  Is there a way to publish a certain module for viewing only on the mobile version?
  
  Can't you just publish the module to one of you mobile positions, e.g. Mobile header?
  
  You may have to adjust the position aliase of the module you are wishing to publish to. See:
  
  Template Manager>{yourtemplate}>Mobile>Position Aliases.
#726934
- Lawrence Keith
- Sr. Rocketeer
- Posts: 176
- Thanks: 0
Re: Mobile Question

Posted 13 years 6 months ago
- Macmaster wrote:
  Lawrence Keith wrote:
  Is there a way to publish a certain module for viewing only on the mobile version?
  
  Can't you just publish the module to one of you mobile positions, e.g. Mobile header?
  
  You may have to adjust the position aliase of the module you are wishing to publish to. See:
  
  Template Manager>{yourtemplate}>Mobile>Position Aliases.
  
  Well, I tried this from the start... and no luck. I don't understand why this method doesn't work.
#727176
- Spanka
- Jr. Rocketeer
- Posts: 22
- Thanks: 0
Re: Mobile Question

Posted 12 years 8 months ago
- Ok, so I've found this post a couple of years late, but figured I'd post the solution in case anyone else google'd for this issue.
  
  Solution:
  
  1. Publish desired module to your mobile position. Say, mobile-top
  2. In your template settings, change the mapping for mobile-top FROM "top-a" (default value) TO "mobile-top"
  
  mobile-x modules don't show on desktop sites. But the mobile positions are mapped, so you when you want to put something directly into a mobile module position, you also need to ensure the module mapping for mobile doesn't overwrite it.
#861326

Time to create page: 0.061 seconds