jQuery on click not working every other time - javascript

I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.
JS:
$(document).ready(function () {
var sliding = false;
var introButtons = anime({
targets: '.introButtons',
scale: 0.95,
duration: 800,
easing: 'easeInOutQuart',
direction: 'alternate',
elasticity: 200,
loop: true
});
//Energy Track
$('#for-energy').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#screen2').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Energy back
$('.energy .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen2').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For health
$('#for-health').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#health').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Health back
$('.health .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#health').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For fun
$('#for-fun').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#fun').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//For fun back
$('.fun .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#fun').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
});
I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.
When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.
You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/
I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click

in some function you miss to make sliding = false
and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle
$('#island').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('.guide').fadeOut('slow', function(){
$('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});

Related

Muuri multiple grid data

How i can draw data-id for each column item in my function updateIndices simillar to updateColumnIndices?
I want to make my grid more dynamic.
I using only javascript and Muuri lib for drag and drop.
Thank you for help.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.
My code for this task under spoiler
function setupItemContainer() {
let itemContentContainer = document.querySelectorAll('.board-column-content');
for(let i = 0; i < itemContentContainer.length; i++)
{
if(!itemContentContainer[i].classList.contains('muuri'))
{
itemContainers.push(itemContentContainer[i]);
muuriItems = new Muuri(itemContentContainer[i], {
itemDraggingClass: 'muuri-item-default-dragging',
dragSortHeuristics: {
sortInterval: 10,
minDragDistance: 5,
minBounceBackAngle: Math.PI / 2
},
dragPlaceholder: {
enabled: true,
duration: 100,
easing: 'ease',
createElement: null,
onCreate: null,
onRemove: null
},
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
itemPlaceholderClass: 'muuri-item-placeholder'
})
.on('dragStart', function (item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
columnGrids.forEach(function (muuriItems) {
muuriItems.refreshItems();
});
})
.on('layoutStart', function () {
muuriColumns.refreshItems().layout();
})
.on('move', updateIndices)
.on('sort', updateIndices);
columnGrids.push(muuriItems);
}
}
}
function setupColumnsContainer() {
muuriColumns = new Muuri(gridElement, {
itemDraggingClass: 'muuri-item-column-dragging',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
})
.on('move', updateColumnIndices)
.on('sort', updateColumnIndices);
}
function updateColumnIndices() {
muuriColumns.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
function updateIndices() {
muuriItems.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});

JavaScript issue with bouncing on windows' edges

I'm trying to add on my website a script making a picture bouncing on the edges of the web browser, like the old DVD logo. At first it works, but when you reload the page, the limits are broken and the picture goes out of the frame.
Can't explain what's wrong, could anyone help me with this? Thanks :)
```JavaScript
(function ($, window, undefined) {
$.fn.headgaelify = function (options) {
var settings = $.extend({
horizontal: true,
vertical: true,
speed: 100, // In pixels per second
container: $(this).parent(),
bumpEdge: function () {}
}, options);
return this.each(function () {
var containerWidth, containerHeight, elWidth, elHeight, move, getSizes,
$el = $(this);
getSizes = function () {
containerWidth = settings.container.outerWidth();
containerHeight = settings.container.outerHeight();
elWidth = $el.outerWidth();
elHeight = $el.outerHeight();
};
move = {
right: function () {
$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.left();
}});
},
left: function () {
$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.right();
}});
},
down: function () {
$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.up();
}});
},
up: function () {
$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.down();
}});
}
};
getSizes();
if (settings.horizontal) {
move.right();
}
if (settings.vertical) {
move.down();
}
// Make that shit responsive!
$(window).resize( function() {
getSizes();
});
});
};
})(jQuery, window);
$(document).ready( function() {
$('.headgael').headgaelify({
speed: 300,
bumpEdge: function () {
var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 100%)";
$('.headgael .logo').css('fill', newColor);
}
});
});

How to destroy lightSlider on resize?

I'm like to use the lightSlider on my website to slide through some divs, but I want to use this only on mobile device. So I want to destroy the slider on resize after reaching a specific breakpoint.
My script look like this:
function theSlider() {
var slider = $('#content-slider').lightSlider({
gallery: false,
item: 1,
loop: false,
slideMargin: 0,
enableDrag: true,
keyPress: true,
pager: true,
adaptiveHeight: false,
responsive: [{
breakpoint: 768,
settings: {
item: 2,
slideMove: 1,
slideMargin: 6,
}
}, {
breakpoint: 600,
settings: {
item: 1,
slideMove: 1
}
}]
});
}
function initAufhaenungSlider() {
var resizeTimer;
if ($(window).width() > 768) {
initTeaserHeight();
$('#content-slider').parent().parent().find('.lSAction, .lSPager').remove();
$('content-slider').children().removeAttr('style');
} else {
theSlider();
$('.content-slider .col-item').css('width', '100%');
}
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($(window).width() < 768) {
console.log('< 767');
$('.lSPager').remove();
var slider = $('#content-slider').lightSlider();
slider.destroy();
$('.content-slider .col-item').css('width', '100%');
theSlider();
} else {
var slider = $('#content-slider').lightSlider();
slider.destroy();
console.log('> 767');
$('.content-slider .col-item').css('width', '33.33333333%');
initTeaserHeight();
$('.lSPager').remove();
$('.lSAction').remove();
$('#content-slider').parent().removeClass('lSSlideWrapper').removeAttr('style');
}
}, 250);
initTeaserHeight();
});
}

jQuery Knob update value with animate

I'm trying to build clock using jQuery Knob.
My clock is working (http://jsfiddle.net/Misiu/9Whck/1/), but right now I'm trying to add some extras to it.
At beginning I want to have all knobs set to 0, then using animate I want to animate their value to current time and then start normal timer update.
My code looks like this (demo here: http://jsfiddle.net/Misiu/cvQED/81/):
$.when(
$('.h').animate({
value: h
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.m').animate({
value: m
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.s').animate({
value: s
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
})).then(function () {
myDelay();
});
function myDelay() {
var d = new Date(),
s = d.getSeconds(),
m = d.getMinutes(),
h = d.getHours();
$('.h').val(h).trigger("change");
$('.m').val(m).trigger("change");
$('.s').val(s).trigger("change");
setTimeout(myDelay, 1000)
}
In when I must call animate for every knob separately, but I would like to use data-targetValue and to have only one animate inside when.
Can this be done?
if you want to use data-targetValue you need to change your js like this
$('.h').data('targetValue', h);//$('.h').attr('targetValue', h);
$('.m').data('targetValue', m);
$('.s').data('targetValue', s);
//...
$.when(
$('.knob').each(function(){//each .knob
$(this).animate({//animate to data targetValue
value: $(this).data('targetValue')
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change')
}
});
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/83/
or without .each
$.when(
$('.knob').animate({
value: 100
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change')
}
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/84/

Categories

Resources