Develop Reference

DOM change - no effect. Effect visible only if changed with timeout

Weird problem. I'm modifying shop template:
https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/
At this moment when you hover product's picture there will show "add to cart" button. This is .
Under picture there is price
I prepared code:
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
Nothing happens. This code work only if I set timeout:
setTimeout(function() {
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
}, 10000);
Of course timeout it's not a solution. I was trying to find out minimal time to obtain best behavior but it's impossible. I have feeling that every browser (and version...) needs personalized time setting.
I thought that after 24-hour break I will get some brillant idea, but that doesn't work, no more ideas.
--- EDIT ---
OK, thanks for pointed mixed common js with jquery - I will correct that later.
jQuery(document).ready(function(){
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
console.log(el);
});
});
That's logical that var from should be inside ready but this still doesn't work. No effect.
If I use in loop console.log it will return for me html code of el.
--- EDIT ---
Thanks. While testing I noticed something. I wanted append element .woocommerce-Price-amount.amount to element .product-button-wrap. But how can I do that if element .product-button-wrap isn't originally in source? This object is created dynamically (I don't know how).
-- EDIT --
OK. I checked JS files and found code adding to DOM .product-button-wrap so I putted my code there and now everything works. Thanks for help.

The problem is because you're running your code before the DOM has loaded. You need to retrieve the elements within the document.ready event handler.
Also note that you have an odd mix of native JS and jQuery methods. I'd suggest using one or the other, like this:
jQuery(function($) {
$('.woocommerce-Price-amount.amount').each(function() {
$(this).parent().parent().find('.product-button-wrap').append(this);
});
});
Also note that .parent().parent() should be replace by a single call to closest(), but I can't give you an exact example of that without seeing your HTML.

Scroll event won't fire what so ever

I have a (fairly simple) issue and I'm breaking my head over it.
The issue is pretty simple - scroll event won't fire (ever).
I'm writing this angular project, so I've tried the following:
angular.element($window).bind('scroll', ()=> {
console.log('scroll!');
if (!scope.scrollPosition) {
scope.scrollPosition = 0;
}
// Alerting for test cause wtf is going on
scope.boolChangeClass = this.pageYOffset > 600 ? alert(true) : alert(false);
scope.scrollPosition = this.pageYOffset;
scope.$apply();
}
);
but nothing happened. (assume $window is intact and that i'm using webpack etc.)
This example works great if I change the scroll to click. weird.
So I've tried vanilla~~!
window.addEventListener('scroll',function(){
console.log('test')
})
This attempt works on every other website except mine (gotta admit it's classic).
So - has anyone ever dealt with this and knows what's going on?
I assume that some other element is consuming this event at early stage thus not letting it bubble up. Yet this is just an assumption.'
Would love to understand this :)
=== EDIT ===
I've tried to see all the fired events using monitorEvents(window) (using Chrome) and I see every event that's being fire except the scroll..

Looks like it's the body element that is scrolling. Try adding the following code in the console.
document.body.addEventListener('scroll', function() {
console.log('test');
});

Equalizing within tabs Foundation 6

I can't figure out how to get it to work. The documentation seems a little sparser than last time and doesn't include examples. Any help would be appreciated.
http://foundation.zurb.com/sites/docs/equalizer.html#applyheight
$('.tabs').on('change.zf.tabs', function() {
// Trying to trigger equalizer to equalize
console.log('test'); // This is working
});
Update - I think this might be closer, but it's still not working
var elem = new Foundation.Equalizer($('.parent-row'));
$('.tabs').on('change.zf.tabs', function() {
elem.applyHeight();
});

Does your content equalize if your browser is resized? If so, you can try to force it on tab selection by adding Foundation.reInit('equalizer'); in your change.zf.tabs event handler.
Please note: I'm experiencing similar issues and found this to work..but it may not be the most optimal.

$window.onblur randomly stops working

I have it running fine on safari right now and not always working in chrome:
app.controller(.... function($window){
$window.focus();
$window.onfocus = function(){
$scope.inFocus = true;
};
$window.onblur = function (){
console.log("onblur");
$scope.inFocus = false;
};
});
The console.log is not always triggered. I was wondering if that was a bug or something I am doing wrong?
Update: I tried the solution given by #Gabe. It is still breaking sometimes, I am wondering if another action is interfering with it. It does look random though...
Update 2: I still don't know how it gets stuck, but I know how to get it unstuck:
I click on an input in the window to focus it.
I click outside of the input to unfocus.
I switch tab and back in. It works again.

Try using the API for angular.element instead
angular.element($window).bind('blur', function (){
console.log("onblur");
$scope.inFocus = false;
});
http://plnkr.co/edit/khYHeJlvn2uCzKeTjndM

dont know why touch events triggered twice

I'm using Jquery Mobile, and my touch events are being triggered twice. At first I thought it might be an overlap between mouse events and touch events, but I tried to unbind mouse events on tablets/smartphones and the events are still being triggered twice.
Here is my code
//Tablet Features
var eventType = {
swipeleft: '-=100',
swiperight: '+=100'
}
$('#navMenu').bind('swipeleft swiperight',
function(e) {
$('#prbBtnHolder').animate({left:eventType[e.type]});
//alert(e.type);
}
);
//Device Detection
(function () {
var agent = navigator.userAgent.toLowerCase();
var isDevice = agent.match(/android/i);
if (isDevice == 'android') {
//alert(isDevice);
$('*').unbind('mousedown').unbind('mouseout').unbind('mousemove').unbind('mouseup');
}
})();
I've been trying to figure this out for a while, please help if you have any ideas.
UPDATE
I managed to solve the problem locally by placing the touch handlers outside the .ready() method. However, when i run the page on the server, the double trigger happens again. Now I'm completely stumped. Why are two identical pages (literally identical) behaving differently locally and on the server?

I had the same problem and fixed it with a little tweak around... I don't recommend this for the exact solution but my take you out of the problem fast.
I define a global Flag
var bDidPan=true;
and inside the trigger wrote the following:
if (bDidPan) {
bDidPan = false; // IT'S IMPORTANT TO PUT THIS FIRST
//code to execute when triggers
}
else
{
bDidPan = true;
}
and that did the trick. You can do the trick with numbers (It worked better with numbers for me!)
Hope it helps!

This sounds like you're putting your scripts into the <body> tag. If you do that, they'll get run twice. I've had this very same thing happen and went a little balder for the trouble and frustration. Make sure all your scripts are inside the <head> tag.