Ajax Call with tab open - javascript

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

Related

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.

Default filtering item

I have a page like this page:
http://www.sungeetheme.com/html/our_gallery_3_colums.html
In the filtering Gallery, the default item is "all"
How do I change the default to something else on page load, for example: Portrait?
I tried to change in the code section the variable dataFilterVal from "All" to something else and it did not work well
var masonryFilter = {
massMasonry: [],
dataFilterVal: "all",
init: function () {
var self = this;
self.filterEl('.j-filter', '~ .j-filter-content');
self.masonry();
},
masonry: function () {
var self = this;
var msnry;
var i = 0;
$('.j-masonry').each(function () {
var el = $(this),
newClass = 'j-masonry-' + i;
el.addClass(newClass).attr('data-masonry-id', i);
i++;
el.imagesLoaded(function () {
var container = document.querySelector('.' + newClass);
msnry = new Masonry(container,
{
itemSelector: '.j-masonry-item',
columnWidth: '.' + newClass + ' .masonry-gridSizer',
transitionDuration: '1.2s'
});
self.massMasonry.push(msnry);
el.data('masonry', msnry);
});
});
},
filterEl: function (filterNav, filterContent) {
var self = this;
$(filterNav + ' a').click(function (e) {
e.preventDefault();
var el = $(this);
var activeClass = "is-category-filter-active";
var activeContainer = $(filterContent, $(this).parents(filterNav)).eq(0);
console.log(activeContainer);
$('li', $(this).parents(filterNav)).removeClass(activeClass);
el.closest('li').addClass(activeClass);
self.dataFilterVal = el.attr('data-filter');
self.filterStart(self.dataFilterVal, activeContainer);
});
},
filterStart: function (dataFilterVal, filterContent) {
var self = this;
if (dataFilterVal == "all") {
$('[class*="j-filter-"]', filterContent).show().stop(true, false).animate({
opacity: 1
}, 400);
} else {
var hideItems = $('[class*="j-filter-"]', filterContent).not(dataFilterVal);
hideItems.stop(true, false).animate({
opacity: 0
}, 400);
setTimeout(function () {
hideItems.hide();
}, 301);
$(dataFilterVal, filterContent).show().stop(true, false).animate({
opacity: 1
}, 400);
}
setTimeout(function () {
var masonryId = $(filterContent).find('.j-masonry').attr('data-masonry-id');
self.massMasonry[masonryId].layout();
}, 501);
}
};
masonryFilter.init();

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.

Add Multiple Elements to Page

I have created a JQuery tooltip plugin and I am applying it to a few A tags.
For each A tag there should be a different tooltip associated with it so I have:
var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
Where the tooltip id includes a random number created as follows:
id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000)
The plugin does not behave well. I checked the HTML added to the page.
Only one tooltip is being added to the page ... Always the same.
How can I fix this? What am I doing wrong?
I have an example in: http://codepen.io/mdmoura/pen/wgapv
And the plugin code is the following:
$(document).ready(function () {
$("table a").Tooltip();
});
// Tooltip
(function ($) {
$.fn.Tooltip = function (options) {
var defaults = {
class: 'Tooltip',
delay: [200, 200],
offset: [0, -10],
hide: function ($element, $tooltip) {
$tooltip.fadeOut(200);
},
show: function ($element, $tooltip) {
$tooltip.fadeIn(200);
}
};
var options = $.extend({}, defaults, options);
var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };
$(this).each(function (e) {
var $this = $(this);
tooltip.title = $this.attr('title') || '';
$this.mouseenter(function (e) {
if (tooltip.ready) {
var $tooltip = $("#" + tooltip.id);
} else {
var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
$tooltip.html(tooltip.title);
tooltip.ready = true;
$this.attr('title', '');
}
var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
$tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
tooltip.timer = window.setTimeout(function () {
options.show($this, $tooltip.stop(true, true));
}, options.delay[0] || 0);
$("#" + tooltip.id).mouseenter(function () {
window.clearTimeout(tooltip.timer);
tooltip.timer = null;
}); // Tooltip enter
$("#" + tooltip.id).mouseleave(function () {
tooltip.timer = setTimeout(function () {
options.hide($this, $tooltip);
}, 0);
});
}), // Mouse enter
$this.mouseleave(function (e) {
tooltip.timer = setTimeout(function () {
options.hide($this, $("#" + tooltip.id).stop(true, true));
}, options.delay[1] || 0);
}) // Mouse leave
}); // Each
}; // Tooltip
})(jQuery); // JQuery
And the HTMl is the following:
<table>
<tr><td>Tooltip 01</td></tr>
<tr><td>Tooltip 02</td></tr>
<tr><td>Tooltip 03</td></tr>
<tr><td>Tooltip 04</td></tr>
<tr><td>Tooltip 05</td></tr>
</table>
Thank you!
you have the var tooltip definded outside the this.each loop, which means there will be only one tooltip instance
(function ($) {
$.fn.Tooltip = function (options) {
var defaults = {
class: 'Tooltip',
delay: [200, 200],
offset: [0, -10],
hide: function ($element, $tooltip) {
$tooltip.fadeOut(200);
},
show: function ($element, $tooltip) {
$tooltip.fadeIn(200);
}
};
var options = $.extend({}, defaults, options);
$(this).each(function (e) {
//moved this inside the loop
var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };
var $this = $(this);
tooltip.title = $this.attr('title') || '';
$this.mouseenter(function (e) {
if (tooltip.ready) {
var $tooltip = $("#" + tooltip.id);
} else {
var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
$tooltip.html(tooltip.title);
tooltip.ready = true;
$this.attr('title', '');
}
var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
$tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
tooltip.timer = window.setTimeout(function () {
options.show($this, $tooltip.stop(true, true));
}, options.delay[0] || 0);
$("#" + tooltip.id).mouseenter(function () {
window.clearTimeout(tooltip.timer);
tooltip.timer = null;
}); // Tooltip enter
$("#" + tooltip.id).mouseleave(function () {
tooltip.timer = setTimeout(function () {
options.hide($this, $tooltip);
}, 0);
});
}), // Mouse enter
$this.mouseleave(function (e) {
tooltip.timer = setTimeout(function () {
options.hide($this, $("#" + tooltip.id).stop(true, true));
}, options.delay[1] || 0);
}) // Mouse leave
}); // Each
}; // Tooltip
})(jQuery);
Demo: CodePen

