So I'm trying to be able to trigger a script using a combinations of keypresses.
var down = {
};
$(document).chardown(function (e) {
down[e.charCode] = true;
}).charup(function (e) {
if (down[68] && down[69] && down[86]) {
var nextButton = document.getElementsByClassName('button-next') [0];
nextButton.click();
}
down[e.keyCode] = false;
});
This is the code I've got so far. So the intention is (afaik) to trigger the
var nextButton = document.getElementsByClassName('button-next') [0];
nextButton.click();
When I press e+d+v. But it isn't working. And if I only use the above part it keeps changing episode (Obvioulsy).
I didn't find any documentation related to chardown and charup in jquery or greasemonkey.I think you were trying to use keydown and keup. You should replace charCode with keyCode.
var down = {};
$(document).keydown(function (e) {
down[e.keyCode] = true;
}).keyup(function (e) {
if (down[68] && down[69] && down[86]) {
alert("Hello");
}
down[e.keyCode] = false;
});
Related
I'm making a responsive web site, and I have some problems at resize.
I using media query at ww<1280, ww<1024, ww<640, then controll elements with Jquery Functions.
when document loaded, media query and functions are worked well.
but, when I try some jquery functions then resize window, there are so many problems.
one of function I wrote is,
var menuOpen = function() {
var ctryBtn = $(".countryMenu input[type=button]");
var ctryMenu = $(".countryMenu");
var subGnb = $("#subGnb");
var gnbBtn = $("#header button.mobileGnbBtn");
var myGnb = $("#gnb");
var schBtn = $(".mobileFindBtn");
var schMenu = $(".utilMenu");
var gnbDown = function () {
$("#gnb ul").append("<li class='mobileSiteMap'><a href='siteMap.html'>Site Map</a></li>");
myGnb.slideDown(500,function () {
$(".mobileGnbBtn").css({
"width":"37px",
"height":"37px",
"background-image":"url(image/common/btn-close-mobile.png)",
"background-size":"cover"
});
});
};
var gnbUp = function () {
if ($(window).width() <= 623) {
myGnb.slideUp(500, function () {
$(".mobileSiteMap").remove();
$(".mobileGnbBtn").css({
"width":"43px",
"height":"37px",
"background-image":"url(image/common/btn-menu-mobile.png)"
});
});
} else {
$(".mobileSiteMap").remove();
return false;
}
};
ctryBtn.on("click", function () {
if(isSubGNB === false){
subGnb.slideDown(500);
isSubGNB = true;
} else {
subGnb.slideUp(500);
isSubGNB = false;
}
});
gnbBtn.on("click", function () {
if(isGNB === false){
if(isSubGNB === true || isSearch === true){
subGnb.slideUp(500);
isSubGNB = false;
schMenu.slideUp(500);
isSearch = false;
ctryMenu.fadeIn(300);
}
gnbDown();
isGNB = true;
} else {
gnbUp();
isGNB = false;
}
});
schBtn.on("click", function () {
if (isSearch === false) {
if (isGNB === true || isSubGNB === true ) {
gnbUp();
isGNB = false;
subGnb.slideUp(500);
isSubGNB = false;
}
ctryMenu.fadeOut(100);
schMenu.slideDown(300);
isSearch = true;
} else {
schMenu.slideUp(100);
isSearch = false;
ctryMenu.fadeIn(300);
}
});
};
#gnb is absolute positioned at ww<640, invisible(display:none), and different children elements setting with another ww sizes.
#gnb is relative positioned at upper 640px ww.
Then I wrote resize event like:
$(window).on("resize", function () {
var gnbPC = function () {
$("#gnb").css({
"width":"410px",
"height":"76px",
"letter-spacing":"-0.04em",
"margin-left":"26.866%"
});
};
var toggleMobile = function () {
if ($(window).width() <= 623 ) {
$("#subGnb").css({"display":"none"});
} else {
gnbPC();
$("#subGnb").css({"display":"none"});
}
};
clearTimeout(timer);
timer = setTimeout(toggleMobile, delta);
});
I set var delta = null; var timer = null;
Under 640px ww, when I click button, #gnb slideDown, and slideUp well.
when #gnb slideUp, then I try resize to upper 640px,
there is no #gnb because it had invisibled when slideUp() finished.
So I try to give it CSS set(default value of CSS ww>640),
but it is written inline, then mediaQuery didn't work.
I want some solution, when I trying resize window,
function work then reload for default setting for ww size.
Or, solve this resizing problems.
I want reset when resize,
if #gnb opened, then I try resize, I want it closed then change to default setting for ww size.
Im trying to allow up/down keys in jqGrid rows and trigger a document click function but my calling methods doesnt work correctly. This code :
$("#table_list_1").on("keyup", "tr", function(e)
{
// $("#table_list_1").unbindKeys(e);
//$("#table_list_1").bindKeys(e);
if(e.keyCode == 38 || e.keyCode == 40) //up/down arrow override
{
var gridArr = $('#table_list_1').getDataIDs();
var selrow = $('#table_list_1').getGridParam("selrow");
var curr_index = 0;
for(var i = 0; i < gridArr.length; i++)
{
if(gridArr[i]==selrow)
curr_index = i;
}
if(e.keyCode == 38) //up
{
if((curr_index-1)>=0)
$('#table_list_1').resetSelection().setSelection(gridArr[curr_index-1],true);
}
if(e.keyCode == 40) //down
{
if((curr_index+1)<gridArr.length)
$('#table_list_1').resetSelection().setSelection(gridArr[curr_index+1],true);
}
// $(document).on('click', '#table_list_1 tr');
//$('#table_list_1 tr').click();
//$('#table_list_1tr').jqGrid('setSelection',curr_index+1,true)
//var c = jQuery.Event("click");
//$(document).trigger(c);
$('#table_list_1 tr').trigger('click'); //any of these does not working right.
}
});
like this, ive tried various calling method. This is document on click:
try {
$(document).on('click', '#table_list_1 tr', function (e) {
alert();
var id = $(this).find('td:nth-child(1)').text();
var lastname = $(this).find('td:nth-child(2)').text();
var firstname = $(this).find('td:nth-child(3)').text();
document.getElementById("urunad").value = firstname;
// alert(id); code goes on...
i couldnt worked it correct. Do you have any ideas where do i go wrong?
After creating your jqgrid use bindKeys as in the following code
$("#table_list_1").jqGrid('bindKeys');
I have a page that is similar to http://tv.sky.com/tv-guide/#/day/0.
I used "DragScroll" to make the program area work, and it works.
But here's the problem, I need to prevent the a for keep getting clicked after the drag. So I tried using preventDefault(), and actually it works! but how do I resume the link back so the user can click on it if they weren't dragging? What's could be the event for it?
You can try to use this code:
var down = false;
var drag = false;
$('...').mousedown(function() {
down = true;
}).mouseup(function() {
down = drag = false;
}).mousemove(function() {
if (down) {
drag = true;
}
}).on('click', 'a', function(e) {
if (drag) {
e.preventDefault();
}
});
used something similar to setTimeout instead.
var golocation = function() {
var href = $(this)[0].dataset.href;
window.location = href;
}
var start_time;
$('a')
.on('mousedown', function(e) {
start_time = new Date().getTime();
})
.on('mouseup', function(e) {
var now = new Date().getTime();
if (now - start_time < 100) {
golocation.call(this);
};
});
I'm making my own player with drumpad and i need help to assign functions to keyboard keys. I've got playlist with (now) 3 sounds:
var playlist = [
{
artist: "Snare",
title: "Snare",
source: "Snare.wav"
},
{
artist: "Kick",
title: "Kick",
source: "Kick.wav"
},
{
artist: "Clap",
title: "Clap",
source: "Clap.wav"
},
];
I've got some functions which i'm running by buttons:
var currentSong = 0;
var play = function() {
var audio = document.getElementById("audio1");
audio.play();
}
var pause = function() {
var audio = document.getElementById("audio1");
audio.pause();
}
var jeden = function() {
var audio = document.getElementById("audio1");
currentSong = 0;
audio.src = playlist[currentSong].source;
}
var dwa = function() {
var audio = document.getElementById("audio1");
currentSong = 1;
audio.src = playlist[currentSong].source;
}
var trzy = function() {
var audio = document.getElementById("audio1");
currentSong = 2;
audio.src = playlist[currentSong].source;
}
And the html:
<body>
<audio autoplay="autoplay" ontimeupdate="showinfo()" id="audio1"
controls="controls"></audio>
<br/>
<button onclick="jeden()">1</button>
<button onclick="dwa()">2</button>
<button onclick="trzy()">3</button>
</body>
I think the essiest way is to assign buttons to keyboard keys. Anybody can help me?
dzień dobry
The code will be something like this. You can change keypress() to keyup() or keydown() if suitable - check the documentation of those functions to appreciate the differences.
$('body').keypress(function( event ) {
if ( event.which == 49 ) {
jeden();
}
});
I referred to this page to determine the number 49 means key 1:
https://css-tricks.com/snippets/javascript/javascript-keycodes/
I should mention this is a jQuery solution and you will need to learn some basic jQuery setup. It is a popular approach to solving this problem. You will also be able to use jQuery to do your existing stuff a much nicer way.
Here is an example. https://jsfiddle.net/7j0krzx5/
use this
$(document ).on( "keydown", function(event) {
if (event.which === 80) // P key
{
event.preventDefault();
// do something e.g
}
else if (event.which === 78) // N key
{
event.preventDefault();
// do something
}
// console.log(event.which);
});
JSFiddle example
If you don't want to use jquery
var play = function() {
alert("Play");
}
var next = function() {
alert("Next");
}
function keyDownListener(event){
var keyCode = ('which' in event) ? event.which : event.keyCode;
if(keyCode === 80){ // P key
event.preventDefault();
play()
}
else if (keyCode == 78 ) { // N key
event.preventDefault();
next();
}
}
document.addEventListener("keydown", keyDownListener, false);
JSFiddle example
I have a textbox has a numeric value.
now what I want is to keep increasing that numeric value while im pressing and holding any of arrow keys.
I know how to do this if I was pressing only one time. it will be increased by 1 only. but what If I want to keep increasing the value while i'm holding the arrow keys. how to do that?
thanks
There's a small jQuery plugin for doing this:
https://github.com/nakupanda/number-updown
Usages:
$('#simplest').updown();
$('#step').updown({
step: 10,
shiftStep: 100
});
$('#minMax').updown({
min: -10,
max: 10
});
$('#minMaxCircle').updown({
min: -10,
max: 10,
circle: true
});
View live demo here:
http://jsfiddle.net/XCtaH/embedded/result/
Keyboard and mousewheel events supporte
This is not fully tried and tested by me, but here is a thought - You might want to track KeyDown events because that's the event which is queued by the OS when the key is first pressed. You might also want to implement some sort of delay when incrementing this way so as not to overwhelm the client-side script and have numbers change at a speed to high for user to track.
ok after some tests I made here is how its done:
var setTimeoutId;
var keyIs = "up";
function myIncrementFunction()
{
var num = parseFloat(myText.value)+1;
myText.value = num;
}
myText.onkeydown = function(e)
{
keyIs = "down";
if(keyIs == "down")
{
var e = e || event ;
if (e.keyCode == 38)
{
for(var s=0; s<1; s++)
setTimeoutId = setTimeout('myIncrementFunction()',100);
}
}
}
myText.onkeyup = function(e)
{
keyIs = "up";
}
If you don't care about supporting Opera, this is easy:
textbox.onkeydown = function(e)
{
if (e.keyCode == 38)
{
incrementTextBox();
}
}
However, Opera doesn't fire keydown for key repeats... you'll have to mimic that by calling incrementTextBox() at an interval, and stopping when the key is lifted. I tested this in WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, even IE Quirks:
var textbox = null;
window.onload = function()
{
var timeoutId = null;
var intervalId = null;
var incrementRepeatStarted = false;
function startIncrementKeyRepeat()
{
timeoutId = window.setTimeout(function()
{
intervalId = window.setInterval(incrementTextBox, 50);
}, 300);
}
function abortIncrementKeyRepeat()
{
window.clearTimeout(timeoutId);
window.clearInterval(intervalId);
timeoutId = null;
intervalId = null;
}
function endIncrementKeyRepeat()
{
abortIncrementKeyRepeat();
incrementRepeatStarted = false;
}
textbox = document.getElementById("incrementer");
textbox.onkeydown = function(e)
{
e = e || window.event;
if (e.keyCode == 38)
{
if (!incrementRepeatStarted)
{
startIncrementKeyRepeat();
incrementRepeatStarted = true;
}
else if (timeoutId || intervalId)
{
abortIncrementKeyRepeat();
}
incrementTextBox();
}
else if (incrementRepeatStarted)
{
endIncrementKeyRepeat();
}
}
textbox.onkeyup = endIncrementKeyRepeat;
}
function incrementTextBox()
{
var val = parseInt(textbox.value) || 0;
val++;
textbox.value = val;
}
I wanted to do this, i just used input field with type="number"