FriendKit
Back to Hub
Back to Css Ninja

Appearance

JS reference ​

This is the javascript reference section. You will find here what you need to know to get started with the theme's JS.

Page loader ​

If you wish to change the behavior of the page loader component, you'll want to edit the snippet in bulkit/assets/js/common.js file. Here is the snippet that controls the page loader :

js
$(document).ready(function(){

    //Page loader
    if ($('.pageloader').length) {

        $('.pageloader').toggleClass('is-active');

        $(window).on('load', function() {
        var pageloaderTimeout = setTimeout( function() {
            $('.pageloader').toggleClass('is-active');
            $('.infraloader').toggleClass('is-active')
            clearTimeout( pageloaderTimeout );
        }, 700 );
        })
    }
});

Responsive toggle ​

If you want to change the way the responsive menu toggle behaves, you need to edit this code, that you can find in bulkit/assets/js/main.js :

js
//Mobile menu toggle
if ($('.nav-toggle').length) {
    $('.nav-toggle').click(function(){
        $(this).toggleClass('is-active');
        if ($('.nav-menu').hasClass('is-active')) {
            $('.nav-menu').removeClass('is-active');
        } else {
            $('.nav-menu').addClass('is-active');
        }
        if ($('.navbar-wrapper').hasClass('navbar-fade', 'navbar-light')) {
            $('.navbar-wrapper').toggleClass('mobile-menu-dark');
        }
    });
}

You can turn the static top navigation to a navbar that fades in and out when you scroll the window. You just need to add the navbar-fade class to the navbar-wrapper element. You will find the javascript code that controls that behavior in bulkit/assets/js/main.js :

js
//Sticky scroll navbar
if ($('.navbar-wrapper.navbar-fade').length) {
    $(".navbar-wrapper.navbar-fade").wrap('<div class="navbar-placeholder"></div>');
    $(".navbar-placeholder").height(jQuery(".navbar-wrapper.navbar-fade").outerHeight());
    $(window).scroll(function() {    // this will work when your window scrolled.
        var height = $(window).scrollTop();  //getting the scrolling height of window
        if(height  > 65) {
            $(".navbar-wrapper.navbar-fade").removeClass('navbar-fade').addClass('translateDown navbar-sticky');
        } else{
            $(".navbar-wrapper.navbar-sticky").removeClass('translateDown navbar-sticky').addClass('navbar-fade');
        }
    });
}

TIP

Notice that it will be enough if you use the standard sticky navbar (e.g with normal logo and dark text colors). But if you choose to add the navbar-light class to the .navbar-wrapper.navbar-fade element, your navbar will turn to light colors (you will need it for colored hero sections). You will then need another snippet to control the color transitions and the logo replacement when the window is scrolled and the solid navbar comes in. You can find this snippet in the JS files related to pre-built kits as each kit needs to have its own logo color. Also, don't forget to add the light-logo class to the navbar-light logo, so the logo transition can be executed on scroll.

html
<!-- Setting up the light fade navbar -->
<div class="navbar-wrapper navbar-fade navbar-light"></div>

<!-- identifying the logo as the light logo -->
<a class="nav-item" href="landing.html">
    <img class="light-logo" src="assets/images/logos/bulkit-w.png" alt="">
</a>

Here is an example with the standard Bulkit logo:

js
//Toggle between light and dark logo when solid navbar comes in
$(window).scroll(function() {    // this will work when your window scrolled.
    var height = $(window).scrollTop();  //getting the scrolling height of window
    if(height  > 80) {
        $("img.light-logo").attr("src","assets/images/logos/bulkit-logo.png");
    } else{
        $("img.light-logo").attr("src","assets/images/logos/bulkit-w.png");
    }
});

//This toggles the Sign up button color from white to primary when the window is scrolled
if ($('.navbar-light').length) {
    $(window).scroll(function() {    // this will work when your window scrolled.
        var height = $(window).scrollTop();  //getting the scrolling height of window
        if(height  > 80) {
            $('.button-signup').removeClass('light-btn').addClass('primary-btn');
        } else{
            $('.button-signup').removeClass('primary-btn').addClass('light-btn');
        }
    });
}

The sidebar menu is easy to control, this is how it is triggered. you can find the code in bulkit/assets/js/main.js .

js
//trigger sidebar
$('#navigation-trigger, .navigation-trigger, .navigation-close').click(function(){
    $('.side-navigation-menu').toggleClass('is-active');
})

When you click on the category buttons of the sidebar (represented with icons on the left), the sidebar menu content changes. This is controlled with data attributes. If you want to add a new sidebar menu, add some markup (see the structure below) to the sidebar and give it a unique ID :

