Canvas Support

Refresh required to see Masonry layout photos

4 replies · opened Jul 28, 2020

RRos777Jul 28, 2020

Hello again team

First off, I'd like to thank you for all your help and assistance with my most recent project. Honestly, I don't believe I'll use any other template for upcoming projects - so thank you for great service and making the template so comprehensive! Love it.

Ok, small issue I experience on Chrome on Mac. See this link:
https://www.aftershock.co.za/approvals/ipps/event-details.html

When you scroll down, you see 4 tabs. I included a masonry photo gallery in the 3rd tab "Photo Gallery". When you click on this, the gallery does not appear at first. You have to refresh the page and click on the tab again in order for it to display the gallery. I am happy to do away with gallery animations if it helps to display the gallery as soon as you click on the tab (in case that may be the cause of this issue). Else, if you have other ideas on how to overcome this problem, please let me know.

Looking forward to your reply.

Thanks!

SSemicolon WebSTAFFJul 29, 2020

Hello,

Thank You so much for the Kind Words! :) Very Happy to Help!

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:


	$( ".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);
			}
		}
	});

This will 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.

RRos777Jul 29, 2020

And rightfully predicted again! Thank you so much for the code. There is however, a slight delay before the masonry thumbs appear. Is there any way to make it feature right away? Or even show a preloader if immediate display isn't possible? I tried to play with this code on plugins.masonrythumbs.js:

`setTimeout( function(){
element.filter('.has-init-isotope').isotope( 'layout' );
}, 500);

I changed 500 to 0, but Im not seeing a change. In fact, I'm not sure this has anything to do with the speed in question?

SSemicolon WebSTAFFJul 31, 2020

Hello,

Please do not edit the plugins.masonrythumbs.js File as this will affect the Masonry Functionality. To edit the delay, consider editing the code we have provide you with above:


setTimeout( function(){
	SEMICOLON.widget.masonryThumbs();
	mThumbs.addClass('tabs-masonry-resized');
}, 500);

You can change the 500 Value. But, unfortunately, there is no fool-proof solution for this due to the fact that a JS Element is being loaded inside another JS Element causing a conflict and display issues. So this is currently the best possible solution available.

Hope this Helps!

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

RRos777Jul 31, 2020

Thank you guys. Much appreciated.

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