Discussion on Canvas | The Multi-Purpose HTML5 Template

Discussion on Canvas | The Multi-Purpose HTML5 Template

Cart 74,038 sales
Recently Updated
Well Documented

SemiColonWeb supports this item

Supported

This author's response time can be up to 1 business day.

5643 comments found.

How do you disable the fade-in effects that run before every single page loads?

Hello,

There are two options to disable the Page Loading Transition:

1. You can simply add the .no-transition Class to the <body> Tag.

2. You can simply find and Comment/Delete the following line of code in the js/functions.js File:
SEMICOLON.initialize.pageTransition();

This will definitely work fine.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Hello! I sent you an email about using Canvas with AngularJS with no response until now. It’s important. Please send me an answer. Thank you.

Hello,

We have already replied to your Email. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Hello! :9

How can I make the Slider not make the text disappear when I click the right arrow while being on the last slide? Or even better, how can i make it go back to the first slide by clicking on the right arrow on the last slide? Thanks!

Hello,

Thank You so much for reporting this to us. There was a slight bug in the code. Please find the following code in the Slider Initialization JS:
onSwiperCreated: function(swiper){
    $('[data-caption-animate]').each(function(){
        var $toAnimateElement = $(this);
        var toAnimateDelay = $(this).attr('data-caption-delay');
        var toAnimateDelayTime = 0;
        if( toAnimateDelay ) { toAnimateDelayTime = Number( toAnimateDelay ) + 750; } else { toAnimateDelayTime = 750; }
        if( !$toAnimateElement.hasClass('animated') ) {
            $toAnimateElement.addClass('not-animated');
            var elementAnimation = $toAnimateElement.attr('data-caption-animate');
            setTimeout(function() {
                $toAnimateElement.removeClass('not-animated').addClass( elementAnimation + ' animated');
            }, toAnimateDelayTime);
        }
    });
    SEMICOLON.slider.swiperSliderMenu();
},
onSlideChangeStart: function(swiper){
    $('[data-caption-animate]').each(function(){
        var $toAnimateElement = $(this);
        var elementAnimation = $toAnimateElement.attr('data-caption-animate');
        $toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
    });
    SEMICOLON.slider.swiperSliderMenu();
}
and replace it with:
onSwiperCreated: function(swiper){
    $('.swiper-slide-visible [data-caption-animate]').each(function(){
        var $toAnimateElement = $(this);
        var toAnimateDelay = $(this).attr('data-caption-delay');
        var toAnimateDelayTime = 0;
        if( toAnimateDelay ) { toAnimateDelayTime = Number( toAnimateDelay ) + 750; } else { toAnimateDelayTime = 750; }
        if( !$toAnimateElement.hasClass('animated') ) {
            $toAnimateElement.addClass('not-animated');
            var elementAnimation = $toAnimateElement.attr('data-caption-animate');
            setTimeout(function() {
                $toAnimateElement.removeClass('not-animated').addClass( elementAnimation + ' animated');
            }, toAnimateDelayTime);
        }
    });
    $('[data-caption-animate]').each(function(){
        var $toAnimateElement = $(this);
        var elementAnimation = $toAnimateElement.attr('data-caption-animate');
        if( $toAnimateElement.parents('.swiper-slide').hasClass('swiper-slide-visible') ) { return true; }
        $toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
    });
    SEMICOLON.slider.swiperSliderMenu();
},
onSlideChangeStart: function(swiper){
    $('[data-caption-animate]').each(function(){
        var $toAnimateElement = $(this);
        var elementAnimation = $toAnimateElement.attr('data-caption-animate');
        if( $toAnimateElement.parents('.swiper-slide').hasClass('swiper-slide-visible') ) { return true; }
        $toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
    });
    SEMICOLON.slider.swiperSliderMenu();
}
This will surely fix this issue. Additionally, you can simply add the loop: true option in the Slider JS Settings. Example:
swiperSlider = new Swiper('.swiper-parent',{
    paginationClickable: false,
    slidesPerView: 1,
    grabCursor: true
and replace it with:
swiperSlider = new Swiper('.swiper-parent',{
    paginationClickable: false,
    slidesPerView: 1,
    grabCursor: true,
    loop: true,

This will definitely work fine.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Wish I’d looked at the comments prior to buying. Too complicated. Instructions are terrible. Was going to ask for help, but by the looks of it, it’s not a priority for them. Wasted my $17. Would appreciate a refund.

Hello,

We Really Apologize that you find Canvas complicated. It would be great if you can please let us know what are the issues you are facing with Canvas so that we can look into it and fix this up for you at the earliest. We have checked our Emails but have never received any Support Email from your end. We are really not sure which Comments you are pointing to, since we always reply to each and every Comments/Email with the Solutions. We are always available here whenever you need help and your satisfaction is our Top Priority!

It would also be great if you can please suggest us any improvements we can make to our Documentation so that it is easier to Customize Canvas the way you want it. We are eagerly looking forward to your reply. Thanks for your Patience.

Do let us know if we can help you with anything else. Thanks. :)

Hello, I recently purchased your template, which I love by the way, but I’ve having several issues with sliders and the contact from. I sent you an email a few weeks ago using the support tab above, but I have yet to receive a response. I am sure you are very busy, but could you please double check your emails and send me a reply. Thank you!

Hello,

Thank You so much for Purchasing Canvas and the Kind Words. :)

We are always here whenever you need help. We have just checked our Emails but unfortunately we have not received any Emails from your end. Can you please resend your Email so that we can look into your issues and fix this up for you asap. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Thank you for the quick reply! I just sent the email again. Please me know when you get it. Thanks! :)

Hello,

We have already replied to your Email with all the Solutions. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Hello,

Amazing template. I have a quick question regarding the countdown. I want to add the countdown to work with hours and minutes too… I’ve seen this comment : http://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123/comments?page=64&filter=all#comment_11194176 and tried the code you provided there, but it doesn’t seem to work. What happens is the countdown only displays hours and minutes (days disappear) but still not what I want because it doesn’t seem to affect the hours anyways. Any cue would be appreciated!

Here’s my code :
<div id="countdown-example" />

    <script>
        jQuery(document).ready( function($){
        var newDate = new Date(2016, 12-1, 25) + 72000;
        $('#countdown-example').countdown({until: newDate, format: 'dHM'});
        });
    </script>

Thanks!

Hello,

Thank You so much for the Kind Words. :)

