How can i stop videos when i go to next slide

How can i stop videos when i go to next slide - javascript

website is: ortakbilinc.com You can see the slider on homepage. When i click to next slide video continues to playing. How can i fix it. I'm trying everything but i couldnt handle.
website is: ortakbilinc.com You can see the slider on homepage. When i click to next slide video continues to playing. How can i fix it. I'm trying everything but i couldnt handle.
Feature Slider
-------------------------------------------------*/
if ($('.feature-slider').length) {
$('.feature-slider').each(function() {
var t = $(this);
if (!t.hasClass('gallery-post-slider')) {
var animation = t.data('sanimation');
var speed = t.data('speed');
var timeout = t.data('timeout');
var easing = t.data('easing');
var rndn = t.data('rndn');
var rtl = false;
var autoplay = t.data('autoplay');
var items = t.data('items');
var animation_new = t.data('animation_new');
var animation_in = t.data('animation_in');
var animation_out = t.data('animation_out');
var margin = 10;
var auto_height = 0;
var thumbs_event = t.data('thumbs_event');
if(typeof thumbs_event === 'undefined'){
thumbs_event = 'click';
}
if (t.hasClass('no_spaces')) {
margin = 5;
auto_height = 1;
}
t.find('.fs-image-nav .fs-thumb').each(function(i) {
$(this).addClass( 'item'+i );
if (t.hasClass('old-style')) {
$(this).click(function() {
t.find('.fslides').trigger( 'slideTo', [i, 0, true] );
return false;
});
}
});
t.find('.fs-image-nav .fs-thumb.item0').addClass( 'active' );
var carou_items = 6;
if ($(window).width() < 768) {
carou_items = 5;
}
if ($(window).width() < 568) {
carou_items = 4;
}
if ($(window).width() < 480 ) {
carou_items = 2;
}
if ($('body').hasClass('rtl')) {
rtl = true;
}
if (!t.hasClass('old-style')) {
var owl = t.find('.fslides');
var slides_count = owl.children('.fslide').length;
if (slides_count == 1) {
t.addClass('fs-with-one-slide');
}
if (slides_count > 1) {
owl.owlCarousel({
items: 1,
baseClass: 'mom-carousel',
rtl: rtl,
autoplay:autoplay,
autoplayTimeout:timeout,
autoplayHoverPause : false,
loop: true,
animateOut: animation_out,
animateIn: animation_in,
smartSpeed:1000,
//autoHeight: true,
});
t.find('.fslides').imagesLoaded( function() {
t.find('.fs-image-nav .fs-thumbs').owlCarousel({
items: items,
baseClass: 'mom-carousel',
rtl: rtl,
loop: true,
margin : margin,
});
//var thumb_height = t.find('.fs-image-nav .fs-thumbs .fs-thumb').eq(0).css('height');
//t.find('.fs-image-nav .fs-thumbs').css('max-height', thumb_height);
owl.on('changed.owl.carousel', function(event) {
var pos = $(event.target).find(".fslide").eq(event.item.index).data('i');
//console.log(pos);
$('.fc-nav-'+rndn+' .fs-thumb').removeClass( 'active' );
$('.fc-nav-'+rndn+' .fs-thumb.item'+pos).addClass( 'active' );
var page = Math.floor( pos / items );
t.find('.fs-image-nav .fs-thumbs').trigger( 'to.owl.carousel', page );
});
t.find('.fs-image-nav .fs-thumb').on(thumbs_event, function() {
var i = $(this).data('i');
owl.trigger('to.owl.carousel', [i]);
});
t.find('.fs-image-nav .fs-prev, .fsd-prev').click(function() {
owl.trigger('prev.owl.carousel');
});
t.find('.fs-image-nav .fs-next, .fsd-next').click(function() {
owl.trigger('next.owl.carousel');
});
});
}
} else {
t.find('.fslides').carouFredSel({
circular: true,
responsive: true,
swipe: {
onTouch: true,
fx : 'scroll'
},
items: 1,
auto: {
play: autoplay,
duration: speed,
timeoutDuration: timeout,
},
prev: '.fc-nav-'+rndn+' .fs-prev, .fs-dnav-'+rndn+' span.fsd-prev',
next: '.fc-nav-'+rndn+' .fs-next, .fs-dnav-'+rndn+' span.fsd-next',
pagination: '.fs-nav-'+rndn,
scroll: {
fx: animation,
duration : speed,
easing : easing,
pauseOnHover : true,
onBefore: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('.fc-nav-'+rndn+' div').removeClass( 'active' );
$('.fc-nav-'+rndn+' div.item'+pos).addClass( 'active' );
var page = Math.floor( pos / carou_items );
$('.fc-nav-'+rndn+' .fs-thumbs').trigger( 'slideToPage', page );
},
onAfter: function() {
}
}
});
t.find('.fs-image-nav .fs-thumbs').carouFredSel({
auto: false,
circular:true,
responsive: true,
swipe: {
onTouch: true
},
items: carou_items,
scroll: {
items:carou_items,
}
});
}
} //if not the post gallery
});

Related

Uncaught TypeError: $(...).appear is not a function

