Godlike - HTML

Contents

1. Manually Show/Hide Preloader using JavaScript

2. Add top menu link inside dropdown on mobile devices

3. Make count "up" in countdown plugin

4. Make menu dropdown work without JavaScript

5. Google Map API Warning (NoApiKeys)

1. Manually Show/Hide Preloader using JavaScript

To show preloader you need to make some custom animation. This one:

function openPreloader () {
   Godlike.openPreloader();
   var $content = jQuery('.nk-preloader').find('.nk-preloader-content, .nk-preloader-skip');
   TweenMax.to($content, 0.3, {
       y: '0px',
       opacity: 1,
       display: 'block',
       force3D: true
   });
}
// run
openPreloader();

To hide preloader just run default Godlike function:

// run
Godlike.closePreloader();

2. Add top menu link inside dropdown on mobile devices

Sometimes you may need to access your top menu link on your mobile devices, but in our themes this work only like a dropdown toggler. This code may help you:

jQuery(function ($) {
    $('#nk-nav-mobile .dropdown').each(function () {
        var $this = $(this);
        var $item = $this.prev('a');
        if ($item.length) {
            $this.children('li:not(.bropdown-back):eq(0)').before($('<li>').append($item.clone()));
        }
    });
});

Menu items will be added here:

3. Make count "up" in countdown plugin

Sometimes you need to show countdown for the past event, but with Godlike it is not possible. To make it working, you need to add js extension.

Create a file assets/js/godlike-countdown-extend.js and insert this code inside it:

Godlike.initPluginCountdown = function () {
    if(typeof $.fn.countdown === 'undefined' || typeof moment === 'undefined' || typeof moment.tz === 'undefined') {
        return;
    }
    const self = this;
    $('.nk-countdown').each(function () {
        let tz = $(this).attr('data-timezone');
        let end = $(this).attr('data-end');
            end = moment.tz(end, tz).toDate();
        $(this).countdown(end, {
            elapse: true
        }).on('update.countdown', function(event) {
            $(this).html(
                event.strftime(self.options.templates.countdown)
            );
        });
    });
};

Then, you need to add this extension after main godlike script in HTML files:

<!-- GODLIKE -->
<script src="assets/js/godlike.min.js"></script>
<script src="assets/js/godlike-countdown-extend.js"></script>
<script src="assets/js/godlike-init.js"></script>
<!-- END: Scripts -->

If you make it properly, you will be able to insert this countdown on the page and it will work:

<div class="nk-countdown" data-end="2016-11-26 08:20" data-timezone="EST"></div>

4. Make menu dropdown work without JavaScript

The most of functionality in our templates and themes made by using JavaScript. But sometimes you need to disable it in your browser and menu dropdowns will not work. The solution is simple - just add these styles in noscript section:

<noscript>
    <style type="text/css">
        .nk-navbar .nk-nav .nk-drop-item:hover > .dropdown {
            display: block;
            opacity: 1;
        }
    </style>
</noscript>

5. Google Map API Warning (NoApiKeys)

If you want to use Google Maps, you should get API key.

In template HTML files you should find google maps api js file. Example:

<script src="https://maps.googleapis.com/maps/api/js"></script>;

And add to this address your API key. Example:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

How to generate API key see here - https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key