9 replies · opened Sep 29, 2016
Hi
See my page: http://new.cmyuk.com/printer-page.php
I have placed portfolio items within the "Applications" tab. They do not seem to load unless I open the developers toolbox inspector window. It then kicks into life and can be seen.
If I move the portfolio items outside of the tab contents it works fine.
Can you please help me fix the issue?
Hello,
Please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:
jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
jQuery( '.grid-container' ).isotope('layout');
});
This should definitely fix your issue. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Thanks that has solved part of the issue, but not the slider items with the portfolio.
See http://newcmyuk:8888/printer-page.php
What do I need to do?
Sorry wrong link in my previous message. Try this one: http://new.cmyuk.com/printer-page.php
Hello,
Thank You for Reporting this to us! Please consider using the following JS Code replacing the Old JS Code:
jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
var gridsAvailable = jQuery( ui.newPanel ).find('.grid-container');
if( gridsAvailable.length > 0 ) {
gridsAvailable.each( function(){
var grid = jQuery(this);
if( !grid.hasClass('tabs-enabled-grid-container') ) {
grid.isotope('layout');
setTimeout( function(){
jQuery( ui.newPanel ).find('.flexslider .slide').resize();
}, 800);
setTimeout( function(){
grid.isotope('layout');
}, 3000);
grid.addClass('tabs-enabled-grid-container');
}
});
}
});
This will definitely fix the issue. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Thanks it does resolve the issue eventually, but it animates in a strange way. Are you able to resolve so the animation looks more natural?
Hello,
Unfortunately, this is inevitable. Since there are 3 Javascript Plugins working together: jQuery UI Tabs, IsoTope(for the Grid) and Flex Slider which is why we need to make adjustments to the Code so that it works properly.
Hope this Helps.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Thanks for the reply, but the console is showing an error (see screenshot attached). Why is this?
Also is it possible to turn off the animation as it loads in. Would that fix it?
Hello,
This Error occurs when the FlexSlider Pagination Dots are Animated. Please consider adding the .no-thumbs-animate Class to the .fslider Element to disable this and the Error will be resolved.
To disable the Animation on the Grid, simply add the data-transition="0s" Attribute to the .grid-container Container. But we guess this will not entirely solve the issue and the previous solution was better. However, it entirely depends on your needs.
Hope this Helps! Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Okay thanks for your help
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