Can someone help me , I am getting script error in browser console. I upgrade jquery but still it is same . Error reads like....
Uncaught TypeError: $(...).appear is not a function
<anonymous> http://localhost/frontdesign/dropdown/js/script.js:38
jQuery 13
e
t
setTimeout handler*l/<
c
fireWith
fire
c
fireWith
ready
B
EventListener.handleEvent*
<anonymous>
<anonymous>
Line number 38 part of script is below
$('.skill-shortcode').appear(function() {
$('.progress').each(function(){
$('.progress-bar').css('width', function(){
return ($(this).attr('data-percentage')+'%')});
});
and complete scritp is below
/* ----------------- Start JS Document ----------------- */
// Page Loader
// $(window).load(function () {
// "use strict";
// $('#loader').fadeOut();
// });
$(window).on('load', function(){
"use strict";
$('#loader').fadeOut();
});
jQuery(document).ready(function ($) {
"use strict";
console.log( 'working!' )
//// Hidder Header
var headerEle = function () {
var $headerHeight = $('header').height();
$('.hidden-header').css({ 'height' : $headerHeight + "px" });
};
$(window).on('load', function() {
headerEle();
});
$(window).resize(function () {
headerEle();
});
/*---------------------------------------------------*/
/* Progress Bar
/*---------------------------------------------------*/
$('.skill-shortcode').appear(function() {
$('.progress').each(function(){
$('.progress-bar').css('width', function(){
return ($(this).attr('data-percentage')+'%')});
});
},{accY: -100});
/*--------------------------------------------------*/
/* Counter
/*--------------------------------------------------*/
$('.timer').countTo();
$('.counter-item').appear(function() {
$('.timer').countTo();
},{
accY: -100
});
/*----------------------------------------------------*/
/* Nice-Scroll
/*----------------------------------------------------*/
$("html").niceScroll({
scrollspeed: 100,
mousescrollstep: 38,
cursorwidth: 5,
cursorborder: 0,
cursorcolor: '#333',
autohidemode: true,
zindex: 999999999,
horizrailenabled: false,
cursorborderradius: 0,
});
/*----------------------------------------------------*/
/* Nav Menu & Search
/*----------------------------------------------------*/
$(".nav > li:has(ul)").addClass("drop");
$(".nav > li.drop > ul").addClass("dropdown");
$(".nav > li.drop > ul.dropdown ul").addClass("sup-dropdown");
$('.show-search').click(function() {
$('.search-form').fadeIn(300);
$('.search-form input').focus();
});
$('.search-form input').blur(function() {
$('.search-form').fadeOut(300);
});
/*----------------------------------------------------*/
/* Back Top Link
/*----------------------------------------------------*/
var offset = 200;
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(400);
} else {
$('.back-to-top').fadeOut(400);
}
});
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 600);
return false;
})
/*----------------------------------------------------*/
/* Sliders & Carousel
/*----------------------------------------------------*/
////------- Touch Slider
var time = 4.4,
$progressBar,
$bar,
$elem,
isPause,
tick,
percentTime;
$('.touch-slider').each(function(){
var owl = jQuery(this),
sliderNav = $(this).attr('data-slider-navigation'),
sliderPag = $(this).attr('data-slider-pagination'),
sliderProgressBar = $(this).attr('data-slider-progress-bar');
if ( sliderNav == 'false' || sliderNav == '0' ) {
var returnSliderNav = false
}else {
var returnSliderNav = true
}
if ( sliderPag == 'true' || sliderPag == '1' ) {
var returnSliderPag = true
}else {
var returnSliderPag = false
}
if ( sliderProgressBar == 'true' || sliderProgressBar == '1' ) {
var returnSliderProgressBar = progressBar
var returnAutoPlay = false
}else {
var returnSliderProgressBar = false
var returnAutoPlay = true
}
owl.owlCarousel({
navigation : returnSliderNav,
pagination: returnSliderPag,
slideSpeed : 400,
paginationSpeed : 400,
lazyLoad : true,
singleItem: true,
autoHeight : true,
autoPlay: returnAutoPlay,
stopOnHover: returnAutoPlay,
transitionStyle : "fade",
afterInit : returnSliderProgressBar,
startDragging : pauseOnDragging
});
});
function progressBar(elem){
$elem = elem;
buildProgressBar();
start();
}
function buildProgressBar(){
$progressBar = $("<div>",{
id:"progressBar"
});
$bar = $("<div>",{
id:"bar"
});
$progressBar.append($bar).prependTo($elem);
}
function pauseOnDragging(){
isPause = true;
}
////------- Projects Carousel
$(".projects-carousel").owlCarousel({
navigation : true,
pagination: false,
slideSpeed : 400,
stopOnHover: true,
autoPlay: 3000,
items : 4,
itemsDesktopSmall : [900,3],
itemsTablet: [600,2],
itemsMobile : [479, 1]
});
////------- Testimonials Carousel
$(".testimonials-carousel").owlCarousel({
navigation : true,
pagination: false,
slideSpeed : 2500,
stopOnHover: true,
autoPlay: 3000,
singleItem:true,
autoHeight : true,
transitionStyle : "fade"
});
////------- Custom Carousel
$('.custom-carousel').each(function(){
var owl = jQuery(this),
itemsNum = $(this).attr('data-appeared-items'),
sliderNavigation = $(this).attr('data-navigation');
if ( sliderNavigation == 'false' || sliderNavigation == '0' ) {
var returnSliderNavigation = false
}else {
var returnSliderNavigation = true
}
if( itemsNum == 1) {
var deskitemsNum = 1;
var desksmallitemsNum = 1;
var tabletitemsNum = 1;
}
else if (itemsNum >= 2 && itemsNum < 4) {
var deskitemsNum = itemsNum;
var desksmallitemsNum = itemsNum - 1;
var tabletitemsNum = itemsNum - 1;
}
else if (itemsNum >= 4 && itemsNum < 8) {
var deskitemsNum = itemsNum -1;
var desksmallitemsNum = itemsNum - 2;
var tabletitemsNum = itemsNum - 3;
}
else {
var deskitemsNum = itemsNum -3;
var desksmallitemsNum = itemsNum - 6;
var tabletitemsNum = itemsNum - 8;
}
owl.owlCarousel({
slideSpeed : 300,
stopOnHover: true,
autoPlay: false,
navigation : returnSliderNavigation,
pagination: false,
lazyLoad : true,
items : itemsNum,
itemsDesktop : [1000,deskitemsNum],
itemsDesktopSmall : [900,desksmallitemsNum],
itemsTablet: [600,tabletitemsNum],
itemsMobile : false,
transitionStyle : "goDown",
});
});
////------- Testimonials Carousel
$(".fullwidth-projects-carousel").owlCarousel({
navigation : false,
pagination: false,
slideSpeed : 400,
stopOnHover: true,
autoPlay: 3000,
items : 5,
itemsDesktopSmall : [900,3],
itemsTablet: [600,2],
itemsMobile : [479, 1]
});
/*----------------------------------------------------*/
/* Tabs
/*----------------------------------------------------*/
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
/*----------------------------------------------------*/
/* Css3 Transition
/*----------------------------------------------------*/
$('*').each(function(){
if($(this).attr('data-animation')) {
var $animationName = $(this).attr('data-animation'),
$animationDelay = "delay-"+$(this).attr('data-animation-delay');
$(this).appear(function() {
$(this).addClass('animated').addClass($animationName);
$(this).addClass('animated').addClass($animationDelay);
});
}
});
/*----------------------------------------------------*/
/* Pie Charts
/*----------------------------------------------------*/
var pieChartClass = 'pieChart',
pieChartLoadedClass = 'pie-chart-loaded';
function initPieCharts() {
var chart = $('.' + pieChartClass);
chart.each(function() {
$(this).appear(function() {
var $this = $(this),
chartBarColor = ($this.data('bar-color')) ? $this.data('bar-color') : "#F54F36",
chartBarWidth = ($this.data('bar-width')) ? ($this.data('bar-width')) : 150
if( !$this.hasClass(pieChartLoadedClass) ) {
$this.easyPieChart({
animate: 2000,
size: chartBarWidth,
lineWidth: 2,
scaleColor: false,
trackColor: "#eee",
barColor: chartBarColor,
}).addClass(pieChartLoadedClass);
}
});
});
}
initPieCharts();
/*----------------------------------------------------*/
/* Animation Progress Bars
/*----------------------------------------------------*/
$("[data-progress-animation]").each(function() {
var $this = $(this);
$this.appear(function() {
var delay = ($this.attr("data-appear-animation-delay") ? $this.attr("data-appear-animation-delay") : 1);
if(delay > 1) $this.css("animation-delay", delay + "ms");
setTimeout(function() { $this.animate({width: $this.attr("data-progress-animation")}, 800);}, delay);
}, {accX: 0, accY: -50});
});
/*----------------------------------------------------*/
/* Milestone Counter
/*----------------------------------------------------*/
jQuery('.milestone-block').each(function() {
jQuery(this).appear(function() {
var $endNum = parseInt(jQuery(this).find('.milestone-number').text());
jQuery(this).find('.milestone-number').countTo({
from: 0,
to: $endNum,
speed: 4000,
refreshInterval: 60,
});
},{accX: 0, accY: 0});
});
/*----------------------------------------------------*/
/* Nivo Lightbox
/*----------------------------------------------------*/
$('.lightbox').nivoLightbox({
effect: 'fadeScale',
keyboardNav: true,
errorMessage: 'The requested content cannot be loaded. Please try again later.'
});
/*----------------------------------------------------*/
/* Change Slider Nav Icons
/*----------------------------------------------------*/
$('.touch-slider').find('.owl-prev').html('<i class="fa fa-angle-left"></i>');
$('.touch-slider').find('.owl-next').html('<i class="fa fa-angle-right"></i>');
$('.touch-carousel, .testimonials-carousel').find('.owl-prev').html('<i class="fa fa-angle-left"></i>');
$('.touch-carousel, .testimonials-carousel').find('.owl-next').html('<i class="fa fa-angle-right"></i>');
$('.read-more').append('<i class="fa fa-angle-right"></i>');
/*----------------------------------------------------*/
/* Tooltips & Fit Vids & Parallax & Text Animations
/*----------------------------------------------------*/
$("body").fitVids();
$('.itl-tooltip').tooltip();
$('.bg-parallax').each(function() {
$(this).parallax("30%", 0.2);
});
$('.tlt').textillate({
loop: true,
in: {
effect: 'fadeInUp',
delayScale: 2,
delay: 50,
sync: false,
shuffle: false,
reverse: true,
},
out: {
effect: 'fadeOutUp',
delayScale: 2,
delay: 50,
sync: false,
shuffle: false,
reverse: true,
},
});
/*----------------------------------------------------*/
/* Sticky Header
/*----------------------------------------------------*/
(function() {
var docElem = document.documentElement,
didScroll = false,
changeHeaderOn = 100;
document.querySelector( 'header' );
function init() {
window.addEventListener( 'scroll', function() {
if( !didScroll ) {
didScroll = true;
setTimeout( scrollPage, 250 );
}
}, false );
}
function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
$('.top-bar').slideUp(300);
$("header").addClass("fixed-header");
$('.navbar-brand').css({ 'padding-top' : 19 + "px", 'padding-bottom' : 19 + "px" });
if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
}else{
$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 20 + "px", 'padding-bottom' : 20 + "px" })
$('.search-side').css({ 'margin-top' : -7 + "px" });
};
}
else {
$('.top-bar').slideDown(300);
$("header").removeClass("fixed-header");
$('.navbar-brand').css({ 'padding-top' : 27 + "px", 'padding-bottom' : 27 + "px" });
if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
}else{
$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })
$('.search-side').css({ 'margin-top' : 0 + "px" });
};
}
didScroll = false;
}
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
init();
})();
});
/*----------------------------------------------------*/
/* Portfolio Isotope
/*----------------------------------------------------*/
jQuery(window).on('load', function(){
var $container = $('#portfolio');
$container.isotope({
layoutMode : 'masonry',
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('.portfolio-filter ul a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('.portfolio-filter ul'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
if ( $this.hasClass('selected') ) { return false; }
var $optionSet = $this.parents('.portfolio-filter ul');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
/* ----------------- End JS Document ----------------- */
// Styles Switcher JS
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
$(document).ready(function(){
// Styles Switcher
$(document).ready(function(){
$('.open-switcher').click(function(){
if($(this).hasClass('show-switcher')) {
$('.switcher-box').css({'left': 0});
$('.open-switcher').removeClass('show-switcher');
$('.open-switcher').addClass('hide-switcher');
}else if(jQuery(this).hasClass('hide-switcher')) {
$('.switcher-box').css({'left': '-212px'});
$('.open-switcher').removeClass('hide-switcher');
$('.open-switcher').addClass('show-switcher');
}
});
});
//Top Bar Switcher
$(".topbar-style").change(function(){
if( $(this).val() == 1){
$(".top-bar").removeClass("dark-bar"),
$(".top-bar").removeClass("color-bar"),
$(window).resize();
} else if( $(this).val() == 2){
$(".top-bar").removeClass("color-bar"),
$(".top-bar").addClass("dark-bar"),
$(window).resize();
} else if( $(this).val() == 3){
$(".top-bar").removeClass("dark-bar"),
$(".top-bar").addClass("color-bar"),
$(window).resize();
}
});
//Layout Switcher
$(".layout-style").change(function(){
if( $(this).val() == 1){
$("#container").removeClass("boxed-page"),
$(window).resize();
} else{
$("#container").addClass("boxed-page"),
$(window).resize();
}
});
//Background Switcher
$('.switcher-box .bg-list li a').click(function() {
var current = $('.switcher-box select[id=layout-style]').find('option:selected').val();
if(current == '2') {
var bg = $(this).css("backgroundImage");
$("body").css("backgroundImage",bg);
} else {
alert('Please select boxed layout');
}
});
});
/**
* Slick Nav
*/
$('.wpb-mobile-menu').slicknav({
prependTo: '.navbar-header',
parentTag: 'margo',
allowParentLinks: true,
duplicate: false,
label: '',
closedSymbol: '<i class="fa fa-angle-right"></i>',
openedSymbol: '<i class="fa fa-angle-down"></i>',
});

.appear() is not a standard JQuery function, so you will need to also include the correct plugin/script after the JQuery lib file inclusion.

How can I make my JQuery run again when using goBack() in React

I have react app using Switch of react-router-dom. When people click they can see the profile of a person in full, but I want a goBack button, so I did this.
const onClick = () => {
return history.goBack();
}
The problem is, when I go back to the last page, the jQuery libraries I'm using don't work, and even some code I'm using in useEffect. I'm using forceRefresh in my Router so every time I go to another page in the Switch I can see the animations an load the actions, is not the best solution but has been working so far.
EDIT:
I'm adding the jQuery file, maybe this helps. This file is called in index.html of the public folder
<script src="%PUBLIC_URL%/assets/js/custom.js" async defer></script>
Code:
(function ($) {
'use strict';
$(document).ready(function () {
$(function () {
function mmenuInit() {
var wi = $(window).width();
if (wi <= '1099') {
$('.mmenu-init').remove();
$('#navigation')
.clone()
.addClass('mmenu-init')
.insertBefore('#navigation')
.removeAttr('id')
.removeClass('style-1 style-2')
.find('ul, div')
.removeClass(
'style-1 style-2 mega-menu mega-menu-content mega-menu-section'
)
.removeAttr('id');
$('.mmenu-init').find('ul').addClass('mm-listview');
$('.mmenu-init').find('.mobile-styles .mm-listview').unwrap();
$('.mmenu-init').mmenu(
{
counters: true,
},
{
// configuration
offCanvas: {
pageNodetype: '#wrapper',
},
}
);
var mmenuAPI = $('.mmenu-init').data('mmenu');
var $icon = $('.mmenu-trigger .hamburger');
$(document).on('click', '.mmenu-trigger', function () {
mmenuAPI.open();
});
}
$('.mm-next').addClass('mm-fullsubopen');
}
mmenuInit();
$(window).resize(function () {
mmenuInit();
});
});
$(window).on('load resize', function () {
var transparentHeaderHeight = $('.transparent-header').outerHeight();
$('.transparent-header-spacer').css({
height: transparentHeaderHeight,
});
});
$('.ripple-effect, .ripple-effect-dark').on('click', function (e) {
var rippleDiv = $('<span class="ripple-overlay">'),
rippleOffset = $(this).offset(),
rippleY = e.pageY - rippleOffset.top,
rippleX = e.pageX - rippleOffset.left;
rippleDiv
.css({
top: rippleY - rippleDiv.height() / 2,
left: rippleX - rippleDiv.width() / 2,
// background: $(this).data("ripple-color");
})
.appendTo($(this));
window.setTimeout(function () {
rippleDiv.remove();
}, 800);
});
$('.switch, .radio').each(function () {
var intElem = $(this);
intElem.on('click', function () {
intElem.addClass('interactive-effect');
setTimeout(function () {
intElem.removeClass('interactive-effect');
}, 400);
});
});
$(window).on('load', function () {
$('.button.button-sliding-icon')
.not('.task-listing .button.button-sliding-icon')
.each(function () {
var buttonWidth = $(this).outerWidth() + 30;
$(this).css('width', buttonWidth);
});
});
$('.bookmark-icon').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('bookmarked');
});
$('.bookmark-button').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('bookmarked');
});
$('a.close')
.removeAttr('href')
.on('click', function () {
function slideFade(elem) {
var fadeOut = { opacity: 0, transition: 'opacity 0.5s' };
elem.css(fadeOut).slideUp();
}
slideFade($(this).parent());
});
// Closing function
function close_user_dropdown() {
$('.header-notifications').removeClass('active');
}
// Closes notification dropdown on click outside the conatainer
var mouse_is_inside = false;
$('.header-notifications').on('mouseenter', function () {
mouse_is_inside = true;
});
$('.header-notifications').on('mouseleave', function () {
mouse_is_inside = false;
});
$('body').mouseup(function () {
if (!mouse_is_inside) close_user_dropdown();
});
// Close with ESC
$(document).keyup(function (e) {
if (e.keyCode == 27) {
close_user_dropdown();
}
});
if ($('.status-switch label.user-invisible').hasClass('current-status')) {
$('.status-indicator').addClass('right');
}
$('.status-switch label.user-invisible').on('click', function () {
$('.status-indicator').addClass('right');
$('.status-switch label').removeClass('current-status');
$('.user-invisible').addClass('current-status');
});
$('.status-switch label.user-online').on('click', function () {
$('.status-indicator').removeClass('right');
$('.status-switch label').removeClass('current-status');
$('.user-online').addClass('current-status');
});
// Wrapper Height (window height - header height)
function wrapperHeight() {
var headerHeight = $('#header-container').outerHeight();
var windowHeight = $(window).outerHeight() - headerHeight;
$(
'.full-page-content-container, .dashboard-content-container, .dashboard-sidebar-inner, .dashboard-container, .full-page-container'
).css({ height: windowHeight });
$('.dashboard-content-inner').css({ 'min-height': windowHeight });
}
// Enabling Scrollbar
function fullPageScrollbar() {
$('.full-page-sidebar-inner, .dashboard-sidebar-inner').each(function () {
var headerHeight = $('#header-container').outerHeight();
var windowHeight = $(window).outerHeight() - headerHeight;
var sidebarContainerHeight = $(this)
.find('.sidebar-container, .dashboard-nav-container')
.outerHeight();
// Enables scrollbar if sidebar is higher than wrapper
if (sidebarContainerHeight > windowHeight) {
$(this).css({ height: windowHeight });
} else {
$(this).find('.simplebar-track').hide();
}
});
}
// Init
$(window).on('load resize', function () {
wrapperHeight();
fullPageScrollbar();
});
wrapperHeight();
fullPageScrollbar();
// Sliding Sidebar
$('.enable-filters-button').on('click', function () {
$('.full-page-sidebar').toggleClass('enabled-sidebar');
$(this).toggleClass('active');
$('.filter-button-tooltip').removeClass('tooltip-visible');
});
/* Enable Filters Button Tooltip */
$(window).on('load', function () {
$('.filter-button-tooltip')
.css({
left: $('.enable-filters-button').outerWidth() + 48,
})
.addClass('tooltip-visible');
});
// Avatar Switcher
function avatarSwitcher() {
var readURL = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.profile-pic').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
};
$('.file-upload').on('change', function () {
readURL(this);
});
$('.upload-button').on('click', function () {
$('.file-upload').click();
});
}
avatarSwitcher();
// Dashboard Nav Submenus
$('.dashboard-nav ul li a').on('click', function (e) {
if ($(this).closest('li').children('ul').length) {
if ($(this).closest('li').is('.active-submenu')) {
$('.dashboard-nav ul li').removeClass('active-submenu');
} else {
$('.dashboard-nav ul li').removeClass('active-submenu');
$(this).parent('li').addClass('active-submenu');
}
e.preventDefault();
}
});
// Responsive Dashbaord Nav Trigger
$('.dashboard-responsive-nav-trigger').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('active');
var dashboardNavContainer = $('body').find('.dashboard-nav');
if ($(this).hasClass('active')) {
$(dashboardNavContainer).addClass('active');
} else {
$(dashboardNavContainer).removeClass('active');
}
$('.dashboard-responsive-nav-trigger .hamburger').toggleClass(
'is-active'
);
});
// Fun Facts
function funFacts() {
/*jslint bitwise: true */
function hexToRgbA(hex) {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('');
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
return (
'rgba(' +
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') +
',0.07)'
);
}
}
$('.fun-fact').each(function () {
var factColor = $(this).attr('data-fun-fact-color');
if (factColor !== undefined) {
$(this)
.find('.fun-fact-icon')
.css('background-color', hexToRgbA(factColor));
$(this).find('i').css('color', factColor);
}
});
}
funFacts();
// Notes & Messages Scrollbar
$(window).on('load resize', function () {
var winwidth = $(window).width();
if (winwidth > 1199) {
// Notes
$('.row').each(function () {
var mbh = $(this).find('.main-box-in-row').outerHeight();
var cbh = $(this).find('.child-box-in-row').outerHeight();
if (mbh < cbh) {
var headerBoxHeight = $(this)
.find('.child-box-in-row .headline')
.outerHeight();
var mainBoxHeight =
$(this).find('.main-box-in-row').outerHeight() -
headerBoxHeight +
39;
$(this)
.find('.child-box-in-row .content')
.wrap(
'<div class="dashboard-box-scrollbar" style="max-height: ' +
mainBoxHeight +
'px" data-simplebar></div>'
);
}
});
// Messages Sidebar
// var messagesList = $(".messages-inbox").outerHeight();
// var messageWrap = $(".message-content").outerHeight();
// if ( messagesList > messagesWrap) {
// $(messagesList).css({
// 'max-height': messageWrap,
// });
// }
}
});
// Mobile Adjustment for Single Button Icon in Dashboard Box
$('.buttons-to-right').each(function () {
var btr = $(this).width();
if (btr < 36) {
$(this).addClass('single-right-button');
}
});
// Small Footer Adjustment
$(window).on('load resize', function () {
var smallFooterHeight = $('.small-footer').outerHeight();
$('.dashboard-footer-spacer').css({
'padding-top': smallFooterHeight + 45,
});
});
// Auto Resizing Message Input Field
/* global jQuery */
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el)
.css('height', 'auto')
.css('height', el.scrollHeight + offset);
};
jQuery(this)
.on('keyup input', function () {
resizeTextarea(this);
})
.removeAttr('data-autoresize');
});
function userMenuScrollbar() {
$('.header-notifications-scroll').each(function () {
var scrollContainerList = $(this).find('ul');
var itemsCount = scrollContainerList.children('li').length;
var notificationItems;
// Determines how many items are displayed based on items height
/* jshint shadow:true */
if (scrollContainerList.children('li').outerHeight() > 140) {
var notificationItems = 2;
} else {
var notificationItems = 3;
}
// Enables scrollbar if more than 2 items
if (itemsCount > notificationItems) {
var listHeight = 0;
$(scrollContainerList)
.find('li:lt(' + notificationItems + ')')
.each(function () {
listHeight += $(this).height();
});
$(this).css({ height: listHeight });
} else {
$(this).css({ height: 'auto' });
$(this).find('.simplebar-track').hide();
}
});
}
// Init
userMenuScrollbar();
/* global tippy */
tippy('[data-tippy-placement]', {
delay: 100,
arrow: true,
arrowType: 'sharp',
size: 'regular',
duration: 200,
// 'shift-toward', 'fade', 'scale', 'perspective'
animation: 'shift-away',
animateFill: true,
theme: 'dark',
// How far the tooltip is from its reference element in pixels
distance: 10,
});
var accordion = (function () {
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false,
};
return {
// pass configurable object literal
init: function ($settings) {
$accordion_header.on('click', function () {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if (settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function ($this) {
if (
settings.oneOpen &&
$this[0] !=
$this
.closest('.js-accordion')
.find('> .js-accordion-item.active > .js-accordion-header')[0]
) {
$this
.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp();
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
},
};
})();
$(document).ready(function () {
accordion.init({ speed: 300, oneOpen: true });
});
$(window).on('load resize', function () {
if ($('.tabs')[0]) {
$('.tabs').each(function () {
var thisTab = $(this);
// Intial Border Position
var activePos = thisTab.find('.tabs-header .active').position();
function changePos() {
// Update Position
activePos = thisTab.find('.tabs-header .active').position();
// Change Position & Width
thisTab
.find('.tab-hover')
.stop()
.css({
left: activePos.left,
width: thisTab.find('.tabs-header .active').width(),
});
}
changePos();
// Intial Tab Height
var tabHeight = thisTab.find('.tab.active').outerHeight();
// Animate Tab Height
function animateTabHeight() {
// Update Tab Height
tabHeight = thisTab.find('.tab.active').outerHeight();
// Animate Height
thisTab
.find('.tabs-content')
.stop()
.css({
height: tabHeight + 'px',
});
}
animateTabHeight();
// Change Tab
function changeTab() {
var getTabId = thisTab
.find('.tabs-header .active a')
.attr('data-tab-id');
// Remove Active State
thisTab
.find('.tab')
.stop()
.fadeOut(300, function () {
// Remove Class
$(this).removeClass('active');
})
.hide();
thisTab
.find('.tab[data-tab-id=' + getTabId + ']')
.stop()
.fadeIn(300, function () {
// Add Class
$(this).addClass('active');
// Animate Height
animateTabHeight();
});
}
// Tabs
thisTab.find('.tabs-header a').on('click', function (e) {
e.preventDefault();
// Tab Id
var tabId = $(this).attr('data-tab-id');
// Remove Active State
thisTab
.find('.tabs-header a')
.stop()
.parent()
.removeClass('active');
// Add Active State
$(this).stop().parent().addClass('active');
changePos();
// Update Current Itm
tabCurrentItem = tabItems.filter('.active');
// Remove Active State
thisTab
.find('.tab')
.stop()
.fadeOut(300, function () {
// Remove Class
$(this).removeClass('active');
})
.hide();
// Add Active State
thisTab
.find('.tab[data-tab-id="' + tabId + '"]')
.stop()
.fadeIn(300, function () {
// Add Class
$(this).addClass('active');
// Animate Height
animateTabHeight();
});
});
// Tab Items
var tabItems = thisTab.find('.tabs-header ul li');
// Tab Current Item
var tabCurrentItem = tabItems.filter('.active');
// Next Button
thisTab.find('.tab-next').on('click', function (e) {
e.preventDefault();
var nextItem = tabCurrentItem.next();
tabCurrentItem.removeClass('active');
if (nextItem.length) {
tabCurrentItem = nextItem.addClass('active');
} else {
tabCurrentItem = tabItems.first().addClass('active');
}
changePos();
changeTab();
});
// Prev Button
thisTab.find('.tab-prev').on('click', function (e) {
e.preventDefault();
var prevItem = tabCurrentItem.prev();
tabCurrentItem.removeClass('active');
if (prevItem.length) {
tabCurrentItem = prevItem.addClass('active');
} else {
tabCurrentItem = tabItems.last().addClass('active');
}
changePos();
changeTab();
});
});
}
});
// Thousand Separator
function ThousandSeparator(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
// Bidding Slider Average Value
var avgValue =
(parseInt($('.bidding-slider').attr('data-slider-min')) +
parseInt($('.bidding-slider').attr('data-slider-max'))) /
2;
if ($('.bidding-slider').data('slider-value') === 'auto') {
$('.bidding-slider').attr({ 'data-slider-value': avgValue });
}
// Bidding Slider Init
$('.bidding-slider').slider();
$('.bidding-slider').on('slide', function (slideEvt) {
$('#biddingVal').text(ThousandSeparator(parseInt(slideEvt.value)));
});
$('#biddingVal').text(
ThousandSeparator(parseInt($('.bidding-slider').val()))
);
// Default Bootstrap Range Slider
var currencyAttr = $('.range-slider').attr('data-slider-currency');
$('.range-slider').slider({
formatter: function (value) {
return (
currencyAttr +
ThousandSeparator(parseInt(value[0])) +
' - ' +
currencyAttr +
ThousandSeparator(parseInt(value[1]))
);
},
});
$('.range-slider-single').slider();
var radios = document.querySelectorAll('.payment-tab-trigger > input');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', expandAccordion);
}
function expandAccordion(event) {
/* jshint validthis: true */
var tabber = this.closest('.payment');
var allTabs = tabber.querySelectorAll('.payment-tab');
for (var i = 0; i < allTabs.length; i++) {
allTabs[i].classList.remove('payment-tab-active');
}
event.target.parentNode.parentNode.classList.add('payment-tab-active');
}
$('.billing-cycle-radios').on('click', function () {
if ($('.billed-yearly-radio input').is(':checked')) {
$('.pricing-plans-container').addClass('billed-yearly');
}
if ($('.billed-monthly-radio input').is(':checked')) {
$('.pricing-plans-container').removeClass('billed-yearly');
}
});
function qtySum() {
var arr = document.getElementsByName('qtyInput');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value)) tot += parseInt(arr[i].value);
}
}
qtySum();
$('.qtyDec, .qtyInc').on('click', function () {
var $button = $(this);
var oldValue = $button.parent().find('input').val();
if ($button.hasClass('qtyInc')) {
$button
.parent()
.find('input')
.val(parseFloat(oldValue) + 1);
} else {
if (oldValue > 1) {
$button
.parent()
.find('input')
.val(parseFloat(oldValue) - 1);
} else {
$button.parent().find('input').val(1);
}
}
qtySum();
$('.qtyTotal').addClass('rotate-x');
});
/* global ClipboardJS */
$('.copy-url input').val(window.location.href);
new ClipboardJS('.copy-url-button');
$('.share-buttons-icons a').each(function () {
var buttonBG = $(this).attr('data-button-color');
if (buttonBG !== undefined) {
$(this).css('background-color', buttonBG);
}
});
var $tabsNav = $('.popup-tabs-nav'),
$tabsNavLis = $tabsNav.children('li');
$tabsNav.each(function () {
var $this = $(this);
$this
.next()
.children('.popup-tab-content')
.stop(true, true)
.hide()
.first()
.show();
$this.children('li').first().addClass('active').stop(true, true).show();
});
$tabsNavLis.on('click', function (e) {
var $this = $(this);
$this.siblings().removeClass('active').end().addClass('active');
$this
.parent()
.next()
.children('.popup-tab-content')
.stop(true, true)
.hide()
.siblings($this.find('a').attr('href'))
.fadeIn();
e.preventDefault();
});
var hash = window.location.hash;
var anchor = $('.tabs-nav a[href="' + hash + '"]');
if (anchor.length === 0) {
$('.popup-tabs-nav li:first').addClass('active').show(); //Activate first tab
$('.popup-tab-content:first').show(); //Show first tab content
} else {
anchor.parent('li').click();
}
// Link to Register Tab
$('.register-tab').on('click', function (event) {
event.preventDefault();
$('.popup-tab-content').hide();
$('#register.popup-tab-content').show();
$('body')
.find('.popup-tabs-nav a[href="#register"]')
.parent('li')
.click();
});
// Disable tabs if there's only one tab
$('.popup-tabs-nav').each(function () {
var listCount = $(this).find('li').length;
if (listCount < 2) {
$(this).css({
'pointer-events': 'none',
});
}
});
$('.indicator-bar').each(function () {
var indicatorLenght = $(this).attr('data-indicator-percentage');
$(this)
.find('span')
.css({
width: indicatorLenght + '%',
});
});
var uploadButton = {
$button: $('.uploadButton-input'),
$nameField: $('.uploadButton-file-name'),
};
uploadButton.$button.on('change', function () {
_populateFileField($(this));
});
function _populateFileField($button) {
var selectedFile = [];
for (var i = 0; i < $button.get(0).files.length; ++i) {
selectedFile.push($button.get(0).files[i].name + '<br>');
}
uploadButton.$nameField.html(selectedFile);
}
$('.default-slick-carousel').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1292,
settings: {
dots: true,
arrows: false,
},
},
{
breakpoint: 993,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false,
},
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
},
},
],
});
$('.testimonial-carousel').slick({
centerMode: true,
centerPadding: '30%',
slidesToShow: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1600,
settings: {
centerPadding: '21%',
slidesToShow: 1,
},
},
{
breakpoint: 993,
settings: {
centerPadding: '15%',
slidesToShow: 1,
},
},
{
breakpoint: 769,
settings: {
centerPadding: '5%',
dots: true,
arrows: false,
},
},
],
});
$('.logo-carousel').slick({
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
arrows: true,
responsive: [
{
breakpoint: 1365,
settings: {
slidesToShow: 5,
dots: true,
arrows: false,
},
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
dots: true,
arrows: false,
},
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
dots: true,
arrows: false,
},
},
],
});
$('.mfp-gallery-container').each(function () {
// the containers for all your galleries
$(this).magnificPopup({
type: 'image',
delegate: 'a.mfp-gallery',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: false,
preloader: true,
removalDelay: 0,
mainClass: 'mfp-fade',
gallery: { enabled: true, tCounter: '' },
});
});
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
});
$('.mfp-image').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
image: {
verticalFit: true,
},
});
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
});
});
})(this.jQuery);
Thanks for any help.