Can you please consider using the following code:
var newDate = new Date(2016, 11, 25);
newDate.setHours(newDate.getHours() + 20);

+ 20 is for 20 Hours. You can Edit this Value according to your needs.

Additionally, if you are still facing an issue then it would be really nice if you can please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Hi, just noticed when I use fade effect for the Swiper Slider, there’s an issue on Firefox and IE 10 (not sure about the ver. of the IE). When moving to the next slide, instead of smooth transition, the slide shakes 4-5 times, and fades in and out. Do you know how I can fix this issue? Thank you, D

Hello,

We acknowledge this issue with the Swiper Slider Fade Functionality but currently there is no fix for this as this is an issue with the Swiper Slider itself. We are upgrading the Swiper Slider to the Latest Version in Canvas 4 which will fix this issue. This Update will be available Next Week. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Dear Semicolonists, I am badly looking for a documentation on the Vimeo lightbox. Unfortunately it is not included in the offline documentation. Do I realy have to use an iframe for that? Pleeeaaase assist! :D Thank you very much! :)

See? ;-)

OK, I finally used the light box feature and I am loving it, I understand, that the other examples are using Slider Revolution’s slider. That is pretty nice, but I stick to the iframe / light box version. Thank you!!! :-D

Hello,

The Different types of Vimeo Videos usage actually depends on the Type of Content you are trying to create. The easiest of them all is the Lightbox Option since it is very straight forward and can be added very easily anywhere on the Page whether it is a Button or a Link in the Menu or an Overlay Link on an Image. So this is the easiest.

And the other 2 options for adding the Vimeo Videos revolve around the Hero Templates created using the Revolution Slider. This is effective if you are planning to add a Hero Area on your Website focused only on your Vimeo Video like a Movie Production Company etc.

Hope this gives an overview of what is possible with the different templates available with Canvas. Thanks for your Patience.

Do let us know if you have any confusion with any other functionality and we will be more than happy to help you out with it.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Hi, i bought your Template and i wanted to use your one-page. So I moved your one-page directory to web. But your code always included other files from ../