html
<!-- Navigation menu -->
<div id="my-menu" class="navigation-menu-wrapper animated preFadeInRight fadeInRight is-hidden">
    <!-- Navigation Header -->
    <div class="navigation-menu-header">
        <span>Components</span>
        <a class="ml-auto hamburger-btn navigation-close" href="javascript:void(0);">
            <span class="menu-toggle">
                <span class="icon-box-toggle">
                    <span class="rotate">
                        <i class="icon-line-top"></i>
                        <i class="icon-line-center"></i>
                        <i class="icon-line-bottom"></i>
                    </span>
                </span>
            </span>
        </a>
    </div>
    <!-- Navigation body -->
    <ul class="navigation-menu">
        <li class="has-children"><a class="parent-link" href="#"><span class="material-icons">view_quilt</span>Layout</a>
            <ul>
                <li><a class="is-submenu" href="some_page.html">A menu item</a></li>
                <li><a class="is-submenu" href="some_page.html">Another item</a></li>
                <li><a class="is-submenu" href="some_page.html">A third item</a></li>
            </ul>
        </li>
    </ul>
</div

Then, create a new category button :

html
<ul class="categories">
    <li class="category-link" data-navigation-menu="my-menu"><i class="icon some-icon"></i></li>
</ul>

Notice how the data-navigation-menu attribute is pointing to the newly created menu ID. This is how you link them.

Here is the code that controls that data-attribute :

js
//Data navigation menu setup
$('.category-link').click(function(){
    var category_id = $(this).attr('data-navigation-menu');
    $('.navigation-menu-wrapper').addClass('is-hidden');
    $("#" + category_id).removeClass('is-hidden');
})

Parallax ​

Bulkit comes with built-in parallax hero and section. You can quickly setup a parallax header or section by adding the parallax class to a .hero or .section element. You will also need to add the is-relative class to the target element so the parallax overlay can be positioned correctly. You can also add the is-cover class which is shortcut to background-size: cover .

You can also use data-attributes to pass some additional options like a background image, the overlay color and the overlay opacity. Here is an example of a Parallax hero markup

html
<!-- Fullheight Parallax Hero -->
<div class="hero parallax is-cover is-relative is-fullheight"
    data-background="assets/images/bg/good-morning.jpeg"
    data-color="#7F00FF"
    data-color-opacity="0.8">

TIP

The data-color attribute only accepts hex values

Background images ​

Bulkit has built-in support for background images via data attributes. To add a background image to any element, use the data-background="path/to/my/image.jpg" attribute with a valid image url. Notice that you will still have to style your element's background properties with CSS.

Plugins ​

Tooltips ​

This is how you initialize tooltips:

js
$('[data-toggle="tooltip"]').ggtooltip();

Popovers ​

This is how you initialize popovers:

js
$('[data-toggle="popover"]').ggpopover();

Datedropper ​

This is how you initialize Datedropper JS:

js
$('#my-element').dateDropper();

Datepicker ​

This is how you initialize jQuery datepicker:

js
$('[data-toggle="datepicker"]').datepicker();

Timedropper ​

This is how you initialize Timedropper JS:

js
$('#my-element').timeDropper({
    primaryColor: '#4FC1EA',
    borderColor:"#4FC1EA",
    backgroundColor:"#FFF",
    init_animation: 'fadeIn',
});

Wickedpicker ​

Wickedpicker is simple timepicker plugin. it only has a few options. Here are two examples :

12 hours :

js
$('.my-element').wickedpicker();

24 hours :

js
$('.my-element').wickedpicker({
    twentyFour: true,
    timeSeparator: ':'
});

This how to initialize a basic a basic slick carousel, visit the plugin website to see all available options :

js
$('.my-element').slick({
    dots: true,
    infinite: true,
    speed: 500,
    cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
    autoplay: true,
});

Tags input ​

This is how to initialize the tagsinput plugin :

js
$('.my-element').jQueryInputTags({
    maxTotalSize: 255,
    maxTagSize: 10,
    minTagSize: 3,
    chars: /[,:]/,
    keycode: /(^9$|^13$|^32)/, // Tab, Enter, Space
    separator: ',',
    sensitive: false,
    clearSpaces: true

});

Embed ​

To initialize the embed video instance, use this code :

js
//Video embed init
if ($('#my-element').length) {
    Video('#my-element');
}

Counterup ​