No jQuery working in IE Versions 6 - 11

I seem to have a problem where my jQuery functions don't seem to be working in all IE versions, however the functions seem to work fine in Chrome, Safari and Firefox.
It doesn't even work in IE 11 / Windows 10.
Is there something I am missing?
Thanks for your help.
(function($) {
'use strict';
$(document).ready(function() {
(function(){
if (!/portfolio-item/.test(window.location.href)) return;
var i;
var bigwrap = document.querySelector('.page-header .portfolio-entry-img').parentNode;
var bigimages = {};
var products = document.querySelectorAll('.product-thumbnail-wrap img');
var title = document.querySelector('.product-title');
var code = document.querySelector('.product-code');
var trays_tmp = document.querySelectorAll('.tray-reference [data-tray]');
var trays = {};
var wraps_tmp = document.querySelectorAll('.tray-wrap');
var wraps = {};
var active = {};
active.bigimage = bigwrap.firstElementChild;
if(active.bigimage) bigimages[active.bigimage.src] = active.bigimage;
for(i in Object.keys(trays_tmp)) {
if (trays_tmp.hasOwnProperty(i)) {
trays[trays_tmp[i].dataset.tray] = trays_tmp[i];
if(/tray-active/.test(trays_tmp[i].className)) active.tray = trays_tmp[i].dataset.tray;
}
}
for(i in Object.keys(wraps_tmp)) {
if (wraps_tmp.hasOwnProperty(i)) {
var table = wraps_tmp[i].dataset.table;
wraps[table] = wraps_tmp[i];
if(wraps_tmp[i].style.display === '') active.wrap = wraps_tmp[i];
}
}
for (i in Object.keys(products)) {
if (products.hasOwnProperty(i)) {
if (/product-thumb-active/.test(products[i].className)) active.product = products[i];
if (products[i].dataset.big && !bigwrap.querySelector('[src="' + products[i].dataset.big + '"]') && active.bigimage) {
var bigimg = active.bigimage.cloneNode();
bigimg.src = products[i].dataset.big;
bigimg.style.display = 'none';
bigwrap.appendChild(bigimg);
bigimages[products[i].dataset.big] = bigimg;
}
products[i].addEventListener('click', function() {
if (active.product) active.product.className = active.product.className.replace(/\s*product-thumb-active/, '');
this.className += ' product-thumb-active';
active.product = this;
if (active.tray) trays[active.tray].className = trays[active.tray].className.replace(/\s*tray-active/, '');
active.tray = this.dataset.tray;
if (active.tray){
if (!trays[active.tray]) active.tray = undefined;
else trays[active.tray].className += ' tray-active';
}
console.log(active.tray, trays[active.tray]);
if ((active.tray && active.wrap !== active.tray[0]) || !active.tray) {
if (active.wrap) active.wrap.style.display = 'none';
if (!active.tray) active.wrap = wraps.None;
else active.wrap = wraps[active.tray[0]];
if (!active.wrap) active.wrap = wraps.None;
active.wrap.style.display = '';
}
title.textContent = this.getAttribute('title');
code.textContent = this.getAttribute('code');
if (active.bigimage) active.bigimage.style.display = 'none';
active.bigimage = bigimages[this.dataset.big];
$(active.bigimage).fadeIn('fast');
});
}
}
})();
$(".nav-toggle").click(function() {
$(this).toggleClass("active");
$(".overlay-boxify").toggleClass("open");
$("#site-navigation-wrap").toggleClass("menuActive");
$(".fixed-logo").toggleClass("logoActive");
$("#site-social-wrap").toggleClass("socialActive");
});
$(".overlay ul li a").click(function() {
$(".nav-toggle").toggleClass("active");
$(".overlay-boxify").toggleClass("open");
$("#site-navigation-wrap").toggleClass("menuActive");
$(".fixed-logo").toggleClass("logoActive");
});
$(".overlay").click(function() {
$(".nav-toggle").toggleClass("active");
$(".overlay-boxify").toggleClass("open");
$("#site-navigation-wrap").toggleClass("menuActive");
$(".fixed-logo").toggleClass("logoActive");
});
$('.single-question').click(function() {
$('.tray-reference').toggle();
});
/***************** Header BG Scroll ******************/
var pastWaypoint = false;
$(window).scroll(function() {
if ($(window).scrollTop() > 580 && !pastWaypoint) {
$('.fixed-logo').show();
$(".fixed-header").addClass("hasBg header-sml");
$("#site-navigation-wrap").show();
console.log('d');
pastWaypoint = true;
} else if ($(window).scrollTop() <= 580 && pastWaypoint) {
$('.fixed-logo').hide();
console.log('f');
$(".fixed-header").removeClass("hasBg header-sml");
pastWaypoint = false;
}
});
$('.menu-item a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
$("img").bind("contextmenu", function(e) {
return false;
});
$("div.desc").hide();
$("input[name$='requestbrochure']").change(function() {
$("div.desc").hide();
$("#" + this.value).show();
}).filter(function() {
return this.checked;
}).change();
$(".resource-tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("resource-current");
$(this).parent().siblings().removeClass("resource-current");
var tab = $(this).attr("href");
$(".resource-tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
$('.portfolio-dropdown-content').show();
$('#portfolio-dropdown-menu').click(function() {
$('.portfolio-dropdown-content').slideToggle("fast");
$('#portfolio-dropdown-icon').toggleClass("portfolio-dropdown-selected");
});
$('.request-brochure-button').click(function() {
$('.request-brochure-content').slideToggle("fast");
$('.request-brochure-button').toggleClass("request-brochure-button-active");
});
// Main menu superfish
$('ul.sf-menu').superfish({
delay: 200,
animation: {
opacity: 'show',
height: 'show'
},
speed: 'fast',
cssArrows: false,
disableHI: true
});
// Mobile Menu
$('#navigation-toggle').sidr({
name: 'sidr-main',
source: '#sidr-close, #site-navigation, #mobile-search',
side: 'left'
});
$('.sidr-class-toggle-sidr-close').click(function() {
$.sidr('close', 'sidr-main');
return false;
});
// Close the menu on window change
$(window).resize(function() {
$.sidr('close', 'sidr-main');
});
$("#featuresSlider").flickity({
cellAlign: "left",
contain: true,
prevNextButtons: false
});
$("#showcaseSlider").flickity({
cellAlign: "left",
contain: true,
prevNextButtons: false,
imagesLoaded: true
});
$(".youtube-media").on("click", function(e) {
var t = $(window).width();
if (t <= 768) {
return
}
$.fancybox({
href: this.href,
padding: 4,
type: "iframe",
href: this.href.replace(new RegExp("watch\\?v=", "i"), "v/")
});
return false;
});
$("a.single_image").fancybox({
padding: 4
});
$(".nav-toggle").click(function() {
$(this).toggleClass("active");
$(".overlay-boxify").toggleClass("open")
});
$(".overlay ul li a").click(function() {
$(".nav-toggle").toggleClass("active");
$(".overlay-boxify").toggleClass("open")
});
$(".overlay").click(function() {
$(".nav-toggle").toggleClass("active");
$(".overlay-boxify").toggleClass("open")
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 125
}, 1000);
return false;
}
}
});
}); // End doc ready
$(window).load(function() {
// Homepage FlexSlider
$('#homepage-slider').flexslider({
animation: 'slide',
slideshow: true,
smoothHeight: true,
controlNav: false,
directionNav: true,
prevText: '<span class="fa fa-angle-left"></span>',
nextText: '<span class="fa fa-angle-right"></span>',
controlsContainer: ".flexslider-container"
});
// Post FlexSlider
$('div.post-slider').flexslider({
animation: 'slide',
slideshow: true,
smoothHeight: true,
controlNav: false,
directionNav: true,
prevText: '<span class="fa fa-angle-left"></span>',
nextText: '<span class="fa fa-angle-right"></span>',
controlsContainer: ".flexslider-container"
});
}); // End on window load
})(jQuery);