Could you describe how to start with your one-page setup? Frist steps. I checked your docu…

Hello,

Thank You so much for Purchasing Canvas! :)

Please send us an Email from here: http://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123/support/contact so that we can send you the Sample File. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Hi. Just bought and using the template. It has everything. a few points:

a) I read in previous comments that video autoplay does not work on mobile android and iOS. Is it still the case?

b) if yes to above, do you have a fall back solution for mobiles e.g. show a static image background instead of the videos?

c) On this page http://themes.semicolonweb.com/html/canvas/about-me.php , the image is not responsive on mobiles. Any fix?

d) I want to change the color of the transition page (white background with 3 small circles which appear while data loads) from white to black. How?

thank you.

Hello,

Thank You so much for Purchasing Canvas! :)

a. Yes, iOS and Android still does not allow HTML5 Video Autoplay.

b. This functionality is already available by default and a Placeholder Image is shown in place of the Video on iOS Devices.

c. The Image on this Page is used as a Background Image with background-size set to cover. You will simply need to decrease the Padding of the Page Title on this Page to make the Image visibility more optimized. Consider adding the following CSS:
.device-sm #page-title { padding: 150px 0 !important; }
.device-xs #page-title { padding: 120px 0 !important; }
.device-xxs #page-title { padding: 70px 0 !important; }
d. Add the following CSS Code:
.css3-spinner { background-color: #000; }
.css3-spinner > div { background-color: #444; }

This will definitely work fine.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

thank you.

Hello,

I have purchased this theme,and its has worked wonders. I am just stuck up at the modal load on home page on click of a button. I have wrote the code for it, but it just keeps on loading with a black layover on the full page.

Here is the link : www.varundavda.com

Click on ‘REFER’ from the navigation menu, to view the problem.

Thank you.

Thank you.

I tried to implement the way you told, but it is still not working. Also if i include functions.js at the end of the page it leaves a big white blank space between social icons and the footer.

This is the reason i am not including it in the end of the page.

Also there is some margin issue in the div after the grids section in home page as well as in pricing table. Also the newsletter option in homepage is not responsive.

The modal issue has been solved.

Hello,

We have just checked out and found out that you have commented out the #wrapper Container. #wrapper is the most important part of the Structure of Canvas and should not be removed. Additionally, when you are using a .section Container, always place it outside the .container Wrapper. Example:
<!-- Content
============================================= -->
<section id="content">
    <div class="content-wrap">

        <div class="container clearfix">
            Content...
        </div>

        <div class="section">
            <div class="container clearfix">
                Content...
            </div>
        </div>

        <div class="container clearfix">
            Content...
        </div>

    </div>
</section><!-- #content end -->

This will definitely fix your issue.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Hi,

I would like some help with three doubts:

1) How can I make the space between

smaller? 2) How can I add a skip button during the page load, like the one you have at the demo from Envato? 3) Check the page: http://muvin.com.br/novo2016/produto.phtml .... The thumb images should be in a carousel, right? Why one of the thumbs drop to a second line?

Thanks.

Hello,

1. You can simply use the Helper Class .bottommargin-sm or .topmargin-sm to reduce the Margin. More Documentation on this can be found in the Documentation > Page Elements > Helper Classes Section.

2. This functionality is handled through PHP. You can simply add a Button with the href=”?transition=disable” and then use the PHP $_GET method to get the value and set the .no-transition Class via PHP to the <body> tag.

3. Flex Slider Thumbs currently do not have the carousel functionality. Consider using Owl Carousel handle this using a Carousel. Please send us an Email from here: http://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123/support/contact if you need us to send you the Sample File. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Thanks for your reply. About question 3, I already sent you an email.

I would like to know how to apply the .bottommargin-sm or .topmargin-sm to all

tags of a page, or all

tags that are inside a DIV, as our content are coming from a database. Can you tell me please?

Thanks.

Hi Do you have a solution for adding a attachment to the contact form, I need it for career page…

Hello,

This is Definitely Possible. We already have a Template for this available in the Package/HTML Folder with the name jobs-file.html File. You can readily use this Template. However, if you need to add the File Field for the Contact Form, then you can simply send us an Email from here: http://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123/support/contact so that we can send you the Sample File. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Using your parallax template, attempting to change the hover color of the navigation – but to no avail. Can you please advise how I can change the hover/active navigation color?

