Canvas Support

data-scrollto functionionality and color question

4 replies · opened Aug 9, 2016

BbdolnikAug 9, 2016

Getting really close to launch and site is looking great thanks to an excellent theme :)

I'm trying to use the data-scrollto functionality. When clicked from the calling page it works fine, see here... http://dev1.wbparts.com/services.cfm -- click on Procurement. However when I go to that page from another internal page it does not work. See here... http://dev1.wbparts.com -- click on Procurement.

I did find this on your support forums, http://support.semicolonweb.com/forums/topic/smooth-scrolling/... and thought the script you provided there might work for us, but it did not. You can see it's currently in place below the /js/functions.js on the http://dev1.wbparts.com/services.cfm page, but still when this page is called from the home page it does not scroll.

Am I doing something wrong?

Also one more thing, not sure there is a fix but just looking for some guidance. I really like the 'subtlety' of the color gradients on the different sections, header, background, etc. However I'm finding now that I'm showing people the site, if their monitor contrast is not set high enough the gradients don't show, and everything is just white.

So I guess what I'm asking is have you heard this from people before, and if maybe you have some recommendations on getting the gradients to show up on these kind of monitors setups, while still maintaining the subtlety of the colors?

Thanks!

SSemicolon WebSTAFFAug 10, 2016

Hello,

Thank You so much for the Kind Words. :)

We have checked out your Website and the code actually has a minor bug and we really apologize about the same. Please consider replacing the Old JS Code with the following: 


	jQuery(document).ready( function(){
		setTimeout(function() {
			if (location.hash) {
				window.scrollTo(0, 0);
			}
		}, 1);
	});

	jQuery(window).on('load', function(){
		var divScrollToAnchor = window.location.hash;

		if( divScrollToAnchor ) {
			var t = setTimeout( function(){
				$('html,body').stop(true).animate({
					'scrollTop': $( divScrollToAnchor ).offset().top - 100
				}, 700, 'easeOutQuad');
			}, 1000);
		}
	});

This should definitely fix the issue.

Regarding your another issue, there is not really some solution for this as the Contrast of the Screen depends from user to user and it is best kept this way since this is the same we have done with our Live Previews.

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

BbdolnikAug 10, 2016

Thanks for the quick reply. Unfortunately it is still not working.

SSemicolon WebSTAFFAug 10, 2016

Hello,

We have tried checking out your Page and your Page now appears to be working fine for us: http://dev1.wbparts.com/services.cfm#section-procurement . Please consider clearing the Cache as this might fix the issue.

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

BbdolnikAug 11, 2016

Ok, yes it's working now. Sorry I didn't realize I needed the #section in both the ahref and the data-scrollto

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