Canvas Support

I don't know what's wrong

5 replies · opened Apr 23, 2021

BbertrandbodeletApr 23, 2021

Hi
I've a issue using TABS and Masonnery Gallery. I want to put in TAB1 and in TAB2 two differents gallery made with massonery style. The code works pretty well in this page with a TimeLine (more than 12 galleries). TimeLine Page

But in a page using TABS, Page_with_TABS , my first Gallery1 in TABS1 works fine loading the page but my second Gallery2 in the TABS2 doesn't appear clicking on TABS2.
To see it, I need to resize the windows of my navigator (Google Chrome). So, the Gallery2 appears and if I click on TABS1 again... I can't see the Gallery1.
Searching, searching, and searching hours and ... nothing
Do you have a idea about what's wrong?
Thank You
Bertrand

SSemicolon WebSTAFFApr 24, 2021

Hello,

Apologies about the Inconveniences caused regarding this. The Masonry Thumbs are not visible as the Tab Panel is hidden. This can be fixed by simply adding the following code at the bottom of the Page:

<script>
	$( ".tabs" ).on( "tabsactivate", function( event, ui ) {
		let mThumbs = $(ui.newPanel).find( '.masonry-thumbs' );
		if( mThumbs.length > 0 ) {
			if( !mThumbs.hasClass('tabs-masonry-resized') ) {
				setTimeout( function(){
					SEMICOLON.widget.masonryThumbs();
					mThumbs.addClass('tabs-masonry-resized');
				}, 500);
			}
		}
	});
</script>

This should definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbertrandbodeletApr 24, 2021

Thanks a lot
It works but no completly. If I click on TABS1, TABS2, TABS1 everything ok, but if I click again on TABS2, the gallery doesn't appear again.
???
Other idea?
TKs

SSemicolon WebSTAFFApr 24, 2021

Hello,

Consider using this code instead:

<script>
	$( ".tabs" ).on( "tabsactivate", function( event, ui ) {
		let mThumbs = $(ui.newPanel).find( '.masonry-thumbs' );
		if( mThumbs.length > 0 ) {
			setTimeout( function(){
				SEMICOLON.widget.masonryThumbs();
			}, 500);
		}
	});
</script>

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbertrandbodeletApr 24, 2021

Just perfect :)
Thank you very much
Have a great day
Bertrand

SSemicolon WebSTAFFApr 24, 2021

Hello,

Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard