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
Here is a screenshot if that helps...
Here is a screenshot if that helps!
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 < outerContainerHeight ) {
var videoAspectRatio = innerVideoWidth/innerVideoHeight,
newVideoWidth = outerContainerHeight * videoAspectRatio,
innerVideoPosition = (newVideoWidth - outerContainerWidth) / 2;
elementVideo.css({ 'width': newVideoWidth+'px', 'height': outerContainerHeight+'px', 'left': -innerVideoPosition+'px' });
} else {
var innerVideoPosition = (innerVideoHeight - outerContainerHeight) / 2;
elementVideo.css({ 'width': innerVideoWidth+'px', 'height': innerVideoHeight+'px', 'top': -innerVideoPosition+'px' });
}
}
if( SEMICOLON.isMobile.any() && !element.hasClass('no-placeholder') ) {
var placeholderImg = elementVideo.attr('poster');
if( placeholderImg != '' ) {
element.append('<div class="video-placeholder" style="background-image: url('+ placeholderImg +');"></div>')
}
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.
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?
Picture for above
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.
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...
Oh and also, how to stop the Slider Caption from fading as you scroll down??
Hello,
We Apologize about the Inconveniences! We will try making Our Documentation more informative in the Updates.
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.
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.
Yes I did think this, I did a lot of reading about it.
Thanks for all your help!
http://ttol.co/360dpg/en/about-us
On this page, how to stop "Project Management" in slider from moving down also... just want it fixed.
Sorry the web address should be http://ttol.co/360dpg/en/project-management
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.
No not really, once I have removed .slider-parallax class from it, the header moves up to a weird position if you take a look now at http://ttol.co/360dpg/en/project-management you will see
hello, bump
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.
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?
bump
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