Are you running from a file on your local machine (not an http or https URL)? IE will disable JavaScript on file:// by default. Usually there's an option at the bottom of the page to enable it.

On Mouse hover stop Caurosel Slider

I like to add a stop function on mouse hover in the existing java script carousel slider.Please give me the additional code what I have to add in it. So that will be easy for me.
This is the site with Slider
<script type="text/javascript">
// the carousel
var $carousel = null;
// the draggable wrapper
var $wrapper = null;
// the width of one item
var itemWidth = 800;
// the duration of the scrolling
var scrollDuration = 900;
// dragging-engine
var startDragPosition = false;
function startDrag( event ) {
event.preventDefault();
if ( $carousel.triggerHandler( 'isScrolling' ) ) {
startDragPosition = false;
return;
}
startDragPosition = event.pageX;
$wrapper.bind(
'mousemove',
function( e ) {
$wrapper.css({
'marginLeft': -(itemWidth + startDragPosition - e.pageX)
});
}
);
}
function stopDrag( event ) {
event.preventDefault();
$wrapper.unbind('mousemove');
if ( startDragPosition ) {
var currentDragPosition = event.pageX;
var direction = false;
if ( startDragPosition < currentDragPosition ) {
direction = 'prev';
} else if ( startDragPosition > currentDragPosition ) {
direction = 'next';
}
if ( direction ) {
$carousel.trigger( direction );
$wrapper.animate({
'marginLeft': -itemWidth
}, scrollDuration);
}
}
startDragPosition = false;
}
$(function() {
// the carousel
$carousel = $('#carousel');
$carousel.carouFredSel({
width: 800 * 3,
height: 400,
align: false,
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 700
},
auto: true
});
// make the wrapper draggable
$wrapper = $carousel.parent();
$wrapper.css({
'cursor': 'pointer',
'marginLeft': -itemWidth
});
$wrapper.bind('mousedown', startDrag)
$wrapper.bind('mouseup', stopDrag)
$wrapper.bind('mouseleave', stopDrag);
});
</script>

