Related
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.
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.
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
});
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
});
});
});
I have the following problem with jquery:
$(function() {
var linkCorretto = $("#id").text();
var authWindow;
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#' + modalLocation).reveal($(this).data());
});
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop',
animationspeed: 300,
closeonbackgroundclick: false,
dismissmodalclass: 'close'
};
var options = $.extend({}, defaults, options);
var altezza = $(window).height();
altezza = altezza * 0.5;
return this.each(function() {
var modal = $(this),
modalheight = modal.height() * 0.8;
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
if (modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
modal.bind('reveal:open', function() {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if (!locked) {
lockModal();
//modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(window).scrollTop()+topMeasure});
modal.css({
'opacity': 0,
'visibility': 'visible',
'top': $(window).scrollTop() + altezza - modalheight
});
$('body').css('overflow-y', 'hidden')
modalBG.fadeIn(options.animationspeed / 2);
modal.delay(options.animationspeed / 2).animate({
"opacity": 1
}, options.animationspeed, unlockModal());
}
modal.unbind('reveal:open');
$('.warning').hide();
$('.loading').hide();
$('.loadingoff').show();
$('.reveal-modal').addClass('background');
});
modal.bind('reveal:close', function() {
if (!locked) {
lockModal();
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity": 0
}, options.animationspeed, function() {
modal.css({
'opacity': 1,
'visibility': 'hidden',
'top': topMeasure
});
$('body').css('overflow-y', 'auto')
unlockModal();
});
}
modal.unbind('reveal:close');
});
modal.trigger('reveal:open')
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() {
modal.trigger('reveal:close')
});
/*
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); }
});
*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});
}
// $.fn.reveal
$(".accetta").click(function() {
var dati = new Object();
dati = $("#listaCarte").val();
var imageUrl = '';
var x = ($('.reveal-modal').height());
$('.loadingoff').hide();
$('.loading').css('height', x).show();
$('.reveal-modal').removeClass('background');
$('<input>').attr({
type: 'hidden',
id: 'linkDaSostituire',
name: 'linkDaSostituire',
value: linkCorretto,
});
setTimeout(function() {
$.ajax({
type: "POST",
url: "/portalppay/ScontiServlet",
data: {
"linkDaSostituire": linkCorretto,
"cartaSelezionata": dati
},
dataType: "html",
success: function(msg) {
//window.location = msg;
authWindow = window.open('about:blank');
authWindow.location.replace(msg);
//window.open(msg);
//var win=window.location(msg, '_blank');
//win.focus();
$('.reveal-modal').trigger('reveal:close');
},
error: function() {
$('.loadingoff').hide();
$('.loading').hide();
$('.warning').css('height', x - 40).show();
}
});
}, 400);
});
// .accetta
});
when I trigger the ajax call, with this block of code:
url: "/portalppay/ScontiServlet",
I get a url for an answer and I do see in the browser with the following code:
authWindow = window.open('about:blank');
authWindow.location.replace(msg);
the problem is that I can not render the link in a new tab, but always in a new pop-up!
someone can help me solve the problem?
Have you checked your browser settings?
It's the browser which choose how to open new windows.
In Firefox there is the Open new windows in a new tab instead option which tells the browser if it has to open new windows in a new tab or in a... new window.
Do note that this works only if you are calling window.open without the strWindowFeatures parameter, specifying it forces the browser (well, at least Firefox and Explorer, Chrome does not seem to have a similar option) to open the link in a new window.
For more informations: https://developer.mozilla.org/en-US/docs/Web/API/window.open