Canvas Support

Infinite scroll, show button on mobile.

5 replies · opened Oct 17, 2016

DdaihloOct 17, 2016

Hey there :)

I'm using the infinite scroll feature on our web site with a right sidebar.
It's good when full screen (desktop), but when viewed on mobile, the right sidebar is visible for only a moment before the infintie scroll loads the next lot of results, leading to the point where you cannot actually reach the sidebar content.
It seems the best solution would be to enable the load more button on mobile (or possibly below a mediawidth), but have the items autoload on desktop.
Is this something you can help me achieve?
Thanks.

SSemicolon WebSTAFFOct 18, 2016

Hello,

This is Definitely Possible. Can you please provide us with the Infinite Scroll JS initialization Code that you have at the bottom of you Page so that we can provide you with the Ready-to-use Code for your Usage Requirements. Thanks for your Patience.

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

DdaihloOct 18, 2016

Hey there, thanks for the quick reply :)

      
		jQuery(window).load(function(){
			var $container = $('#portfolio');
			$container.infinitescroll({
				loading: {
					finishedMsg: '',
					msgText: '',
					img: "templates/tmpl_jewel/images/preloader-dark.gif",
					speed: 'normal'
				},
				state: {
					isDone: false
				},
				nextSelector: "#load-next-posts a",
				navSelector: "#load-next-posts",
				itemSelector: "article.portfolio-item"
			},
			function( newElements ) {
				$container.isotope( 'appended', $( newElements ) );
				var t = setTimeout( function(){ $container.isotope('layout'); }, 1000 );

				    SEMICOLON.widget.loadFlexSlider();
					SEMICOLON.portfolio.arrange();
					SEMICOLON.initialize.lightbox();			

			});
		});
SSemicolon WebSTAFFOct 18, 2016

Hello,

Thank You so much for your Patience! Please consider adding the following JS Code replacing the existing code: 


	jQuery(window).load(function(){
		var $container = $('#portfolio'),
			infinityScrollBehavior = false;

		if( jQuery('body').hasClass('device-sm') || jQuery('body').hasClass('device-xs') || jQuery('body').hasClass('device-xxs') ) {
			infinityScrollBehavior = 'portfolioinfiniteitemsloader';
		}

		$container.infinitescroll({
			loading: {
				finishedMsg: '',
				msgText: '',
				img: "templates/tmpl_jewel/images/preloader-dark.gif",
				speed: 'normal'
			},
			state: {
				isDone: false
			},
			nextSelector: "#load-next-posts a",
			navSelector: "#load-next-posts",
			itemSelector: "article.portfolio-item",
			behavior: infinityScrollBehavior
		},
		function( newElements ) {
			$container.isotope( 'appended', $( newElements ) );
			var t = setTimeout( function(){ $container.isotope('layout'); }, 1000 );

				SEMICOLON.widget.loadFlexSlider();
				SEMICOLON.portfolio.arrange();
				SEMICOLON.initialize.lightbox();

		});
	});

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

DdaihloOct 18, 2016

Elegant solution!
I will use this code and it will probably help me to solve similar problems in the future!
Great template, even better support :)
Thank you.

SSemicolon WebSTAFFOct 18, 2016

Hello,

Really Glad that your issues were resolved. Very Happy to Help!

We assure you that Canvas is even more powerful under the Hood! :)

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