add pauseOnHover: true,
scroll: {
pauseOnHover: true, // add this lin
items: 1,
duration: 700
},
Your final script looks like
// the carousel
var $carousel = null;
// the draggable wrapper
var $wrapper = null;
// the width of one item
var itemWidth = 800;
// the duration of the scrolling
var scrollDuration = 900;
// dragging-engine
var startDragPosition = false;
function startDrag(event) {
event.preventDefault();
if ($carousel.triggerHandler('isScrolling')) {
startDragPosition = false;
return;
}
startDragPosition = event.pageX;
$wrapper.bind(
'mousemove',
function (e) {
$wrapper.css({
'marginLeft': -(itemWidth + startDragPosition - e.pageX)
});
});
}
function stopDrag(event) {
event.preventDefault();
$wrapper.unbind('mousemove');
if (startDragPosition) {
var currentDragPosition = event.pageX;
var direction = false;
if (startDragPosition < currentDragPosition) {
direction = 'prev';
} else if (startDragPosition > currentDragPosition) {
direction = 'next';
}
if (direction) {
$carousel.trigger(direction);
$wrapper.animate({
'marginLeft': -itemWidth
}, scrollDuration);
}
}
startDragPosition = false;
}
$(function () {
// the carousel
$carousel = $('#carousel');
$carousel.carouFredSel({
width: 800 * 3,
height: 400,
align: false,
items: {
visible: 3,
start: -1
},
scroll: {
pauseOnHover: true, // add this line
items: 1,
duration: 700
},
auto: true
});
// make the wrapper draggable
$wrapper = $carousel.parent();
$wrapper.css({
'cursor': 'pointer',
'marginLeft': -itemWidth
});
$wrapper.bind('mousedown', startDrag)
$wrapper.bind('mouseup', stopDrag)
$wrapper.bind('mouseleave', stopDrag);
});