This is how to initialize counterup (don't forget that it depends on waypoints) :

js
$('.my-element').counterUp({
    delay: 10,
    time: 1000
});

Chosen ​

This is how to initialize your chosen selects. See the plugin's documentation for all available options.

js
$(".my-element").chosen({
    disable_search_threshold: 6,
    width: '100%'
});

Wallop Slider ​

Wallop slider is very flexible. Look at the plugin's documentation for more details about available options. Below an example of how to initialize a full screen slider (you will also need CSS to build your slider layout) :

js
if ($('.Wallop').length) {
    var wallopEl = document.querySelector('.Wallop');
    var wallop = new Wallop(wallopEl);

    var paginationDots = Array.prototype.slice.call(document.querySelectorAll('.Wallop-dot'));

    //Attach click listener on the dots

    paginationDots.forEach(function (dotEl, index) {
        dotEl.addEventListener('click', function() {
            wallop.goTo(index);
        });
    });

    // Listen to wallop change and update classes

    wallop.on('change', function(event) {
        removeClass(document.querySelector('.Wallop-dot--current'), 'Wallop-dot--current');
        addClass(paginationDots[event.detail.currentItemIndex], 'Wallop-dot--current');
    });



    // Helpers
    function addClass(element, className) {
        if (!element) { return; }
        element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
    }

    function removeClass(element, className) {
        if (!element) { return; }
        element.className = element.className.replace(className, '');
    }

    // To start Autoplay, just call the function below
    // and pass in the number of seconds as interval
    // if you want to start autoplay after a while
    // you can wrap this in a setTimeout(); function
    autoplay(5000);

    // This a a helper function to build a simple
    // auto-play functionality.
    function autoplay(interval) {
        var lastTime = 0;

        function frame(timestamp) {
            var update = timestamp - lastTime >= interval;

            if (update) {
                wallop.next();
                lastTime = timestamp;
            }

            requestAnimationFrame(frame);
        }

        requestAnimationFrame(frame);
    };
}

Scrollreveal ​

Scrollreveal lets you define on scroll animations for your page elements. check the plugin documentation for all available options. Here is an example :

js
// Declaring defaults
window.sr = ScrollReveal();

// Simple reveal
sr.reveal('.is-title-reveal', {
    origin: 'bottom',
    distance: '20px',
    duration: 600,
    delay: 100,
    rotate: { x: 0, y: 0, z: 0 },
    opacity: 0,
    scale: 1,
    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
    container: window.document.documentElement,
    mobile: true,
    reset: false,
    useDelay: 'always',
    viewFactor: 0.2,
});

Autocomplete ​

This plugin let's you create simple and more complex autocomplete. We will see 2 examples here, a basic one and an advanced one with a cutom template.

Basic example:

js
//Basic autocomplete
if ($('#basic-autocpl').length) {
    var options = {
        url: "assets/js/easyAutocomplete/data/persons.json",
        getValue: function(element) {
            return element.name;
        },
        highlightPhrase: false,
        list: {
            maxNumberOfElements: 5,
            showAnimation: {
                type: "fade", //normal|slide|fade
                time: 400,
                callback: function() {}
            },
            match: {
                enabled: true
            }
        },
    };

    $("#basic-autocpl").easyAutocomplete(options);
}

Custom example using a custom template:

js
//Users autocomplete
if ($('#users-autocpl').length) {
    var usersOptions = {
        url: "assets/js/easyAutocomplete/data/persons.json",
        getValue: "name",
        template: {
            type: "custom",
            method: function(value, item) {
                return "<div class=" + 'template-wrapper' + "><img class=" + 'autocpl-avatar' + " src='" + item.pic + "' /><div class=" + 'entry-text' + ">" + value + "<br><span>" + item.email + "</span></div></div> ";
            }
        },
        highlightPhrase: false,
        list: {
            maxNumberOfElements: 3,
            showAnimation: {
                type: "fade", //normal|slide|fade
                time: 400,
                callback: function() {}
            },
            match: {
                enabled: true
            }
        },
    };

    $("#users-autocpl").easyAutocomplete(usersOptions);
}

TIP

Notice that easyAutocomplete gets its data from a json formatted file. Be sure to provide a validated JSON file and the right path to access it.

iziToast ​

This how you initialize a simple toast message. Check the bulkit/assets/js/pages/components-toats.js for more examples :

js
$('#top-left-toast').click(function(){
    iziToast.show({
        title: 'Hello,',
        message: 'Iam a very simple Toast !',
        position: 'topLeft',
    });
})

gmapjs ​

Initialize a google map element :

js
if ($('#my-map').length) {
    $('#my-map').gMap({
        latitude: 40.7143528,
        longitude: -74.0059731,
        maptype: 'ROADMAP',
        zoom: 13,
        markers: [
            {
                latitude: 40.71771,
                longitude:  -74.003245,
                html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;"></h4><div style="align-items:center!important;" class="content content-flex"><div><img style="height:60px;border-radius:100px;" src="assets/images/logos/cssninja.svg"></div><div style="margin-left:20px;"> Iam very happy if you like this template. If you need any support, please feel free to contact us at <strong>hello@cssninja.io</strong></div></div></div>',
                icon: {
                    image: "assets/images/markers/marker-purple.png",
                    iconsize: [56, 82],
                    iconanchor: [32,39]
                }
            }
        ],
        doubleclickzoom: true,
        controls: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false
        }
    });
}

All Rights Reserved

Copyright © 2024 Css Ninja.