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:
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);
}
});
});
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
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>
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();
Please, read documentation of your theme and basic WordPress documentation:
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>