/*-----------------------------------------------------------------------------------
Template Name: Asbab eCommerce HTML5 Template.
Template URI: #
Description: Asbab is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
Author: HasTech
Author URI: https://themeforest.net/user/hastech/portfolio
Version: 1.0
-----------------------------------------------------------------------------------*/
/*-------------------------------
[ Table of contents ]
---------------------------------
01. jQuery MeanMenu
02. wow js active
03. Product Masonry (width)
04. Sticky Header
05. ScrollUp
06. Search Bar
07. Shopping Cart Area
08. Filter Area
09. Toogle Menu
10. User Menu
11. Menu
12. Menu Dropdown
13. Overlay Close
14. Testimonial Image Slider As Nav
15. Brand Area
16. Price Slider Active
17. Accordion
18. Ship to another
19. Payment credit card
20 Slider Activations
/*--------------------------------
[ End table content ]
-----------------------------------*/
(function($) {
'use strict';
/*-------------------------------------------
01. jQuery MeanMenu
--------------------------------------------- */
$('.mobile-menu nav').meanmenu({
meanMenuContainer: '.mobile-menu-area',
meanScreenWidth: "991",
meanRevealPosition: "right",
});
/*-------------------------------------------
02. wow js active
--------------------------------------------- */
new WOW().init();
/*-------------------------------------------
03. Product Masonry (width)
--------------------------------------------- */
$('.htc__product__container').imagesLoaded( function() {
// filter items on button click
$('.product__menu').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// init Isotope
var $grid = $('.product__list').isotope({
itemSelector: '.single__pro',
percentPosition: true,
transitionDuration: '0.7s',
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.single__pro',
}
});
});
$('.product__menu button').on('click', function(event) {
$(this).siblings('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
event.preventDefault();
});
/*-------------------------------------------
04. Sticky Header
--------------------------------------------- */
var win = $(window);
var sticky_id = $("#sticky-header-with-topbar");
win.on('scroll',function() {
var scroll = win.scrollTop();
if (scroll < 245) {
sticky_id.removeClass("scroll-header");
}else{
sticky_id.addClass("scroll-header");
}
});
/*--------------------------
05. ScrollUp
---------------------------- */
$.scrollUp({
scrollText: '',
easingType: 'linear',
scrollSpeed: 900,
animation: 'fade'
});
/*------------------------------------
06. Search Bar
--------------------------------------*/
$( '.search__open' ).on( 'click', function () {
$( 'body' ).toggleClass( 'search__box__show__hide' );
return false;
});
$( '.search__close__btn .search__close__btn_icon' ).on( 'click', function () {
$( 'body' ).toggleClass( 'search__box__show__hide' );
return false;
});
/*------------------------------------
07. Shopping Cart Area
--------------------------------------*/
$('.cart__menu').on('click', function(e) {
e.preventDefault();
$('.shopping__cart').addClass('shopping__cart__on');
$('.body__overlay').addClass('is-visible');
});
$('.offsetmenu__close__btn').on('click', function(e) {
e.preventDefault();
$('.shopping__cart').removeClass('shopping__cart__on');
$('.body__overlay').removeClass('is-visible');
});
/*------------------------------------
08. Filter Area
--------------------------------------*/
$('.filter__menu').on('click', function(e) {
e.preventDefault();
$('.filter__wrap').addClass('filter__menu__on');
$('.body__overlay').addClass('is-visible');
});
$('.filter__menu__close__btn').on('click', function(e) {
e.preventDefault();
$('.filter__wrap').removeClass('filter__menu__on');
$('.body__overlay').removeClass('is-visible');
});
/*------------------------------------
09. Toogle Menu
--------------------------------------*/
$('.toggle__menu').on('click', function(e) {
e.preventDefault();
$('.offsetmenu').addClass('offsetmenu__on');
$('.body__overlay').addClass('is-visible');
});
$('.offsetmenu__close__btn').on('click', function(e) {
e.preventDefault();
$('.offsetmenu').removeClass('offsetmenu__on');
$('.body__overlay').removeClass('is-visible');
});
/*------------------------------------
10. User Menu
--------------------------------------*/
$('.user__menu').on('click', function(e) {
e.preventDefault();
$('.user__meta').addClass('user__meta__on');
$('.body__overlay').addClass('is-visible');
});
$('.offsetmenu__close__btn').on('click', function(e) {
e.preventDefault();
$('.user__meta').removeClass('user__meta__on');
$('.body__overlay').removeClass('is-visible');
});
/*------------------------------------
11. Menu
--------------------------------------*/
$('.menu__click').on('click', function(e) {
e.preventDefault();
$('.off__canvars__wrap').addClass('off__canvars__wrap__on');
$('.body__overlay').addClass('is-visible');
$('body').addClass('off__canvars__open');
$(this).hide();
});
$('.menu__close__btn').on('click', function() {
$('.off__canvars__wrap').removeClass('off__canvars__wrap__on');
$('.body__overlay').removeClass('is-visible');
$('body').removeClass('off__canvars__open');
$('.menu__click').show();
});
/*------------------------------------
12. Menu Dropdown
--------------------------------------*/
function offCanvasMenuDropdown(){
$('.off__canvars__dropdown-menu').hide();
$('.off__canvars__dropdown > a').on('click', function(e){
e.preventDefault();
$(this).find('i.zmdi').toggleClass('zmdi-chevron-up');
$(this).siblings('.off__canvars__dropdown-menu').slideToggle();
return false;
});
}
offCanvasMenuDropdown();
/*------------------------------------
13. Overlay Close
--------------------------------------*/
$('.body__overlay').on('click', function() {
$(this).removeClass('is-visible');
$('.offsetmenu').removeClass('offsetmenu__on');
$('.shopping__cart').removeClass('shopping__cart__on');
$('.filter__wrap').removeClass('filter__menu__on');
$('.user__meta').removeClass('user__meta__on');
$('.off__canvars__wrap').removeClass('off__canvars__wrap__on');
$('body').removeClass('off__canvars__open');
$('.menu__click').show();
});
/*---------------------------------------------------
14. Testimonial Image Slider As Nav
---------------------------------------------------*/
$('.ht__testimonial__activation').slick({
slidesToShow: 2,
slidesToScroll: 1,
swipeToSlide: true,
dots: false,
centerMode: true,
focusOnSelect: true,
centerPadding: '10px',
responsive: [
{
breakpoint: 600,
settings: {
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '10px',
}
},
{
breakpoint: 320,
settings: {
autoplay: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: false,
focusOnSelect: false,
}
}
]
});
/*-----------------------------------------------
15. Brand Area
-------------------------------------------------*/
$('.brand__list').owlCarousel({
loop: true,
margin:0,
nav:false,
autoplay: true,
autoplayTimeout: 10000,
items:5,
dots: false,
lazyLoad: true,
responsive: {
0: {
items: 2,
},
767: {
items: 4,
},
991: {
items: 5,
}
}
});
/*-------------------------------
16. Price Slider Active
--------------------------------*/
$("#slider-range").slider({
range: true,
min: 10,
max: 500,
values: [110, 400],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
/*---------------------------------------------------
17. Accordion
---------------------------------------------------*/
function emeAccordion(){
$('.accordion__title')
.siblings('.accordion__title').removeClass('active')
.first().addClass('active');
$('.accordion__body')
.siblings('.accordion__body').slideUp()
.first().slideDown();
$('.accordion').on('click', '.accordion__title', function(){
$(this).addClass('active').siblings('.accordion__title').removeClass('active');
$(this).next('.accordion__body').slideDown().siblings('.accordion__body').slideUp();
});
};
emeAccordion();
/*---------------------------------------------------
18. Ship to another
---------------------------------------------------*/
function shipToAnother(){
var trigger = $('.ship-to-another-trigger'),
container = $('.ship-to-another-content');
trigger.on('click', function(e){
e.preventDefault();
container.slideToggle();
});
};
shipToAnother();
/*---------------------------------------------------
19. Payment credit card
---------------------------------------------------*/
function paymentCreditCard(){
var trigger = $('.paymentinfo-credit-trigger'),
container = $('.paymentinfo-credit-content');
trigger.on('click', function(e){
e.preventDefault();
container.slideToggle();
});
};
paymentCreditCard();
/*-----------------------------------------------
20 Slider Activations
-------------------------------------------------*/
if ($('.slider__activation__wrap').length) {
$('.slider__activation__wrap').owlCarousel({
loop: true,
margin:0,
nav:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
smartSpeed: 1000,
autoplay: false,
navText: [ '', '' ],
autoplayTimeout: 10000,
items:1,
dots: false,
lazyLoad: true,
responsive: {
0: {
items: 1,
},
767: {
items: 1,
},
991: {
items: 1,
}
}
});
}
})(jQuery);