Hello there! Welcome to Youjoomla Support Forums

We are Web Development Company specializing in Joomla Templates , Joomla Extensions and WordPress Themes development . You are not able to see some forum threads due to your memberhip level. To unlock all forums and special customer support please take few moments to signup . If you are just searching for free joomla templates , or free joomla extension support simply head to our Free Joomla Support forums and open a new thread. Our moderators will help you as soon as possible. To spead up the response time please take few seconds and go over forum rules

Have fun!

YJSG Tabs to change to Accordions on responsive breakpoint

12-23-2015, 07:41 AM
# 1 (permalink)
aaronbensonlive
Hi,

I am having a great time working with YJSG. I did a ton of research, YJSG is very, very good, very good documentation, awesome!

In my site, I'm using tabs in a few different instances, this can be seen on the home page of the demo I'm building.

- Module Tabs (using the Template/Layout Module settings, publishing modules to module positions that have been set to use Tabs)
- Short-code tabs, inserted into instances of the native CustomHTML module

As I'm working on the responsive CSS, I really want to be able to make some (or all) of the tabs to change to accordions on responsive breakpoints. Can you provide any suggestions as to how to best accomplish this?

There are a few jquery plugins that have good demos - but I'm really stuck on the best YJSG / Joomla! - proper method/files to override to accomplish this.

Example: http://jellekralt.github.io/Responsive-Tabs/

Files I have modified with overrides
- in the (/templates/eximium/layouts) directory:
yjsg_footer.php
yjsg_offcanvas.php
- in (/templates/eximium/css)
custom.css

Are you sure your are posting in product assigned forum?: Yes

What is your CMS version?: Joomla 3.x

MySQL Version: 5.x

PHP version: 5.x

Link to installation: http://archbiopartners.bensonmakes.com/

Have you edited any files? If yes tell us which ones.: Yes

Is this personal or client website?: Client
12-24-2015, 05:24 AM
# 2 (permalink)
arefund
Hello aaronbensonlive.
Please advise first if you purchase the copyright removal in the footer. If not please notice that you need to buy the branding removal first in order to change or remove the copyright in the footer.
As for the tabs and the accordion switch, there is no specific way to make this work the best with YJSG, you can try to add the plugin that you found and see if that will work for you.
Kindness costs the least, but is worth the most!
12-30-2015, 10:43 AM
# 3 (permalink)
aaronbensonlive
Hi,

I'm in beta on this site, so I've edited the footer for the client to see what it would look like.

Please provide a link or detail on the purchase. I'd like to do that, but to be honest, its not immediately clear to me on how, where, cost?.

Thank you,
Aaron
12-30-2015, 12:02 PM
# 4 (permalink)
aaronbensonlive
Also, I'm a bit stuck on this part of implementing the plugin I mentioned (last step).
Use this jQuery function to enable responsive tabs on the selected element:

$('#responsiveTabsDemo').responsiveTabs({
startCollapsed: 'accordion'
});
Would I include this as a block of code as described on this page in your documentation?
http://yjsimplegrid.com/documentatio...avascript.html

Thanks,
Aaron

ps. Please send me the link for purchasing the rights to modify the footer.
01-03-2016, 07:46 AM
# 5 (permalink)
arefund
You can add it as custom head javascript inside template manager or you can do it inside the styles.js file, your call and instead #responsiveTabsDemo ID you should use your tabs ID.

The link for branding removal purchase.
http://www.youjoomla.com/join/signup.php?product_id=24
Kindness costs the least, but is worth the most!
01-03-2016, 09:58 PM
# 6 (permalink)
aaronbensonlive
I used the "yjsg_custom_params.php" file, following the instructions here:

http://www.yjsimplegrid.com/document...rams-file.html

and here:

http://yjsimplegrid.com/documentatio...avascript.html

It worked!!!

I added my CSS, JS and the JQuery function call all in there. Sort of like this for a test class called metamxTabs:

Code:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/jquery.responsiveTabs.js';
// Loads the script
$document->addStyleSheet(JURI::base() . 'templates/eximium/css/responsivetabs/responsive-tabs.css');
$document->addStyleSheet(JURI::base() . 'templates/eximium/css/responsivetabs/style.css');
//Loads the CSS
$yjsg_js.="jQuery(function($) {
     $('#metamxTabs').responsiveTabs({
     startCollapsed: 'accordion'
   });
 })";
//Calls the function
However, its too clumsy a solution for me to use. As I mentioned in my original post, I am using both the shortcode tabs, and also the module position tabs. So, i'd have to rewrite some of the core tabs plugin in order to get my classes on there, and it ended up being too clunky a solution for me.

So, For my hero position on the Home Page I'm using the module position slider instead of the tabs, I added a mock version of the tabs navigation in my module for desktop navigation, and then the slider pagination for small displays. This is a bit better, and less work for me .

Thanks for the help. I'm setting up the live site and will purchase the licence for the clients domain. All the code headers are completely preserved, so think I'll bo OK for the TOS.

I love this framework. As I get through the fine grain work, it seems you guys thought of everything, and when I want to customize its really pretty flexible. Awesome Job.
Thread Tools
Display Modes

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

Members Login

Username
Password