Canvas Slider Problem

19 replies · opened Aug 3, 2017

Rrdhc1330Aug 3, 2017

Hi there,

No matter what size slider I have, it doesn't want to fit to the full screen.
If you look at the "test site" http://ttol.co/360dpg/en/ , you will see that the video has a small margin on either side.
If I force refresh using ctrl+f5 then it sometimes goes away, but if I just normally refresh the margins appear again...
This is on 3 seperate browsers. There doesn't appear to be any coding errors so quite unsure if there's a setting I'm missing?

Thanks in advance

Rrdhc1330Aug 4, 2017

Here is a screenshot if that helps...

Rrdhc1330Aug 4, 2017

Here is a screenshot if that helps!

SSemicolon WebSTAFFAug 5, 2017

Hello,

Thank You so much for your Patience!

We have checked out your Website and there are HTML Errors on your Page: https://validator.w3.org/nu/?doc=http%3A%2F%2Fttol.co%2F360dpg%2Fen%2F . Please fix the issues related to unclosed HTML Tags.

Additionally, please update the entire html5Video: function() Function Block in the js/functions.js File with the following code:

html5Video: function(){
	var videoEl = $('.video-wrap:has(video)');
	if( videoEl.length > 0 ) {
		videoEl.each(function(){
			var element = $(this),
				elementVideo = element.find('video'),
				elementVideoJS = elementVideo[0],
				outerContainerWidth = element.outerWidth(),
				outerContainerHeight = element.outerHeight(),
				innerVideoWidth = elementVideo.outerWidth(),
				innerVideoHeight = elementVideo.outerHeight();

			if( elementVideoJS.readyState > 3 ) {
				if( innerVideoHeight ')
				}

				elementVideo.hide();
			}
		});
	}
},

This will definitely fix your issue. Hope this Helps!

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

Rrdhc1330Aug 8, 2017

Hello,
Yes this has fixed the problem now.
I've also fixed the HTML errors as described, but I still seem to be having an issue now where the slider position is not fixed and it seems to scroll down with the page?

Rrdhc1330Aug 8, 2017

Picture for above

SSemicolon WebSTAFFAug 8, 2017

Hello,

Please remove the .slider-inner-parallax Container and place the .swiper-container directly after the #slider Container.

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.

Rrdhc1330Aug 10, 2017

Hi, yes thank you for that. The documentation is a bit spotty and hard to find the answers.
I have one more question in relation to the HTML slider...
Is it possible on Desktop devices -> 991px to load straight into the video but hide the poster? On some slower devices they are seeing the poster image for a long time and it doesn't look good...

Rrdhc1330Aug 10, 2017

Oh and also, how to stop the Slider Caption from fading as you scroll down??

SSemicolon WebSTAFFAug 11, 2017

Hello,

We Apologize about the Inconveniences! We will try making Our Documentation more informative in the Updates.

  1. Unfortunately, this is not supported. The Poster Image is a part of the Video Tag and has to be included because without a Poster, the user will just see a Black Screen.

  2. You can simply remove the .slider-caption Class from the sliderElementsFade: function() Function Block in the js/functions.js File.

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.

Rrdhc1330Aug 11, 2017

Yes I did think this, I did a lot of reading about it.
Thanks for all your help!

SSemicolon WebSTAFFAug 15, 2017

Hello,

Simply removing the .slider-parallax Class from the #slider Tag will fix your issue.

Hope this Helps!

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

Rrdhc1330Aug 20, 2017

hello, bump

SSemicolon WebSTAFFAug 23, 2017

Hello,

Thanks for your Patience!

Also remove the .slider-parallax-inner DIV and place the contents directly inside the #slider Element.

This will definitely fix your issue. Hope this Helps!

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

Rrdhc1330Aug 31, 2017

one last question, on the Homepage http://ttol.co/360dpg/en/, when you scroll down the content below the slider moves up and over the slider, anyway to make it all fixed so that there isn't that effect?

Rrdhc1330Sep 1, 2017

bump

SSemicolon WebSTAFFSep 2, 2017

Hello,

Removing the .slider-parallax Class from the #slider Tag will remove the Effect.

Hope this Helps! [sb_private_reply]Please consider updating your Review on ThemeForest![/sb_private_reply]

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

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