We Keep Coding

Keybinding in Anki while reviewing

I use Anki, a software of flashcards to learn a new language.
What my card looks like :
I want to use a key on my (physical) keyboard to show/hide additional infos on my card to review my cards faster on iPad.
The problem is that the document element is not focused at first (it is the answer buttons that are), so the keyup event in JS/JQuery doesn't work. I need to touch the iPad screen first to then use my keyboard if I want it to work, which kind of defeats the whole point.
My code :
$(document).ready(function() {
$(document).on('keyup', function(e) {
var key = e.key;
if (key == "p") {
// My Code
}
});
});
I tried $(document).click(), $(document).trigger("click") and $(document).focus() without success. Other people (on Reddit) have had this problem but resolved it with add-ons for Anki − As I would like to make it work on iPad (so no add-on), this is not an option forme sadly.
Any help would be greatly appreciated.
Cheers!

Javascript - : Slider On touch not working as expected

I am making a custom slider.
All the things works find. But as of now I also want to add ontouch, ontouchmove functionality. I have almost achieve but something is still wrong that's why I am not able to achieve it completely.
Code Snippet
function onDragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
caouselPosX2 = caouselPosX1 - e.touches[0].clientX;
caouselPosX1 = e.touches[0].clientX;
} else {
caouselPosX2 = caouselPosX1 - e.clientX;
caouselPosX1 = e.clientX;
}
carouselInneritems.style.transform = 'translateX(' + (carouselInneritems.offsetLeft - caouselPosX2) + 'px)';
}
Kindly try the demo on inspect with mobile resolution.
CodePen

I've had a play around with this and there are two main issues as far as I can see.
onDragAction() needs to call e.stopPropagation() - in the demo you posted it is being called every time a new slide enters underneath the mouse, but you only want it to be called once. This fixes a lot of the glitchiness for me.
You need to have some conditional logic to express what direction you want the slider to go in. At the moment it is calculated by subtraction in every case, which from what I've put together from reading your code means it will always go to the left.

How to disable 'save image as' option on right click? [duplicate]

This question already has answers here:
How do I disable right click on my web page?
(30 answers)
Closed 8 years ago.
I want to prevent users from right-clicking on image on my site and saving them.
I know there are many work-around for this, but I still need to do it.
Any help?
Also, this site has this feature - http://finsix.com/dart/#section-colors
It can be html, javascript, jquery. Any solution will do.

$("body").on("contextmenu", "img", function(e) {
return false;
});
This is the "new" way in jQuery. Bear in mind anyone with technical knowledge would be able to get around this.

Use the image as a background-image of a div element, This will keep the easy minded people away from saving it ;)

<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
I have found this script on selfhtml.org.
This function is originally designed to disable the client side context menu and to insert your own context menu. But it can be used for this too.
But keep in mind: By using browser addons like NoScript or opening the image url user could get around this.

Looking for ibooks html input alternative

In IOS5 on the iPad, iPad2 etc. iBooks accepted <input type="color"> as a way to prompt the keyboard to display when you clicked on an input field, to say, type in the answer to a question. I've just recently updated to IOS6, and this workaround no longer seems to be working. I tried using the JavaScript I found here - http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009
<script type="text/javascript">
function iPadTouchHandler(event) {
var type = "",
button = 0; /*left*/
if (event.touches.length > 1)
return;
switch (event.type) {
case "touchstart":
// OLD: On iPad2 clicking on a text input field did not show the keyboard
// if ($(event.changedTouches[0].target).is("select")) {
// NEW: Now on iPad2 the touchstart-Event on input fields is ignored and everything works fine
// change my by Roland Caspers, Scheer Management
if ($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input")) {
return;
}
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
event.preventDefault();
return false;
break;
</script>
However this code seems to be outdated and relevant to IOS5. I know of a workaround, which is to put the page with the input into an iFrame, in that case you can just use <input type="text">, however I'd prefer to stay away from iFrames as they tend to move the content around depending on where the input box is. Any thoughts as to other possible solutions or workarounds? Tyvm :)

I am also Facing the same issue on iOS6 for , the same is working perfectly on the <iframe> tag. But it omits the images & style and etc.
Review the code "http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009", I feel some thing has to modify on below condition:
($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input"))
I'd be great if anyone provide the earlier response.
Thanks

I struggled with this same problem in iBooks on iOS 7. The tricky part was, that iBooks probably makes all text input fields disabled by default. We are using prototype.js, so here is my solution written for prototype:
$('my-input-field-id').observe('touchstart', function(event) {
var element = event.element();
if (element.disabled)
element.disabled = false;
element.focus();
event.stop();
});
So just listen for the 'touchstart' event on the input field and enable and focus the field when touched. It works for ordinary text fields (<input type="text">). Simple :-).

jQuery ie input text issue

I have the following weird issue with the "loading gif" that I want to display in my search bar when the user hits enter. The code works on mozilla and ie 7 on the localhost but only on mozilla on my cpanel...
Do you have any clue?? Sorry if this looks obvious :)
here is the code, the path is dynamic but of course correct:
$('#searchField').focus(function(){
$(this).keypress(function(event) {
if ( event.which == 13 ) {
$(this).css('background-image', 'url("/dvt/public/images/ajaxLoader.gif")');
}
});
});
thanks a lot

Put this to get your event :
if (!event)
var event = window.event;
var code = event.which || event.keyCode;
It's different in IE and firefox

As far as your image, it seems to me that the URL to the image would be /images/ajaxLoader.gif as /dvt/public seems like a doc root path. With the image on your server, what URL do you put in the browser view it? Also, you can pull the double quotes out of the url() in the CSS.
For the event and keycode, change the name of your event parameter (try e for starters) to avoid collision with the global namespace, then use e.which, per the jQueryfn.keypress docs.