Try the following code. I think it's work.
$(function() {
$('.carousel').each(function(){
$(this).carousel({
interval: false
});
});
});

run stack plugin on mouse hover on the div

I am using the following plugin
http://playground.mobily.pl/jquery/mobily-notes/demo.html
which gives a very good stack, but the problem is when I use it for my gallery. All of the albums are auto rotating which looks odd. Is there any possible way to at least run the plugin after we hover on the div instead of auto run? The main code to run this is
$(function(){
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false,
positionMultiplier: 5
});
});

Notice: I am not the author but it's an MIT licensed plugin so there shouldn't be any problem with modifying and redistributing it here.
In spite of eye candy of the plugin, it's not elastic enough to extend.
You can use my modified version instead.
mobilynotes.js:
(function ($) {
$.fn.mobilynotes = function (options) {
var defaults = {
init: "rotate",
positionMultiplier: 5,
title: null,
showList: true,
autoplay: true,
interval: 4000,
hover: true,
index: 1
};
var sets = $.extend({}, defaults, options);
return this.each(function () {
var $t = $(this),
note = $t.find(".note"),
size = note.length,
autoplay;
var notes = {
init: function () {
notes.css();
if (sets.showList) {
notes.list()
}
if (sets.autoplay) {
notes.autoplay()
}
if (sets.hover) {
notes.hover()
}
notes.show()
},
random: function (l, u) {
return Math.floor((Math.random() * (u - l + 1)) + l)
},
css: function () {
var zindex = note.length;
note.each(function (i) {
var $t = $(this);
switch (sets.init) {
case "plain":
var x = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
y = notes.random(-(sets.positionMultiplier), sets.positionMultiplier);
$t.css({
top: y + "px",
left: x + "px",
zIndex: zindex--
});
break;
case "rotate":
var rotate = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
degrees = "rotate(" + rotate + "deg)";
$t.css({
"-webkit-transform": degrees,
"-moz-transform": degrees,
"-o-transform": degrees,
filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
zIndex: zindex--
})
}
$t.attr("note", i)
})
},
zindex: function () {
var arr = new Array();
note.each(function (i) {
arr[i] = $(this).css("z-index")
});
var z = Math.max.apply(Math, arr);
return z
},
list: function () {
$t.after($("<ul />").addClass("listNotes"));
var ul = $t.find(".listNotes"),
title = new Array();
if (sets.title != null) {
note.each(function (i) {
title[i] = $(this).find(sets.title).text()
})
} else {
title[0] = "Bad selector!"
}
for (x in title) {
$t.next(".listNotes").append($("<li />").append($("<a />").attr({
href: "#",
rel: x
}).text(title[x])))
}
},
autoplay: function () {
var i = 1,
autoplay = setInterval(function () {
i == size ? i = 0 : "";
var div = note.eq(i),
w = div.width(),
left = div.css("left");
notes.animate(div, w, left);
i++
}, sets.interval)
},
hover: function () {
$t.hover(function() {
var div = note.eq(sets.index),
w = div.width(),
left = div.css("left");
sets.index == size ? sets.index = 1 : sets.index += 1;
notes.animate(div, w, left);
},
function() {}
);
},
show: function () {
$t.next(".listNotes").find("a").click(function () {
var $t = $(this),
nr = $t.attr("rel"),
div = note.filter(function () {
return $(this).attr("note") == nr
}),
left = div.css("left"),
w = div.width(),
h = div.height();
clearInterval(autoplay);
notes.animate(div, w, left);
return false
})
},
animate: function (selector, width, position) {
var z = notes.zindex();
selector.animate({
left: width + "px"
}, function () {
selector.css({
zIndex: z + 1
}).animate({
left: position
})
})
}
};
notes.init()
})
}
}(jQuery));
Using new features:
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false,
autoplay: false,
index: 1, //starting index (new)
hover: true // (new)
});

