Docs

[roman5987]

Hi, on the user page of my website I have a 2/3 section that contains 6 tabs. Each tab is a separate category and on click I want to display the corresponding grid. I am using The Grid and it works well, however only after resizing the page. The slightest resize is what activates it to be displayed, without it the content of the tab is blank. On mobile the problem is similar but the grid appears once the user scrolls on the page. Not really sure whats causing this behavior and would appreciate some assistance.

The other question I have is how to style the tab backgrounds on click. I have a unique ID for each tab. Can I do this in CSS or would I have to stick to onclick in JavaScript?

Thank You for your time.

[roman5987]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {
	$('.x-nav-tabs-item a').click(function(){
		$(window).resize();
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[roman5987]

Hi, after adding this code, the grid would appear only on the second click of the given tab and it also introduced an issue with the horizontal scrolling of the grid (it became locked in place).

[Rad]

Hi there,

Please try this,

jQuery(document).ready(function($) {
	$('.x-nav-tabs-item a').click(function(){
		setTimeout( function() { $(window).resize(); }, 1500 );
	});
});

The click triggers even before the grid appears, hence, the rendering isn’t triggered. With added 1.5 seconds delay, then it should work. You can change 1500 if you think 1.5 seconds is long 🙂

Thanks!

[roman5987]

That worked! Thank you!

While I’m still here i just want to quickly address the follow up question I had. I need to style the tab backgrounds on click. I have a unique ID for each tab. Can I do this in CSS or would I have to stick to onclick in JavaScript?

[Rue Nel]

Hello There,

Thanks for updating in! To style the tab backgrounds of the active tab, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#socialTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

#conventionalTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

#realisticTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

#investigativeTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

#artisticTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

#enterprisingTab.x-nav-tabs-item.active a {
    background-color: red !important;
}

We would loved to know if this has work for you. Thank you.

[roman5987]

Hey, yes that worked great. Exactly what i needed. Thank you for your help!

[Prasant Rai]

You are most welcome. 🙂

[roman5987]

Hi guys, sorry to bother you again but I’m running into an issue with The Grid. I have 6 tabs, and each one will have a unique horizontal scrolling grid. Right now it seems like only the first tab containing the grid is scroll-able. The grids in the other tabs freeze up and I am not able to scroll through. This is consistent on mobile and tablet displays, as well as desktop.

[Rahul]

Hey There,

Thanks for writing back!

We’re unable to replicate the issue. Would you mind sending us a Screenshot so that we can take a Closer look of the issue?

Thanks!

[roman5987]

Hi, I made the tab content background grey so its more noticeable. The behavior is inconsistent but here is the scenario that happens most of the time:

Land on the user page, the social tab is active and the grid is displayed. You can see the left and right arrows as well as the bullet points at the bottom. You can use the arrows to scroll, or press down and drag with your mouse. Now, when you switch over to the realistic or investigative tab, you no longer see the bullet points at the bottom and the grid arrows are inactive, so you can not scroll in any way.

[roman5987]

Here you can see the inactive screenshot

[Nabeel A]

Hi again,

Thank you for the screenshots. You’ve a missing file http://grownup.io/user/roman/jsfunctions.js which could be linked with your functionality. Try fixing it and see if this resolves the issue.

Let us know how this goes!

[roman5987]

Hi, I moved it to the following page for more isolated testing: http://grownup.io/thegridtest/

There is nothing else on the page however the issue remains.

[Author]

Posts