Zoom in - Zoom out problem on the Javascript Background - javascript

I want to apply a javascript background on my website. I found a ready one, but I recognize a problem on it. When you scrool with mouse on browser, zoom in or zoom out, it starts to look so strange. You can try it on your own from that demo link;
Demo
Also the html and css code of this animational background is in this link;
Link of HTML-CSS-Javascript of this demo
Can you help me, how can I prevent it from being zoomed in or zoomed out on a browser ?

You can only do it using jquery with below code,
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
Note: Make sure you have included jquery in your code before this script.

Related

Detach keyup for Space bar and Enter keys

Using jQuery 3.+, how can I detach keyup on buttons triggered by the Space bar and Enter keys?
I have something like this:
$("#MAIN").on("keyup", "#scrub-btn.buttonOn:focus", function(e){
var allthesekeys = ( e.which == 107 || e.which == 109 || e.which == 96 || e.which == 97 || e.which == 98 || e.which == 99 || e.which == 100 || e.which == 101 || e.which == 102 || e.which == 103 || e.which == 104 || e.which == 105 );
if ( allthesekeys ){
// Do the scrubbing here...
} else {
$(this).off("keyup");
// Can we use $(this) here? Why are Space bar and Enter keys ignoring this?
}
});
Must I rethink my strategy? Any pointers appreciated.
You are using event delegation...
So the event handler (the function) is attached to #MAIN to handle the event occuring in #scrub-btn.buttonOn.
$(this) represents the element where the event occurs... Not the element delegated to handle the event. That is why the .off() is not working.
Use $("#MAIN") instead... Or $(this).closest("#MAIN") because that is the element which has to be detached from the event listener.
CodePen
I am tempted to suggest a more consise way to write your condition:
var allthesekeys = [107,109,96,97,98,99,100,101,102,103,104,105];
if ( allthesekeys.indexOf(e.which) > -1 ){...}
It will be easier to maintain...
;)
I think you are looking for e.preventDefault();

jQuery Keypress Arrow Keys steering in DropDown

I have a problem with Dropdown, which is connected to the database and I can't control arrows up and down to move result only mouse click.
See this is my code that I started writing but doesn't work.
What am I doing wrong?
$(field-customer-dropdown).on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});
Edit:
As I made my little code currently looks like this:
$("body").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 40) {
console.log("key");
$(".drop-down-row:firstchild").css("backgroundcolor","red");
}
});
And this is the result:
enter image description here
How should look like the code so that I could push keydown 40 switch from Data 1 on Data 2?
Can anyone help me?
JavaScript variables cannot contain - in them. Also, the selector you are using is not a HTML Tag, which doesn't have any prefix. If it's a class, prefix it with . else if it is an id, prefix it with a #.
$(".field-customer-dropdown").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});

JS - Backspace Detection Not Working

I have some code which is a basic highlighting system, when I try to catch backspaces, I can't catch them, even when I use onkeydown and keypress.
I am using jQuery to get the events and register the function calls. Here is my code:
if (e.charCode == 8 || e.charCode == 46 || e.charCode == 35) {
if (errCount) {
errCount--;
}
backLetter(index);
index--;
}
Use .which, as in e.which == 8
https://jsfiddle.net/skdreow5/1/
var xTriggered = 0;
$( "#target" ).keydown(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
if ( event.which == 8 ||
event.which == 46 ||
event.which == 35 ) {
console.log("backspaced: " + event.which);
}
xTriggered++;
var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
console.log(msg);
});
DEMO
Regarding e.charCode
This feature is non-standard and is not on a standards track. Do not
use it on production sites facing the Web: it will not work for every
user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Either use e.which or e.keyCode to trap the backspace. Some browsers support e.which and some support e.keyCode. As part of jQuery concerned, they have normalized e.which in the event object. In case you're using jQuery go with e.which.
$(function() {
$("input").keyup(function(e) {
if(e.keyCode==8) {
alert("Backspace pressed");
}
});
});

How to detect backspace key?

How can I also choose if e.which == 'backspace' ? at the moment, this function helps with showing a loader when info from a database is being retrieved, though i want the loader to show when the backspace is pressed.
field.focus().keypress(function(e) {
e.which !== 0 ? loader.show() : loader.hide();
});
field.focus().keyup(
function(e){
if(e.keyCode === 8)
alert('backspace trapped')
}
)

Hotkey to Button

Is there any way to make a keyboard shortcut that will click on a button on a webpage.
Like I would like to have a hotkey : Ctrl+S to automatically click on Search on Google.
I've tried this : Shortcut Manager plugin but I'm not sure how to assign it.
This might help:
See this jsFiddle
$(window).keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
var rr = $('#report').html();
$('#report').html(rr + '<br />' + keycode);
if (e.ctrlKey) alert('Control pressed');
//if (!(keycode == 115 && e.ctrlKey) && !(keycode == 19)) return true;
if (!(keycode == 83 && e.ctrlKey) && !(keycode == 17)) return true;
alert("Ctrl-S pressed");
$('#gsearch').trigger('click'); //or just .click() also works
e.preventDefault();
return false;
});
Note that webkit browsers will not trap ctrl, alt, shift, etc keys. See this article for info

Categories

Resources