Taking over where #username left off (excellent work), I have branched username's fiddle with the following changes to the config options:
Modified (from #username's code):
hover: (boolean) on hover, reverses the effect of autoplay
New:
click: (boolean) on click, advances to next note, then resumes autoplay, if active, in the hover state.
Internally, new next, stop and restart functions and modified init, autoplay and animate functions handle (combinations of) the options.
The trickiest part was to provide for a callback in animate to cause autoplay to resume after next (the click action) has completed. This has ramifications in several other functions. (On reflection there's undoubtedly a better way using deferreds - I will have a think about that)
Here's the fiddle (or this full page version), with settings that reflect #Sakshi Sharma original question. I set click to true but it could equally be set to false, depending on preference.
And here's the code:
(function($) {
$.fn.mobilynotes = function(options) {
var defaults = {
init: "rotate",
positionMultiplier: 5,
title: null,
showList: true,
autoplay: false,
hover: true,//when true, hovering reverses autoplay; when false, has no effect.
click: true,
interval: 4000,
index: 1
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
var $t = $(this),
note = $t.find(".note"),
size = note.length,
autoplay,
currentIndex = 1;
var notes = {
init: function() {
notes.css();
if (settings.showList) {
notes.list();
}
if (settings.hover) {
var fn1 = settings.autoplay ? notes.stop : notes.restart;
var fn2 = settings.autoplay ? notes.restart : notes.stop;
$t.hover(fn1, fn2);
}
if (settings.click) {
clearInterval(autoplay);
//autoplay 0, hover 0: null
//autoplay 0, hover 1: autoplay
//autoplay 1, hover 0: autoplay
//autoplay 1, hover 1: null
var callback = ( (settings.autoplay && !settings.hover) || (!settings.autoplay && settings.hover) ) ? notes.autoplay : null;
$t.click(function(){
notes.next(callback);
});
}
if (settings.autoplay) {
notes.autoplay();
}
notes.show();
},
random: function(l, u) {
return Math.floor((Math.random() * (u - l + 1)) + l);
},
css: function() {
var zindex = note.length;
note.each(function(i) {
var $t = $(this);
switch (settings.init) {
case "plain":
var x = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
y = notes.random(-(settings.positionMultiplier), settings.positionMultiplier);
$t.css({
top: y + "px",
left: x + "px",
zIndex: zindex--
});
break;
case "rotate":
var rotate = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
degrees = "rotate(" + rotate + "deg)";
$t.css({
"-webkit-transform": degrees,
"-moz-transform": degrees,
"-o-transform": degrees,
filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
zIndex: zindex--
})
}
$t.attr("note", i)
});
},
zindex: function() {
var arr = new Array();
note.each(function(i) {
arr[i] = $(this).css("z-index")
});
var z = Math.max.apply(Math, arr);
return z
},
list: function() {
$t.after($("<ul />").addClass("listNotes"));
var ul = $t.find(".listNotes"),
title = new Array();
if (settings.title != null) {
note.each(function(i) {
title[i] = $(this).find(settings.title).text()
})
} else {
title[0] = "Bad selector!"
}
for (x in title) {
$t.next(".listNotes").append($("<li />").append($("<a />").attr({
href: "#",
rel: x
}).text(title[x])))
}
},
next: function(callback) {
callback = (!callback || typeof callback !== 'function') ? null : callback;
currentIndex = currentIndex % size;
notes.animate(note.eq(currentIndex), callback);
currentIndex++;
},
autoplay: function() {
notes.stop();
autoplay = setInterval(notes.next, settings.interval);
},
stop: function() {
clearInterval(autoplay);
},
restart: function() {
notes.next(notes.autoplay);
},
show: function() {
$t.next(".listNotes").find("a").click(function() {
var $t = $(this),
nr = $t.attr("rel"),
div = note.filter(function() {
return $(this).attr("note") == nr;
});
clearInterval(autoplay);
notes.animate(div);
return false;
})
},
animate: function(selector, callback) {
var width = selector.width(),
position = selector.css("left"),
z = notes.zindex();
selector.animate({
left: width + "px"
}, function() {
selector.css({
zIndex: z + 1
}).animate({
left: position
}, function(){
if(callback) {
callback();
}
});
});
}
};
notes.init()
})
}
}(jQuery));

Hiya there so demo here :) and hope this helps: http://jsfiddle.net/haf6J/14/show/ && http://jsfiddle.net/haf6J/14/ OR http://jsfiddle.net/haf6J/3/show/ && http://jsfiddle.net/haf6J/3/
Now the rotation will start when you hover the images and if you want further that one mouse out it should stop you can take a look into event .mouseout and you can stop the rotation i.e. remove the effect.
Like epascarello mentioned documentation is here http://playground.mobily.pl/jquery/mobily-notes.html
Please let me know and dont forget to accept if this helps (and upvote :)) cheers
Jquery Code
$('.notes_img').hover(function() {
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false
});
});

Develop Reference

JavaScript is the programming language of the Web.

How can i stop videos when i go to next slide - javascript

Related

Uncaught TypeError: $(...).appear is not a function

How can I make my JQuery run again when using goBack() in React

No jQuery working in IE Versions 6 - 11

On Mouse hover stop Caurosel Slider

run stack plugin on mouse hover on the div

Categories

Resources