Hello,

Please add the following CSS to change the Hover/Active Color of the Primary Menu Items:
#primary-menu > ul > li:hover a,
#primary-menu > ul > li.current a { color: #1ABC9C; }

This will definitely work fine.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Hi

We’re currently using the Canvas slider with embedded video (ie. index page on the semicolonweb canvas demo site). However, we are having issues with the play icon.

When background videos are added to Canvas Slides and the page is loaded on an iOS device, the default iOS video play icon loads into the slide as it enters the screen. The issue is that the video play icons still loads as a white circle even when the video backgrounds does not play on any iOS device.

Any suggestions a fix for this issue??

Thanks, Johnny

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, the Background Video will not play on Mobile Devices due to restrictions imposed by Apple and Android. But the Video can be played on their Default Video Players. However, we replace the Video with a Placeholder Image on Mobile Devices.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

We found that slide # 2 on the canvas index page on an iOS phone shows the play icon when it shouldn’t.

The link is: http://themes.semicolonweb.com/html/canvas/index.php.

Any suggestions??

Thanks, Johnny

Hello,

Please find the following code in the js/functions.js File:
if( placeholderImg != '' ) {
    element.append('<div class="video-placeholder" style="background-image: url('+ placeholderImg +');" />')
}
and replace it with:
if( placeholderImg != '' ) {
    elementVideo.hide();
    element.append('<div class="video-placeholder" style="background-image: url('+ placeholderImg +');" />')
}

This should definitely fix your issue. We will fix this in our Next Update.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Hi,

Have just bought this fab template (bought coworker in the past, which was great too).

Is there a way for me to include landscape and portrait images in the revolution slider, please. This would absolutely make my day if you could tell me how, please.

~Thanks

Hello,

Thank You so much for Purchasing Canvas and the Kind Words. :)

We can definitely provide you with the sample codes but it would be great if you can please provide us with an Example of what you are planning to add so that we can provide you with a more accurate solution. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Terrific, thank you, I’ll send some images via your profile email.

Hey,

I have read something about an update to Version 4 of Canvas. Will it be this week or next week?

Greetz Markus

Hello,

We still have some Documentation left to be added since there are a few changes to the Core Codes and we are documenting everything so that the Upgrade Process is easier for you. We will be releasing the Update for Canvas 4 Next Week. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

I’m using the Canvas slider with 3 slides, I want to append a new video slide to the canvas slider ONLY if user is on a device-lg, device-md, device-sm (basically serve a new video slide to desktop and tablets), everything I had tried didn’t work. Could you please give me some pointers.

Thank you,

Tonyxt1

Hello,

Currently, we can add a Code to append an Image Slide using jQuery based on the Device List but not Video Slides since Video Slides requires jQuery to run in order to make the Video Full Screen and adjust it to the Screen. But you can consider using PHP instead to add your slide which will be much more easier. Consider using this Mobile Detection PHP Class: http://mobiledetect.net/ .

This will definitely work fine.

Let us know if we can help you with anything else or if you find any other issues. Thanks. :)

Hi

We’re currently using the slider-canvas-fade.html sample code on our site for various banners.

We noticed there were issues with the fade functionality if we add links to each slide. The link on the first slide works correctly but every following slide will contain the links from the first slide even if slide 2 & 3 all contain different links.

We found some links stating that there maybe issues with slider functionality. http://www.idangero.us/swiper/forum/#!/?fade

Any ideas why?

Hello,

We are working on Canvas 4 which will include the Latest Version of Swiper Slider which will solve this issue. We will be releasing this Update Next Week. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any other issue with Canvas. Thanks. :)

Great!! Thanks for the update. We’ll wait for the next canvas update.

Looks like everyone likes this template. I am planning on getting it next month. Just a question, is it is easy to use?

Hello,

Thank You so much for you Interest in Purchasing Canvas! :)

Canvas is a Static HTML5 Template so you will need a Text Editor like Sublime Text or Notepad++ to edit the Templates and you will require some basic knowledge of HTML and CSS. We have used Clean Codes and Flexible Structures for ease of use.

You can check out the Documentation here: http://support.semicolonweb.com/canvas-html-documentation/ .

Let us know if we can help you with anything else. Thanks. :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey