3 replies · opened Sep 28, 2022
Hello,
With regards to the Portfolio Widget, and specifically with in-Page AJAX, is there a way to trigger a sorting from the URL with a GET Parameter?
Looking at the linked page, for example, is there a way to craft a URL such that when loading that page, the "Icons" sorting is already active?
Many thanks in advance, and thanks for a truly outstanding product!
Andy
Hello,
Thanks so much for the Kind Words! :)
This is definitely possible. Use the link in this format: portfolio.html#filter=.pf-graphics and then you can simply add the following JS Codes at the bottom of the Portfolio Page:
[ch_pre]
jQuery(window).on( 'pluginIsotopeReady', function(){
let $container = $('.grid-container');
function getHashFilter() {
let hash = location.hash;
// get filter=filterName
let matches = location.hash.match( /filter=([^&]+)/i );
let hashFilter = matches && matches[1];
return hashFilter && decodeURIComponent( hashFilter );
}
function onHashchange() {
let hashFilter = getHashFilter();
if ( !hashFilter ) {
return;
}
// filter isotope
$container.isotope({ filter: hashFilter });
// set selected class on button
if ( hashFilter ) {
$('.grid-filter li').removeClass('activeFilter');
$('.grid-filter li').find('[data-filter="' + hashFilter + '"]').parent('li').addClass('activeFilter');
}
}
$(window).on( 'hashchange', onHashchange );
// trigger event handler to init Isotope
onHashchange();
});
[/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Ah, this is brilliant, thank you so much!
I even added a scroll-to-id bit into the onHashChange function. Work an absolute dream.
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