We Keep Coding

jQuery SetTimeout for Show / Hide div does not work

I am writing a jQuery which is supposed show/hide a series of images after an image is clicked. It basically, hides the current image and shows the next one when onClick event.
The function I have written so far works except one feature: On image 3, I want to set a timer and then switch to image 4, even if the user hasn't click it.
I am using a setTimeout and the timeout triggers except that it does not switch to next image.
This is my function:
(function($) {
$(document).ready(function () {
var count = 0;
$('.squirrel').click(function () {
$(this).hide();
var next = $(this).next();
if (next.length == 0){
next = $(this).parent().find('.squirrel').first();
count = -1;
}
next.show();
if (count == 1) {
setTimeout(
function() {
alert("Should switch to 4 now but it doesn't work");
$(this).hide();
var next = $(this).next();
next.show();
count++;
}, 2000
);
} else {
count++;
}
});
});
})(jQuery);
This is the HTML:
<div id="squirrelContainer">
<img src="1.png" class="squirrel default">
<img src="2.png" class="squirrel">
<img src="3.png" class="squirrel" id = "3">
<img src="4.png" class="squirrel">
</div>
Here's a JSFiddle.

Because you are using the same image not the next one.
(function($) {
$(document).ready(function () {
var count = 0;
$('.squirrel').click(function ()
{
$(this).hide();
var next = $(this).next();
if (next.length == 0)
{
next = $(this).parent().find('.squirrel').first();
count = -1;
}
next.show();
if (count == 1)
{
let that = $(this).next();
setTimeout(
function()
{
console.log("Should switch to 4 now but it doesn't work");
that.hide();
var next = that.next();
next.show();
count++;
}, 2000
);
}
else
{
count++;
}
});
});
})(jQuery);
https://jsfiddle.net/dyt9opLz/

JQuery, toggle/accordion menu issues when reloading page

here is my code...
var menuToggle = false;
$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();
// Init Tooltips
$(function () {
$('.ipsg-tab').tooltip();
});;
// Init Menu
accordionMenu();
// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
if (!menuToggle) {
menuToggle = true;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$('.ipsg-container').addClass('ipsg-menu-collapse');
} else {
menuToggle = false;
$('.ipsg-container').removeClass('ipsg-menu-collapse');
}
});
});
function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
if (!menuToggle) {
if (!$(this).parent().hasClass('state-selected')) {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().slideDown('fast');
$(this).parent().addClass('state-selected');
} else {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
}
}
return false;
});
$('.sg-accordion > h3 > a').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().show();
$(this).parent().addClass('state-selected');
}
});
$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
}
});
$('.sg-accordion > h3 > a').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
}
I am trying to have my toggle menu closed or open depending on the page reload. So if i am using hamburger menu, and click on a link, i want the hamburger menu to stay after reload. Same with having the menu opened up, i want it so if i click on those links, for the menu to stay open on reload.
anyone have any ideas?

This is the sort of thing I would use localStorage or cookies for. You can set an variable for either that would allow for you to dictate if the menu should be opened or closed.

Asked Previously. You can use cookies for that as it is easy to implement and maintainable.
Link is here Jquery UI Accordion menu saving menu state even after refresh

How to use jQuery longclick?

I am using datatables plugin and using this for click:
$('.datatable').on('click', 'img#openpli-playlist', function(e) {
alert("You clicked OPENPLI ICON!");
});
Now I need to use jQuery plugin longclick and using this:
$('.datatable').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
So the problem is how can I add selector to longclick I try this for selector but is not working:
$('.datatable img#openpli-playlist').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
Can someone give me solution why is this not working?
Thanks

Simple fix will be:
var tmr = 0;
$(element).mousedown(function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).mouseup(function () {
clearTimeout(tmr);
});
Now this can be used in delegation too:
var tmr = 0;
$(static_parent).on("mousedown", element, function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).on("mouseup", element, function () {
clearTimeout(tmr);
});
Your solution:
var tmr = 0;
$('.datatable').on('mousedown', 'img#openpli-playlist', function(e) {
tmr = setTimeout(function () {
alert("You clicked OPENPLI ICON!");
}, 1000);
}).on('mouseup', 'img#openpli-playlist', function(e) {
clearTimeout(tmr);
});
As an improvement to previous answers, you can distinguish between click and long press in this way:
var tmr = 0;
var islong = 0;
$(element)
.mousedown(function () {
tmr = setTimeout(function () {
// Handle the long-press
alert("You clicked for 1 second!");
console.log("You clicked for 1 second!");
islong = 1;
}, 1000);
})
.mouseup(function () {
if (islong == 0) {
// Handle the click
alert("This is a click!");
console.log("This is a click!");
}
islong = 0;
clearTimeout(tmr);
});