JavaScript Resize Height Issue

Im stuck on a JavaScript Issue, which I have no idea how to resolve.
I have a Contact Modal within a Blog: http://www.northernvirginiapaintingcontractor.com/blog Click "Send a Page"
When you click on this you will see the issue. The Contact Modal doesn't open all of the way.
Compare that with the same "Send a Page" button on the Parent Application which functions normal. http://www.northernvirginiapaintingcontractor.com
This utilizes a modified version of Eric Martin's Simple Modal.
The Contact.js was modified to enable dynamic height, as well as, several different Contact Modals to be utilized with the same script.
3 other .js files include:
actual.js
jquery-easing-1.3.pack.js
jquery-easing-compatibility.1.2.pack.js
Here is the contact.js that has the problem: I don't have the slightest clue, if someone else does that would be great.
jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, a.contact').click(function (e) {
e.preventDefault();
// Create the 1stModal dialog with the data
$('#modal-contact-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>Close Pager Modal</a>",
//maxHeight: 62,
//maxWidth: 62,
//minHeight: 62,
//minWidth: 62,
position: [98, 377],
//autoPosition: false,
autoResize: true,
//overlayId: 'contact-overlay',
containerId: 'contact-container',
containerCss: { 'width': '350px'},
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
$('#contact-form input.suportecontacto, a.suportecontacto').click(function (e) {
e.preventDefault();
// Create the 2nd Modal dialog with the data
$('#modal-soporte-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>Close Ticket Modal</a>",
//maxHeight: 62,
//maxWidth: 62,
//minHeight: 62,
//minWidth: 62,
position: [98, 377],
//autoPosition: false,
autoResize: true,
//overlayId: 'contact-overlay',
containerId: 'contact-container',
containerCss: { 'width': '350px' },
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
$('#contact-indivform input.indivcontacto, a.indivcontacto').click(function (e) {
e.preventDefault();
// Create the 3rd Modal dialog with the data
$('#modal-indivcontact-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>Close Contacto Modal</a>",
//maxHeight: 62,
//maxWidth: 62,
//minHeight: 62,
//minWidth: 62,
position: [98, 377],
//autoPosition: false,
autoResize: true,
//overlayId: 'contact-overlay',
containerId: 'contact-container',
containerCss: { 'width': '350px' },
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
$('#HeadLogin').click(function (e) {
e.preventDefault();
// Create the Login modal
$('#login_form').modal({
closeHTML: "<a href='#' title='Cerrar' class='modal-close' style='padding-right:15px'>Cerrar Login Modal</a>",
//maxHeight: 62,
//maxWidth: 62,
//minHeight: 62,
//minWidth: 62,
position: [110, 364],
//autoPosition: false,
autoResize: true,
//overlayId: 'contact-overlay',
containerId: 'contact-container',
containerCss: { 'width': '310px' },
onOpen: contact.open,
onShow: contact.login,
onClose: contact.close
});
});
},
open: function (dialog) {
$('#ajax_loading').hide();
$('.simplemodal-wrap').css('overflow-x', 'visible').css('overflow-y', 'visible');
// add padding to the buttons in firefox/mozilla
if ($.browser.mozilla) {
$('#contact-container .contact-button').css({
'padding-bottom': '2px'
});
}
// input field font size
if ($.browser.safari) {
$('#contact-container .contact-input').css({
'font-size': '.9em'
});
}
// Dynamically determine Modal Height
//var h = 280;
//var h = 220;
//if ($('#contact-subject').length) {
// h += 26;
//}
//if ($('#contact-cc').length) {
// h += 22;
//}
var h = $('#contact-container form').actual('outerHeight') + 30;
var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Loading...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();
$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
// fix png's for IE 6
if ($.browser.msie && $.browser.version < 7) {
$('#contact-container .contact-button').each(function () {
if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
var src = RegExp.$1;
$(this).css({
backgroundImage: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
});
}
});
}
});
});
});
});
});
},
login: function() {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
// Hide 'Submit' Button
if (contact.validateLogin()) {
$('.contact-send').hide();
$('.contact-cancel').hide();
// Show Gif Spinning Rotator
$('#ajax_loading').show();
// 'this' refers to the current submitted form
var url ='';
var str = $('#frmlogin').serialize();
var path = window.location.pathname;
var sub = 'Account';
if(path.toUpperCase().indexOf(sub.toUpperCase()) != -1) {
url = 'Login.aspx';
var image = $('#ajax_loading img');
image.attr('src','../images/spinner.gif');
}
else {
url = 'Account/Login.aspx';
}
// -- Start AJAX Call --
var form = $('#status form');
$.ajax({
type: "POST",
//url: form[0].action,
url: url,
data: str,
success: function (msg) {
$("#status").ajaxComplete(function (event, request, settings) {
// Show 'Submit' Button
$('.contact-send').show();
$('.contact-cancel').show();
// Hide Gif Spinning Rotator
$('#ajax_loading').hide();
if (msg != 'False') // LOGIN OK?
{
var login_response = '<div style="color:green; margin: 1px; float: right; width: 300px;">Ya Estás Conectado!<br />Por favor, espera mientras estas redirigido...</div>';
$('.contact-title').hide();
$('a.modalCloseImg').hide();
$('#frmlogin').hide();
$('#simplemodal-container').css("width", "500px");
$('#simplemodal-container').css("height", "140px");
$('#login_form .contact-message').html(login_response).show(); // Refers to 'status'
// After 1 second redirect the Logged-in User
setTimeout(contact.redirect, 500);
}
else // ERROR?
{
$('#login_form .contact-content').css("height", "150px");
$('#login_form .contact-message').html("Login failed!").css('color','red').show();
}
});
}
});
}
// -- End AJAX Call --
else {
if ($('#login_form .contact-message:visible').length > 0) {
var msg = $('#login_form .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#login_form .contact-message').animate({
height: '30px'
}, contact.showError);
}
}
});
},
redirect: function() {
window.location = '/'; // Members Area
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
var form = $('#contact-container form');
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Sending...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
var uname = $('#contact-container #contact-name').val();
var email = $('#contact-container #contact-email').val();
var cntx = $('#contact-container #contact-message').val();
var docc = "false";
if ($('#contact-container #contact-cc').is(':checked')) {
docc = "true";
}
$.ajax({
url: "blog/api/Blogs.asmx/SendMail",
data: "{'uname':'" + uname + "', 'email':'" + email + "','cntx':'" + cntx + "','docc':'" + docc + "'}",
type: "POST",
contentType: "application/json",
success: function (msg) {
//contact.close(dialog);
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Thank you!');
msg.html(data).fadeIn(200);
setTimeout(function () {
contact.close(dialog);
}, 1500);
});
}
});
contact.close(dialog);
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}
}
});
},
close: function (dialog) {
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('Closing...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validateLogin: function () {
contact.message = '';
if (!$('#username').val()) {
contact.message += 'User name is required. ';
}
var pass = $('#password').val();
if (!pass) {
contact.message += 'Password is required. ';
}
if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validate: function () {
contact.message = '';
if (!$('#contact-container input[name="name"]').val()) {
contact.message += 'Name is required. ';
}
var email = $('#contact-container input[name="email"]').val();
if (!email) {
contact.message += 'Email is required. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'Email is invalid. ';
}
}
if (!$('#contact-container textarea[name="message"]').val()) {
contact.message += 'Message is required.';
}
if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("#");
// Make sure the at (#) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;
// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;
// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);
// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;
// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;
// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}
// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;
return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};
contact.init();
});
This:
$('.contact-send').hide();
$('.contact-cancel').hide();
add's display:none; to those elements and they aren't removed when you call "open"
The simpleModal plugin programatically assigns the .simplemodal-wrap class
with a height of 100%, but the jquery.actual plugin fails to find the correct
height of the modal form during page resize because of this.
As a work-around I re-set the min-height to a value that displays the full
form no matter what.
.simplemodal-wrap {
min-height: 350px;
height: auto !important; /* needed for IE6 and below /
height: 350px; / needed for IE6 and below */
}
site.cshtml:
The element at line 129:
had a inline style == "display: none; ". This was not being changed to display: block; when the contact modal was opened. I chose to remove the inline style because one of the ancestor elements already has display: none; specified and when the modal opened that was being changed correctly.

Categories

Resources