Develop Reference

i want to toggle between two functions this code works only one time but i want to make it work each time i click

let callOne = true;
let hamburger = document.getElementById("hamburger");
hamburger.addEventListener("click", (e) => {toggleFct();});
function one() {t1.play();callOne = false;}
function two() {t0.play(); callOne = true;}
function toggleFct() { callOne ? one() : two();}
let t1 = gsap.timeline({ paused: true, reversed: true });
t1.to(".div-first", { ease: "power2.in", x: "-200%", duration: 2 });
t1.to(".div-second", { ease: "power2.in", x: "-300%", duration: 2 },"-=2");
t1.to(".div-third", { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
t1.to(header, { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
t1.to(wrap, { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
let t0 = gsap.timeline({ paused: true, reversed: true });
t0.to(".div-first", { ease: "power2.in", x: "100%", duration: 2 });
t0.to(".div-second", { ease: "power2.in", x: "200%", duration: 2 }, "-=2");
t0.to(".div-third", { ease: "power2.in", x: "300%", duration: 2 }, "-=2");
t0.to(header, { ease: "power2.in", x: "400%", duration: 2 }, "-=2");
t0.to(wrap, { ease: "power2.in", x: "0%", duration: 2 }, "-=2");

let callOne = true;
let hamburger = document.getElementById("hamburger");
hamburger.addEventListener("click", (e) => {toggleFct();});
function one() {t1.play(0);callOne = false;}
function two() {t0.play(0); callOne = true;}
function toggleFct() { callOne ? one() : two();}

When I try to do the following :
let callOne = true;
function one() {console.log("one");callOne = false;}
function two() {console.log("two"); callOne = true;}
function toggleFct() { callOne ? one() : two();}
It works just fine...
btw you can rewrite
hamburger.addEventListener("click", (e) => {toggleFct();});
as...
hamburger.addEventListener("click", toggleFct)

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);
}
});
});

jQuery on click not working every other time

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;
});
});
}
});

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/

updating jqplot meter gauge after every 5 seconds

I am displaying jqplot meter gauge inside modal window and I want to update it after every 5 seconds. I wrote the following code but it is not working
$(document).ready(function(){
s1 = [Math.floor(Math.random()*(401)+100)];
plot3 = $.jqplot('meter',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
$('a[href=\"#yw1_tab_3\"]').on('shown', function(e) {
if (plot3._drawCount === 0) {
plot3.replot();
}
});
windows.setInterval(function() { plot3.destroy();
s1 = [Math.floor(Math.random()*(401)+100)];
plot3.replot();
}, 5000);
});
How can I update meter gauge every 5 seconds without updating whole page?

here is the fix: JsFiddle link
$(document).ready(function () {
var s1 = [Math.floor(Math.random() * (401) + 100)];
var plot3 = $.jqplot('meter', [s1], {
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals: [200, 300, 400, 500],
intervalColors: ['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
setInterval(function () {
s1 = [Math.floor(Math.random() * (401) + 100)];
plot3.series[0].data[0] = [1,s1]; //here is the fix to your code
plot3.replot();
}, 1000);
});