how to go to a porfolio category from the mega menu ?

5 replies·opened Jun 7, 2021
Z
zgoJun 7, 2021

I'm using the portfolio template . i added the categories and all the projects of the porfolio on the mega menu . how can i go directly to the desired categrie
from the menu directly ??
Thanks

S
SemiColonWebSTAFFJun 8, 2021

Hello,

Use the link href in this format: href="page.html#filter=.pf-graphics" and then you can simply add the following JS Codes at the bottom of the Portfolio Page:

<script>
	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();

	});
</script>

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.

Z
zgoJun 8, 2021

thanks for help , can i create a file and add the file with the js code at the bottom of the page ?

Z
zgoJun 8, 2021

the category is selected but without scrolling to the portfolio and stay in the header of the page .

S
SemiColonWebSTAFFJun 8, 2021

Hello,

  1. Yes sure, you can use this JS Code in some other JS File.

  2. You can consider adding the updating the JS Codes with the following:

<script>
	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;
			}
			console.log( hashFilter );
			// 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');

				let filterElOff	= $('[data-filter="' + hashFilter + '"]').offset().top;
				$('html,body').stop(true, true).animate({
					'scrollTop': filterElOff - 100
				}, 1250, 'easeInOutQuad');
			}
		}

		$(window).on( 'hashchange', onHashchange );
		// trigger event handler to init Isotope
		onHashchange();

	});
</script>

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.

Z
zgoJun 8, 2021

it definitively worked thanks

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