We Keep Coding

Woocommerce functionality is inhibited after AJAX page transition

I have an ajax transition which is this:
function fadeTransition(href = window.location.href) {
$('.fader').css({
'position': 'fixed',
// 'height': h,
'height': '100vh',
'width': '0',
'left': '0',
'top': '0',
'color': 'black',
'background-color': 'black',
'z-index': '300'
}).animate({
'width': '100vw',
}, 400, function() {
$('.slider-transition').load(href + ' .slider-transition', function() {
// EXECUTES ON CALLBACK
// $('.slider-transition').children('.slider-transition').unwrap();
// h = $(document).height();
$('.fader').animate({
'left': '100vw'
}, 400, function() {
slideShowInit();
initParalax();
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
$('.slider-transition').children('.slider-transition').unwrap();
// $('.slider-transition').parents('.slider-transition').unwrap();
});
});
});
}
It's a simple transition that loads the element from the next page into the element of the current page and by attaching all of the click events to the body as such:
$('body').on('click', '.main-menu li a, nav a, a.button, a.square, a.grow', function(event) {
event.preventDefault();
event.stopPropagation();
});
$("li").on("click", "a", function(event) {
var _href = $(this).attr("href");
history.pushState(null, null, _href);
fadeTransition(_href);
});
I've been able to circumnavigate the problem of click events being destroyed after the transition. The only problem that with the Woocommerce plugin in Wordpress, I can't possibly hope to traverse the entire assets folder of JS and replace
$('.a').on('click', function() {});
with
$('.body').on('click', 'a', function() {});
and attach all of the DOM events to the body like this and even then I'm only 70% sure this is the problem, does anyone know a way around this?

Remove an event handler with jQuery using off()
With jQuery to stop/remove existing "click" delegated event that interfere with your own custom click event, you could try to use off(), which is likely the contrary of on().
So with your code it should be:
jQuery(function($){
$(document.body).off('click', 'a');
$("li").on("click", "a", function(event) {
var _href = $(this).attr("href");
history.pushState(null, null, _href);
fadeTransition(_href);
});
});
It could solve your issue.

Slide menu reomove when I clicking window

The following code works true but. How do I remove her action when clicking window or document?
$(document).ready(function(){
$("#icon").click(function(){
if(! $("#icon").hasClass('active')){
$("#icon").toggleClass('active');
$("body").animate({ margin: "0 0 0 350px" }, 400 );
$('body').css({
'overflow': 'hidden',
'height': '100%'
});
}else{
$("#icon").removeClass('active');
$("body").animate({ margin: "0 0 0 0" }, 400 );
$('body').css({
'overflow': 'auto',
'height': 'auto'
});
}
});
});

You can use window, document selectors and unbind click event using jquery method off() :
$(window ,document).click(function(){
$("#icon").off('click');
});
Hope this helps.

To remove action you can use two jquery functions to disable events. http://api.jquery.com/off/ and http://api.jquery.com/unbind/.
$(window,document).bind("click",function(){
$("#icon").unbind("click");
// or use
$("#icon").off("click");
});

Only allow one jQuery function to execute at a time

I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();

A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.

Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');

Need to prevent mousehover over click in jquery

Hi have the following code:
$('img').on("mouseenter",function(){
//show overlay
});
$("#overlay").on("click",function(event) {
event.preventDefault();
//hide overlay
})
When i click on the overlay, it should close. But when i happen to be over an image it does not close.I receive both mouseclick and mouseenter events
How do i prevent this?
I am using jquery 1.10.2

When you are on image, it first goes in click event then mouseenter event. So, click event hides then mouseenter shows again. So, you can not hide layout when you are on the img. But, if you disable mouseenter event of img in a short duration, the problem will be solved in Chrome and FF.
As in jsfiddle change your js function as :
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'background-repeat':'no-repeat',
'background-attachment':'fixed',
'background-position':'center',
'z-index': 5000
}).on("click",function(e) {
hideOverlay();
unbindImgMouseEnter();
setTimeout(bindImgMouseEnter, 100);
}).hide();
bindImgMouseEnter();
});
function bindImgMouseEnter(){
$('img').on("mouseenter", showOverlay);
}
function unbindImgMouseEnter(){
$('img').off("mouseenter");
}
function showOverlay(){
$("#overlay").show();
console.log('showed');
}
function hideOverlay(){
$("#overlay").hide();
console.log('hidden');
}

Remove the mouseenter event, when you click the overlay.
$("#overlay").on("click",function(event) {
$('img').off("mouseenter"); // Remove the mouseenter event handler
event.preventDefault();
//hide overlay
});
Suggestion: better use .hover instead of mouseenter
$('img').on("hover",function(){
//show overlay
});
$("#overlay").on("click",function(event) {
$('img').off('hover');
event.preventDefault();
//hide overlay
})

objects disappear while sliding over them while they fade in

I have a problem with some jQuery fadeIn effect. This is actually on this website: website here. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
I have used this code for buttons:
HTML:
<nav>
<a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
<a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
<a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
<a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
<a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
<a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>
JQUERY:
$(document).ready(function(){
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500);
}, 300+100*i);
})(i);
}
});
JS FIDDLE HERE:
http://jsfiddle.net/tucado/9hhZW/
(slide mouse over buttons while fading in and you will know what I mean).
Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.
Thank you in advance for any solution for this problem.

Just return from your mouseenter and mouseleave handlers if the element is being animated, you can do that with .is(':animated') .
See working fiddle
UPDATE: My above solution will exit when the element is animating, but that also included the own animations of the mouseenter, mouseleave handlers, we want to only exit if it's the fadein animation, so to distinguish that I set a property called fading when starting to fading an element and remove it when it ends the fade effect, so we can check for this property in the mouseenter mouseleave handlers.
See new working fiddle
And I paste the code here:
$(document).ready(function(){
$("nav a").mouseenter(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).data('fading', true).fadeIn(500, function() {
$(this).data('fading', false);
});
}, 300+100*i);
})(i);
}
});

I think the problem is, that you stop the elements animation before they are initialized first (first fadeIn();)
I've created a fiddle for you using the fadeIn() callback to append the hover after showing first time:
$(document).ready(function(){
var appendHover = function () {
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
}
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500, function() {appendHover();});
}, 300+100*i);
})(i);
}
});
http://jsfiddle.net/9hhZW/2/