432 lines
12 KiB
JavaScript
432 lines
12 KiB
JavaScript
/*
|
|
Template: Markethon - Digital Marketing Agency Responsive HTML5 Template
|
|
Author: iqonicthemes.in
|
|
Design and Developed by: iqonicthemes.in
|
|
NOTE: This file contains the styling for responsive Template.
|
|
*/
|
|
|
|
/*----------------------------------------------
|
|
Index Of Script
|
|
------------------------------------------------
|
|
|
|
1.Page Loader
|
|
2.Isotope
|
|
3.Masonry
|
|
4.Progress Bar
|
|
5.Pie chart
|
|
6.Mega Menu
|
|
7.Back To Top
|
|
8.Counter
|
|
9.Accordion
|
|
10.Magnific Popup
|
|
11.Wow Animation
|
|
12.Owl Carousel
|
|
1.Countdown
|
|
14.Circle Progressbar
|
|
15.Side Menu
|
|
|
|
------------------------------------------------
|
|
Index Of Script
|
|
----------------------------------------------*/
|
|
|
|
"use strict";
|
|
$(document).ready(function () {
|
|
$(window).on("load", function () {
|
|
/*------------------------
|
|
1 Page Loader
|
|
--------------------------*/
|
|
jQuery("#load").fadeOut();
|
|
jQuery("#loading").delay(0).fadeOut("slow");
|
|
|
|
$(".navbar a").on("click", function (event) {
|
|
if (!$(event.target).closest(".nav-item.dropdown").length) {
|
|
$(".navbar-collapse").collapse("hide");
|
|
}
|
|
});
|
|
|
|
/*------------------------
|
|
2 Isotope
|
|
--------------------------*/
|
|
$(".isotope").isotope({
|
|
itemSelector: ".iq-grid-item",
|
|
});
|
|
|
|
// filter items on button click
|
|
$(".isotope-filters").on("click", "button", function () {
|
|
var filterValue = $(this).attr("data-filter");
|
|
$(".isotope").isotope({
|
|
resizable: true,
|
|
filter: filterValue,
|
|
});
|
|
$(".isotope-filters button").removeClass("active");
|
|
$(this).addClass("active");
|
|
});
|
|
|
|
function sticky_relocate() {
|
|
var window_top = $(window).scrollTop();
|
|
|
|
if ($(".iq-works").length && $(".iq-features").length) {
|
|
var div_top = $(".iq-works").offset().top + 900;
|
|
var div_features = $(".iq-features").offset().top - 155;
|
|
if (window_top > div_top) {
|
|
$(".our-info").addClass("menu-sticky").show();
|
|
if (window_top > div_features) {
|
|
$(".our-info").removeClass("menu-sticky").hide();
|
|
}
|
|
} else {
|
|
$(".our-info").removeClass("menu-sticky").show();
|
|
}
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
$(window).scroll(sticky_relocate);
|
|
sticky_relocate();
|
|
});
|
|
|
|
/*------------------------
|
|
3 Masonry
|
|
--------------------------*/
|
|
|
|
var $msnry = $(".iq-masonry-block .iq-masonry");
|
|
if ($msnry) {
|
|
var $filter = $(".iq-masonry-block .isotope-filters");
|
|
$msnry.isotope({
|
|
percentPosition: true,
|
|
resizable: true,
|
|
itemSelector: ".iq-masonry-block .iq-masonry-item",
|
|
masonry: {
|
|
gutterWidth: 0,
|
|
},
|
|
});
|
|
// bind filter button click
|
|
$filter.on("click", "button", function () {
|
|
var filterValue = $(this).attr("data-filter");
|
|
$msnry.isotope({
|
|
filter: filterValue,
|
|
});
|
|
});
|
|
|
|
$filter.each(function (i, buttonGroup) {
|
|
var $buttonGroup = $(buttonGroup);
|
|
$buttonGroup.on("click", "button", function () {
|
|
$buttonGroup.find(".active").removeClass("active");
|
|
$(this).addClass("active");
|
|
});
|
|
});
|
|
}
|
|
|
|
/*------------------------
|
|
4 Progress Bar
|
|
--------------------------*/
|
|
$(".iq-progress-bar > span").each(function () {
|
|
var $this = $(this);
|
|
var width = $(this).data("percent");
|
|
$this.css({
|
|
transition: "width 2s",
|
|
});
|
|
setTimeout(function () {
|
|
$this.appear(function () {
|
|
$this.css("width", width + "%");
|
|
});
|
|
}, 500);
|
|
});
|
|
/*-----------------
|
|
5 Pie chart
|
|
-----------------*/
|
|
if ($("#chartContainer").length) {
|
|
var chart = new CanvasJS.Chart("chartContainer", {
|
|
theme: "light2",
|
|
animationEnabled: true,
|
|
data: [
|
|
{
|
|
type: "pie",
|
|
indexLabelFontSize: 18,
|
|
radius: 80,
|
|
indexLabel: "{label} - {y}",
|
|
yValueFormatString: '###0.0"%"',
|
|
click: explodePie,
|
|
dataPoints: [
|
|
{
|
|
y: 42,
|
|
label: "Data Analysis",
|
|
},
|
|
{
|
|
y: 21,
|
|
label: "Social Media Marketing",
|
|
},
|
|
{
|
|
y: 24.5,
|
|
label: "Business Analysis",
|
|
},
|
|
{
|
|
y: 9,
|
|
label: "Research And Strategy",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
chart.render();
|
|
|
|
function explodePie(e) {
|
|
for (var i = 0; i < e.dataSeries.dataPoints.length; i++) {
|
|
if (i !== e.dataPointIndex)
|
|
e.dataSeries.dataPoints[i].exploded = false;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/*------------------------
|
|
6 Mega Menu
|
|
--------------------------*/
|
|
$("#menu-1").megaMenu({
|
|
// DESKTOP MODE SETTINGS
|
|
logo_align: "left", // align the logo left or right. options (left) or (right)
|
|
links_align: "left", // align the links left or right. options (left) or (right)
|
|
socialBar_align: "left", // align the socialBar left or right. options (left) or (right)
|
|
searchBar_align: "right", // align the search bar left or right. options (left) or (right)
|
|
trigger: "hover", // show drop down using click or hover. options (hover) or (click)
|
|
effect: "fade", // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
|
|
effect_speed: 400, // drop down show speed in milliseconds
|
|
sibling: true, // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
|
|
outside_click_close: true, // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
|
|
top_fixed: false, // fixed the menu top of the screen. options (true) or (false)
|
|
sticky_header: true, // menu fixed on top when scroll down down. options (true) or (false)
|
|
sticky_header_height: 200, // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
|
|
menu_position: "horizontal", // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
|
|
full_width: true, // make menu full width. options (true) or (false)
|
|
// MOBILE MODE SETTINGS
|
|
mobile_settings: {
|
|
collapse: true, // collapse the menu on click. options (true) or (false)
|
|
sibling: true, // hide the others showing drop downs when click on current drop down. options (true) or (false)
|
|
scrollBar: true, // enable the scroll bar. options (true) or (false)
|
|
scrollBar_height: 400, // scroll bar height in px value. this option works if the scrollBar option true.
|
|
top_fixed: false, // fixed menu top of the screen. options (true) or (false)
|
|
sticky_header: true, // menu fixed on top when scroll down down. options (true) or (false)
|
|
sticky_header_height: 200, // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
|
|
},
|
|
});
|
|
|
|
/*------------------------
|
|
7 Back To Top
|
|
--------------------------*/
|
|
$("#back-to-top").fadeOut();
|
|
$(window).on("scroll", function () {
|
|
if ($(this).scrollTop() > 250) {
|
|
$("#back-to-top").fadeIn(1400);
|
|
} else {
|
|
$("#back-to-top").fadeOut(400);
|
|
}
|
|
});
|
|
// scroll body to 0px on click
|
|
$("#top").on("click", function () {
|
|
$("top").tooltip("hide");
|
|
$("body,html").animate(
|
|
{
|
|
scrollTop: 0,
|
|
},
|
|
800
|
|
);
|
|
return false;
|
|
});
|
|
|
|
/*------------------------
|
|
8 Counter
|
|
--------------------------*/
|
|
$(".counter").counterUp({
|
|
delay: 10,
|
|
time: 1000,
|
|
});
|
|
|
|
/*------------------------
|
|
9 Accordion
|
|
--------------------------*/
|
|
$(".iq-accordion .iq-ad-block .ad-details").hide();
|
|
$(".iq-accordion .iq-ad-block:first")
|
|
.addClass("ad-active")
|
|
.children()
|
|
.slideDown("slow");
|
|
$(".iq-accordion .iq-ad-block").on("click", function () {
|
|
if ($(this).children("div").is(":hidden")) {
|
|
$(".iq-accordion .iq-ad-block")
|
|
.removeClass("ad-active")
|
|
.children("div")
|
|
.slideUp("slow");
|
|
$(this).toggleClass("ad-active").children("div").slideDown("slow");
|
|
}
|
|
});
|
|
|
|
/*------------------------
|
|
10 Magnific Popup
|
|
--------------------------*/
|
|
$(".popup-gallery").magnificPopup({
|
|
delegate: "a.popup-img",
|
|
tLoading: "Loading image #%curr%...",
|
|
type: "image",
|
|
mainClass: "mfp-img-mobile",
|
|
gallery: {
|
|
navigateByImgClick: true,
|
|
enabled: true,
|
|
preload: [0, 1],
|
|
},
|
|
image: {
|
|
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
|
|
},
|
|
});
|
|
|
|
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
|
|
type: "iframe",
|
|
disableOn: 700,
|
|
mainClass: "mfp-fade",
|
|
preloader: false,
|
|
removalDelay: 160,
|
|
fixedContentPos: false,
|
|
});
|
|
|
|
/*------------------------
|
|
11 Wow Animation
|
|
--------------------------*/
|
|
new WOW().init();
|
|
|
|
/*------------------------
|
|
12 Owl Carousel
|
|
--------------------------*/
|
|
$(".owl-carousel").each(function () {
|
|
var $carousel = $(this);
|
|
$carousel.owlCarousel({
|
|
items: $carousel.data("items"),
|
|
loop: $carousel.data("loop"),
|
|
margin: $carousel.data("margin"),
|
|
nav: $carousel.data("nav"),
|
|
dots: $carousel.data("dots"),
|
|
autoplay: $carousel.data("autoplay"),
|
|
autoplayTimeout: $carousel.data("autoplay-timeout"),
|
|
navText: [
|
|
'<i class="ion-arrow-left-c"></i>',
|
|
'<i class="ion-arrow-right-c"></i>',
|
|
],
|
|
responsiveClass: true,
|
|
responsive: {
|
|
// breakpoint from 0 up
|
|
0: {
|
|
items: $carousel.data("items-mobile-sm"),
|
|
},
|
|
// breakpoint from 480 up
|
|
480: {
|
|
items: $carousel.data("items-mobile"),
|
|
},
|
|
// breakpoint from 786 up
|
|
786: {
|
|
items: $carousel.data("items-tab"),
|
|
},
|
|
// breakpoint from 1023 up
|
|
1023: {
|
|
items: $carousel.data("items-laptop"),
|
|
},
|
|
1199: {
|
|
items: $carousel.data("items"),
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
/*------------------------
|
|
13 Countdown
|
|
--------------------------*/
|
|
$("#countdown").countdown({
|
|
date: "12/31/2024 23:59:59",
|
|
day: "Day",
|
|
days: "Days",
|
|
});
|
|
|
|
/*------------------------
|
|
14 Circle Progressbar
|
|
--------------------------*/
|
|
function animateElements() {
|
|
$(".progressbar").each(function () {
|
|
var elementPos = $(this).offset().top;
|
|
var topOfWindow = $(window).scrollTop();
|
|
var percent = $(this).find(".circle").attr("data-percent");
|
|
var percentage = parseInt(percent, 10) / parseInt(100, 10);
|
|
var animate = $(this).data("animate");
|
|
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
|
|
$(this).data("animate", true);
|
|
$(this)
|
|
.find(".circle")
|
|
.circleProgress({
|
|
startAngle: -Math.PI / 2,
|
|
value: percent / 100,
|
|
thickness: 9,
|
|
fill: {
|
|
color: "#1B58B8",
|
|
},
|
|
})
|
|
.stop();
|
|
|
|
$(this)
|
|
.find(".circle.purple")
|
|
.circleProgress({
|
|
fill: {
|
|
color: "#6934cb",
|
|
},
|
|
});
|
|
$(this)
|
|
.find(".circle.light-purple")
|
|
.circleProgress({
|
|
fill: {
|
|
color: "#7c60d5",
|
|
},
|
|
});
|
|
$(this)
|
|
.find(".circle.green")
|
|
.circleProgress({
|
|
fill: {
|
|
color: "#33e2a0",
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Show animated elements
|
|
animateElements();
|
|
$(window).scroll(animateElements);
|
|
|
|
/*------------------------
|
|
About menu
|
|
--------------------------*/
|
|
|
|
$(document).ready(function () {
|
|
$(".our-info ul.about-us li a").on("click", function () {
|
|
var id = $(this).attr("href");
|
|
//alert(id);
|
|
$(id).css({
|
|
"padding-top": "250px",
|
|
});
|
|
$(".our-info ul.about-us li a.active").removeClass("active");
|
|
$(this).addClass("active");
|
|
});
|
|
});
|
|
|
|
/*------------------------
|
|
15 Side Menu
|
|
--------------------------*/
|
|
|
|
$(function () {
|
|
$("body").addClass("js");
|
|
|
|
var $hamburger = $(".hamburger"),
|
|
$nav = $("#site-nav"),
|
|
$masthead = $("#masthead");
|
|
|
|
$hamburger.click(function () {
|
|
$(this).toggleClass("is-active");
|
|
$nav.toggleClass("is-active");
|
|
$masthead.toggleClass("is-active");
|
|
return false;
|
|
});
|
|
});
|
|
});
|