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);
});
Related
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/
I am creating a Simon game and it works on round one, but once your each round two it immediately says incorrect.
jsfiddle
I reset all variables between the rounds, but it still seems to save them as it instantly says "Game Over!"
JS:
function makeGuess() {
...
var checkForComplete = setInterval(function () {
if (yourAnswer.length >= round) {
clearInterval(checkForComplete);
yourString = yourAnswer.toString();
correctString = correctAnswer.toString();
if (yourString === correctString) {
alert('Correct');
round++;
yourAnswer = [];
correctAnswer = [];
yourString = "";
correctString = "";
playSimon();
}
else {
alert("Game Over!");
}
}
}, 500)
Here is the playSimon() function:
function playSimon() {
setTimeout(function () {
color = Math.floor(Math.random() * 4);
if (color == 0) {
correctAnswer.push(0);
$('#redButton').addClass('lightOn');
setTimeout(function () {
$('#redButton').removeClass('lightOn');
}, 500);
}
else if (color == 1) {
correctAnswer.push(1);
$('#blueButton').addClass('lightOn');
setTimeout(function () {
$('#blueButton').removeClass('lightOn');
}, 500);
}
else if (color == 2) {
correctAnswer.push(2);
$('#greenButton').addClass('lightOn');
setTimeout(function () {
$('#greenButton').removeClass('lightOn');
}, 500);
}
else if (color == 3) {
correctAnswer.push(3);
$('#yellowButton').addClass('lightOn');
setTimeout(function () {
$('#yellowButton').removeClass('lightOn');
}, 500);
}
i++;
if (i <= round) {
playSimon();
}
else {
makeGuess();
}
}, 700);
}
Why is it alerting Game Over instantly on round 2?
Because you are binding the click events multiple times:
function makeGuess() {
$('#redButton').click(function() {
yourAnswer.push(0);
});
$('#blueButton').click(function() {
yourAnswer.push(1);
});
$('#greenButton').click(function() {
yourAnswer.push(2);
});
$('#yellowButton').click(function() {
yourAnswer.push(3);
});
...
}
Each time makeGuess() is called, the buttons are bound yet another click event listener. First time it's done (first level), there's only 1 event listener so it's working correctly, but from the second level onward each buttons are bound with 2 identical click listener, and when the player click a button, the function is called twice => yourAnswer is pushed twice immediately, which result in an incorrect answer => game over.
A quick fix is to unbind all click events on the 4 buttons before binding them all again, optimally immediately before the next playSimon() is called.
if (yourString === correctString) {
alert('Correct');
round++;
yourAnswer = [];
correctAnswer = [];
yourString = "";
correctString = "";
$('#redButton').unbind( "click" );
$('#blueButton').unbind( "click" );
$('#greenButton').unbind( "click" );
$('#yellowButton').unbind( "click" );
playSimon();
} else {
alert("Game Over!");
}
JsFiddle: https://jsfiddle.net/dfk2am7e/1/
AVAVT is right, however instead of unbinding, rather just bind the event once off.
I have updated your JSFiddle and optimized your code a little bit.
https://jsfiddle.net/dfk2am7e/3/
// Run this when the page has loaded to ensure HTML is there.
$(function(){
$('#redButton').click(function() {
yourAnswer.push(0);
});
$('#blueButton').click(function() {
yourAnswer.push(1);
});
$('#greenButton').click(function() {
yourAnswer.push(2);
});
$('#yellowButton').click(function() {
yourAnswer.push(3);
});
});
I am trying to check whether a click on an element is a single click or a double click.
I am trying with this code.
var clk_ch = document.getElementById('clk');
function singleClick() {
alert("single click");
}
function doubleClick() {
alert("double click");
}
var clickCount = 0;
clk_ch.addEventListener('click', function() {
alert();
clickCount++;
if (clickCount === 1) {
singleClickTimer = setTimeout(function() {
clickCount = 0;
singleClick();
}, 400);
} else if (clickCount === 2) {
clearTimeout(singleClickTimer);
clickCount = 0;
doubleClick();
}
}, false);
I am not getting any alert. Where am I going wrong? clk is the id of the clicked element
<input type="image" src="button.gif" id="clk" >
No need of using setTimeout. You can add dblclick event listener.
document.addEventListener("DOMContentLoaded", function (event) {
var clk_ch = document.getElementById('clk');
clk_ch.addEventListener('click', singleClick, false);
clk_ch.addEventListener('dblclick', doubleClick, false);
});
DEMO
In jquery:
$('#clk').on('click', singleClick).on('dblclick', doubleClick);
DEMO
I'm not sure why the interval isn't looping. I've followed tutorials exactly but not luck. Suggestions?
$(document).ready(function(){
setInterval(function() {
$('.current').removeClass('current').next().addClass('current');
}, 2000);
});
Updated: http://jsfiddle.net/pa7aU/3/
One possible ugly solution:
setInterval(function() {
var $current = $(".current").removeClass("current"),
$next = $current.next();
if ($next.length)
$next.addClass("current");
else
$current.siblings(":first").addClass("current");
}, 2000);
DEMO: http://jsfiddle.net/pa7aU/4/
$(document).ready(function () {
var $li = $('ul li'), i = 0, l = $li.length;
setInterval(function() {
$li.removeClass('current').eq(i % l).addClass('current');
i++;
}, 2000);
});
http://jsfiddle.net/chg4J/
When you reach the last element, you need to go back to the beginning, not use .next().
$(document).ready(function () {
setInterval(function () {
var next = $('.current').removeClass('current').next();
if (next.length == 0) {
next = $("li:first");
}
next.addClass('current');
}, 2000);
});
FIDDLE
When you are at the last li, next() doesnt go to the first.
An easy fix is to add that after :
if($('.current').length <= 0) $('li:first').addClass('current');
Fiddle : http://jsfiddle.net/pa7aU/5/
Just to add something new to the mix:
$(document).ready(function () {
setInterval(function () {
$('li').eq(($('.current').removeClass('current').index() + 1) % $('li').size()).addClass('current');
}, 200);
});
In my game I want to make sure the start button is only clicked once each time it appears to stop it loading the function more than once.
I have written some code that counts the clicks and unbinds if the count is greater than zero.
var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {
oneClick++;
if (oneClick > 0) {
$(this).unbind("click");
}
newGame();
});
This works fine but I need a way to bind it again ready for the next time it appears (When the restart-btn is clicked) so I have written this to reset the count.
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
});
For some reason this doesn't do the job and I am looking to SO for a soloution
You're not binding again but just changing oneClick, which isn't even tested as the event handler to $(".start-btn-wrapper") isn't binded anymore.
But instead of unbinding/rebinding, which is costly, why not just test oneClick :
$(".start-btn-wrapper").bind("click", function () {
if (oneClick++ > 0) return;
newGame();
}
Note that if you just need two states, a boolean would be clearer :
var clickable = true;
$(".start-btn-wrapper").bind("click", function () {
if (!clickable) return;
newGame();
clickable = false;
}
$(".restart-btn").click(function () {
resetGame();
clickable = true;
});
jQuery has a built in method for exactly this use. It is .one()
So all you have to do is
$(".start-btn-wrapper").one('click',newGame);
and for the restart
$(".restart-btn").click(function () {
resetGame();
$(".start-btn-wrapper").one('click',newGame);
});
simple
var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {
if (oneClick > 0) {
return false;
}
oneClick++;
newGame();
});
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
});
var oneClick = 0;
function clickHandler() {
oneClick++;
if (oneClick > 0) {
$(".start-btn-wrapper").unbind("click");
}
newGame();
}
$(".start-btn-wrapper").bind("click", clickHandler);
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
$(".start-btn-wrapper").bind("click", clickHandler);
});