Contents

1. Make count "up" in countdown plugin

2. How to open image by click on slider

3. Add top menu link inside dropdown on mobile devices

4. Make menu dropdown work without JavaScript

5. Manually Show/Hide Preloader using JavaScript

6. Google Map API Warning (NoApiKeys)

7. WordPress Themes FAQ

1. 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>

2. How to open image by click on slider

If you want to open current slider image URL in new window, you just need to add custom script in your website:

jQuery(function ($) {
  $('.nk-slider').on('click', function () {
    var url = $('.nk-slider-current-slide').css('background-image');
    url = url ? url.replace('url(','').replace(')','').replace(/\"/gi, '') : false;
    if (url) {
      window.open(url);
    }
  });
});

3. 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:

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. 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();

6. 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

7. WordPress Themes FAQ

Please, read documentation of your theme and basic WordPress documentation:

FAQ:

1. Install Theme

2. Update Theme

3. Theme is missing the style.css stylesheet

4. How to use WPBakery Page Builder in WordPress 5 (Gutenberg)

5. I can't activate Revolution Slider / Visual Composer (WPBakery Page Builder)

6. Update Revolution Slider / Visual Composer (WPBakery Page Builder) / Advanced Custom Fields PRO

7. Fatal Error… memory exhausted

8. Can't finish Demo Data Import

9. Can't enable Mega Menu