Change Contact Layout when Mobile

Hi!

First of all, It is a real pleasure to finally make part of the Gavick members. I am coming from 4 different template site developers, nothing to complain about them (except one), but it was always my goal to get here.

My question is simple, but the solution may not be so simple, so please forgive my lack of knowlegment.

I am configuring a new website, using Music State template. I just loved the contact tabs layout, but it does not work so well for mobiles or small tablets. It gets a little confusing, because the user must scroll down to see the tabs contents once a tab is clicked. It would be more natural if the tab content could auto scroll to the click point - now, I imagine that this is a Joomla core function and Gavick has nothing ot do with it (please, correct me if I am wrong). So, an alternative would be to make the contact layout plain when accessed by a mobile or a small screen, instead of tabs.

Is there an easy way to accomplish it? If so, how?

Thanks in advance for any help or feedback.

Could You please post an url to your site?
Ill try to test few solutions.

Hello,
Sure, but I have to warn you that this is a local VM, it may be a little bit slow and unstable. I'll send you a PM with instructions.

Thanks.

ok, please send me a PM with:
1. URL to your website
2. link to this thread

ok, please send me a PM with:
1. URL to your website
2. link to this thread

Hy Cyberek!

I've already done it, yesterday. I've read that you don't want PMs' without your permission, but I explained why I did it in the PM.

Thank you

Ok. I've got the PM.
To be honest - I'm not quite sure where the problem lies. If user clicks one of the tabs (which on mobile stack one under another) - user should see that something changes under the tab and just scroll with the "swipe" gesture.
How would you like it to behave?

Ok. I've got the PM.
To be honest - I'm not quite sure where the problem lies. If user clicks one of the tabs (which on mobile stack one under another) - user should see that something changes under the tab and just scroll with the "swipe" gesture.
How would you like it to behave?

I'd like that when the user clicks on any tab, it scrolls down to the tab's subject(content), not just change the color or something. As I said, I guess that this is a Joomla core file and may also be a default behavior on mobiles, but for me it is more natural that it shows the content than just change the tab color, and I am pretty sure that many of my site visitors will argue the same, but I'll have to have a solution before it happens.
If there is no way how to do it, I'll leave it as plain.

Thanks

Ps.: I've changed both contacts to tabs and tested in a 320 X 480 px screen. In the "Fale com o Zpeed" is a little bit intuitive, but with "Orçamento para Banners" if I click on each tab, it just changes the tab color, the user will never know that there is something under it scroll down. Sure, I may be wrong, but I also know my visitors, if you know what I mean.

Could you please describe me step by step how could I reproduce this tabbed element on my local environment (how to configure it correctly) - I need to try few possible solutions but need correctly working tabs.

Sure...

What I do is: I open Firefox and then I open the "Orçamento para Banners" contact page maximized (my screen is 1920 x 1080 px), then I press CTRL+SHIFT+M to simulate mobiles and tablets. In this screen I choose 320 x 480 and see how the contact pages is behaving, then I start choosing other resolutions and also positions (horizontal and vertical simulation).

This is how I test various situations that a page can be viewed. I know that this is not the best practice, because each device has its own OS and ways of browsing web, but this is the only way that I can do it right now.

Please describe in short adding tabs from backend side - or are they just a part of contact component?

They are just a part of the component, I just choose tabs in the dropdown list.

I'm having problem recreating this look on my enviroment. Could you please describe me step by step how did you set it up (what did you edited and where have you chosen tabs element)?

I'm having problem recreating this look on my enviroment. Could you please describe me step by step how did you set it up (what did you edited and where have you chosen tabs element)?

There is no secrete or anything fancy that I may have done, I've followed the defaults provided by the template:

Just create a new contact, fill in some fields like address, phone, city, state, etc. For a more effective test, fill in the Miscelanious information - In Display Options tab, enable the fields that you've filled in and choose Display format: Tabs.

I have checked the idea, but it looks like there is no easy way to achieve that.
You would need to either detect mobile browser in JS basing on user agent or on screen width, and then what is worst of available ideas - you would need to modify Joomla core js file to inject there your code. And as this is Joomla core file/library - modifying it might cause problems in other parts of page and backend.

Yeap... I was affraid that the answer would be something like this.

Well, thanks for your affort anyway - much appreciated.

I'm sorry I couldn't give you better news .

I'm sorry I couldn't give you better news .

No problem, it wasn't something critical. At least you've tried and did what you could to help me, right?

Thank you.

I was thinking more about this problem... And found this idea.

Please edit file:
templates/gk_musicstate/js/gk.scripts.js
and find this block of code:

Code: Select all

jQuery(document).ready(function() {

   if(!jQuery('#aside-menu').length > 0) {
      //
      var menuwrap = new jQuery('<div id="gkMenuWrap"></div>');
      //
      menuwrap.appendTo(jQuery('body'));
      
      //
      if(!jQuery('body').hasClass('imageBg')) {
         jQuery('#gkHeaderNav').appendTo(jQuery('#gkMenuWrap'));
         jQuery('#gkHeader').attr('class', 'gkNoMenu');
         jQuery('#gkHeader').find('div').eq(0).css('display', 'none');
         jQuery('#gkMenuWrap').attr('class', 'active');   
      }
   }

});


and add modify it by adding its bottom part:

Code: Select all

jQuery(document).ready(function() {

   if(!jQuery('#aside-menu').length > 0) {
      //
      var menuwrap = new jQuery('<div id="gkMenuWrap"></div>');
      //
      menuwrap.appendTo(jQuery('body'));
      
      //
      if(!jQuery('body').hasClass('imageBg')) {
         jQuery('#gkHeaderNav').appendTo(jQuery('#gkMenuWrap'));
         jQuery('#gkHeader').attr('class', 'gkNoMenu');
         jQuery('#gkHeader').find('div').eq(0).css('display', 'none');
         jQuery('#gkMenuWrap').attr('class', 'active');   
      }
   }
   if(jQuery('div.contact').length > 0 && jQuery(document).width() <= 1030) {
      var $contctContainer = jQuery('#gkMainbody div.contact');
      var $tabSwitchingElements = $contctContainer.find('#contact-slider dt.tabs');
      $tabSwitchingElements.each(function(i, el){
         jQuery(el).on('click', function(){
            jQuery('html, body').animate({
                 scrollTop: jQuery('#gkMainbody div.contact div.current').offset().top - jQuery('#gkHeaderNav').height()
             }, 800);
         })
      });
   }
});


Now in added code there is a 1030 value with is a maximum screen width of device when this script fires - it is connected with the width when mobile menu shows, but you might like to set it to lower value. I don't know if id does exactly what you would like, but I hope it will help a little.

Hi Cyberek!

Sorry for taking so long to answer back, I had some health issues that kept away. I've just tested the solution suggested, and it worked brilliantly. Now when I click on a tab, it scrolls down just the way it should be. Great job and great support!

Thank you.

Thanks for appreciation and I hope you are feeling well.
I wish you speedy recovery .

I wish you speedy recovery .

thanks