jQuery to vertically center text only loads after page resize

I have the following jQuery to vertically center text next to an image but it only loads after the page is re-sized.
$(window).load(function () {
$(function () {
var changeheight = function () {
$('.vertical-align').height($('.featurette-image').height());
}
$(window).on('resize', function () {
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
})
})
});

Remove window resize and should work on load
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});

Idk why OP deleted his answer but it was correct. I had to remove window resize
The following code is correct:
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});

jQuery - Click function doesn't fire

I'm having problems with firing of a function whenever my ID is clicked. Currently, this is how my code looks:
$(document).ready(function () {
if (self != top) {
top.location.replace(location.href);
}
$(document).mousedown(function (e) {
if (e.button == 2) {
console.log('mousdown');
$(window).blur();
}
});
$(document).mouseup(function (e) {
if (e.button == 2) {
console.log('mousup');
$(window).blur();
}
});
var $iframe_height = $(window).innerHeight() - 90;
$('iframe').attr('height', $iframe_height + 'px');
$(window).resize(function () {
var $iframe_height = $(window).innerHeight() - 90;
$('iframe').attr('height', $iframe_height + 'px');
});
$('.message').html('<div class="alert alert-warning">Waiting for advertisement to load...</div>');
$('.close').on('click', function () {
window.open('', '_self', '');
window.close();
});
var $seconds = 5;
var $window_width = $(window).innerWidth();
var $width_per_second = $window_width / $seconds;
var $timer = null,
$current_second = 0;
setTimeout(function () {
if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) {
$('body').addClass('ready');
$('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>');
}
}, 3000);
document.getElementById("website").onload = function () {
if ((!$('body').hasClass('done')) && (!$('body').hasClass('blocked')) && (!$('body').hasClass('ready'))) {
$('body').addClass('ready');
$('.message').html('<div class="alert alert-info">Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to start viewing this advertisement.</div>');
}
};
$("#start").click(function () {
$('#website').focus();
$('.message').html('<div class="alert alert-info"><b id="seconds">' + parseFloat($seconds - $current_second) + '</b> seconds remaining (do not leave this page).</div>');
if ($timer !== null) return;
$timer = setInterval(function () {
if ($current_second == $seconds) {
clearInterval($timer);
$('.message').html('<div class="alert alert-success">Checking if you won, please wait…</div>');
var $id = 10977;
var $reffbux_fp = new Fingerprint();
var $reffbux_fp = $reffbux_fp.get();
$.ajax({
url: 'http://reffbux.com/account/register_roulette',
type: 'post',
data: {
id: $id,
fp: $reffbux_fp
},
success: function (result, status) {
$('html, body').animate({
scrollTop: 0
}, 500);
$('body').addClass('done');
$('.melding').fadeOut(0).fadeIn(500);
$('.message').html(result);
$('.counter_bar').addClass('done');
}
});
return false;
} else {
var $counter_bar_width = $('.counter_bar').innerWidth();
$('.counter_bar').css('width', parseFloat($counter_bar_width + $width_per_second).toFixed(2));
$current_second++;
$("#seconds").text(parseFloat($seconds - $current_second));
}
}, 1000);
});
$('body').mouseleave(function () {
if ((!$(this).hasClass('done')) && (!$(this).hasClass('blocked')) && ($(this).hasClass('ready'))) {
$('.message').html('<div class="alert alert-error">You navigated away from the advertisement. Click <b id="start" style="cursor:pointer;text-decoration:underline;">here</b> to resume.</div>');
clearInterval($timer);
$timer = null
}
});
});
A text with id="start" will be generated when the iframes content is loaded. The problem is, whenever I click on the id="start" nothing happens. Nothing. The console log doesn't report any error before I click nor does it report any error after I've clicked.
I can't seem to find what the problem is.

You have to use the jquery on to bind events to dynamically created elements.
$('.message').on('click', '#start', function(){
Where .message is the elelment your #start element is in.