Javascript

Canvas includes a Vast Array of Javascript Plugins to enhance User Experience by providing useful functionality to your Website’s Users. The JS has been built on a very robust structure using Object Functions to initialize the Document and reuse them when needed.

The included JS Plugin files can be found in the js/ Folder. Ex: plugins.toggles.js

Code Example

<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/functions.js"></script>
Note:

Make sure that JS Files are always loaded at the bottom of the Page as in the Default HTML Files.

Including JS Files

  • Complete JS Plugins

    All the JS Plugins are included by default using the plugins.min.js File. This is the easiest way to run the JS Functions/Plugins and needs no extra settings. But it can be memory intensive and can take high load times (due to the Large File Size) as it downloads all the JS Plugins/Functions on the Page even when a particular JS Element does not exist on the page.

    Example:

    <script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/functions.js"></script>
  • Individual JS Plugins

    If you care about performance, you must definitely consider using this method. Instead of loading all the Plugins using the plugins.min.js File, you can consider adding individual JS Plugin Files to the Page, like the plugins.toggles.js File. This way you can control what JS Plugins are loaded on your Page.

    Example:

    <script src="js/jquery.js"></script>
<script src="js/plugins.easing.js"></script>
<script src="js/plugins.bootstrap.js"></script>
<script src="js/plugins.toggles.js"></script>
<script src="js/plugins.isotope.js"></script>
<script src="js/plugins.carousel.js"></script>
<script src="js/functions.js"></script>
    Note:

    If you are using this method, always make sure that you add plugins.easing.js and plugins.bootstrap.js JS Linkings manually on every Page.

    Quick Tip

    To find out which Plugin is being loaded on the Page, simply open your Browser’s Developer Console and check the Classes added to the <body> Tag. Ex: has-plugin-lightbox

  • AJAX Lazy Loading

    This method is for the Performance Buffs and Beginner Users alike. It does not require any js/plugins.*.js File on the Page. If you choose to use this method, the js/functions.js File will intelligently do all the work for you and load only those JS Plugins on the Page which are required based on the JS Elements available on the Page.

    Suppose, if your FAQs Page has the Toggle Element, then the plugins.toggles.js JS Plugin will be loaded automatically on the FAQs Page but not on other pages where the Toggles Element does not exist.

    This way your Website remains light and fast.

    Example:

    <script src="js/jquery.js"></script>
<script src="js/functions.js"></script>

Settings

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Login with Envato

Adding Custom JS Plugins/Codes

If you are planning to add Custom JS Plugins to your Page, make sure that the Plugin JS is always linked at the bottom of the Page before the js/functions.js JS Linking. And any Custom JS Codes like Plugin Initialization Codes or Google Analytics must be added after the js/functions.js JS Linking before the </body> Tag.

Last Modified: November 20, 2020

Need Help?