Develop Reference

Disable rightclick on on images [duplicate]

This question already has answers here:
Disabling right click on images using jquery
(10 answers)
Closed 5 years ago.
I am currently using this script to prevent right click on one of my site. I have tried different tweaks on the code because I would like it to prevent right click ONLY on images (right click it's everywhere).
Any idea?
Thanks in advance for your help
//Disable right mouse click Script
var message = "Stop trying stealing pics! :P";
///////////////////////////////////
function clickIE4() {
if (event.button == 2) {
alert(message);
return false;
}
}
function clickNS4(e) {
if (document.layers || document.getElementById && !document.all) {
if (e.which == 2 || e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
} else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
document.oncontextmenu = new Function("alert(message);return false")

Use contextmenu event:
$(document).ready(function() {
$("img").on("contextmenu",function(){
return false;
});
});
img{
width: 50px;
height: 50px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">

Onkeydown not working javascript

Here is my code
document.onkeydown = function (a) {
if (a.which == 13) {
alert("Not Anymore");
}
}
document.onkeydown = function (b) {
if (b.which == 65) {
auto();
}
}
document.onkeydown = function (c) {
if (c.which == 83) {
auto2();
}
}
Only the last snippet works can someone explain why this is happening
check my website and you can see it isnt working when you press a but when you press b it is
Thanks, I appreciate the help and feedback

You're binding the same event on the document multiple times. So, the later event handlers override the previous event handlers just like the functions with same name does. You need to bind only one event handler and use if... else in it.
You can use this
document.onkeydown = function (e) {
if (e.which == 13) {
alert("Not Anymore");
} else if (e.which == 65) {
auto();
} else if (e.which == 83) {
auto2();
}
};
Also, use addEventListener instead of onkeydown.
document.addEventListener('keydown', function (a) {
if (a.which == 13) {}
...
}, false);

Two functions on Keypress won't work (textarea)

I have created two function on Enter Key press
to hide show dive on Enter key press
to auto resize textarea Height on Enter when it reached to end.
Here is the fiddle : http://jsfiddle.net/rz3f3gng/2/
$('.one').hide();
$(function() {
//hide show dive on enter press and on other keys hide div
$('#mainContent').on('keypress', function(e) {
if (e.which == 13) {
e.preventDefault();
$('.one').show();
} else {
$('.one').hide();
}
});
function TextareaAuto(o) {
o.style.height = "200px";
o.style.height = (2 + o.scrollHeight) + "px";
}
});
.one {
width: 100px;
height: 30px;
background: red;
}
textarea {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
</div>
<textarea id="mainContent" onkeydown="TextareaAuto(this)" style="overflow:hidden">
</textarea>
Only One function seems to work at time, either Hide show div or auto size textarea.

You should never mix inline event handlers with jQuery handlers. Just use two jQuery handlers or call the function from the existing handler:
e.g.
$('#mainContent').on('keypress', function(e){
if (e.which == 13) {
e.preventDefault();
$('.one').show();
}
else{
$('.one').hide();
}
TextareaAuto(this);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/rz3f3gng/3/
Update
As you still want the Enter to work (see comment below), just get rid of your e.preventDefault()
e.g.
$('#mainContent').on('keypress', function(e){
if (e.which == 13) {
$('.one').show();
}
else{
$('.one').hide();
}
TextareaAuto(this);
});
http://jsfiddle.net/TrueBlueAussie/rz3f3gng/4/
Which now means it can be reduced using toggle() to
$('#mainContent').on('keypress', function(e){
$('.one').toggle(e.which == 13);
TextareaAuto(this);
});
http://jsfiddle.net/TrueBlueAussie/rz3f3gng/5/

javascript execute function pressing 'esc' key

I have 2 javascript functions: one of them shows div 'PhotoFull' another hides. 'PhotoFull' is a container Div.. Just black background for another Div inside of it. When the user clicks on black background, PhotoFull dessapears.. but if affects also the Div which is inside of 'PhotoFull' (PhotoFull dessapears while clicking the div which is inside). So For the Div which is inside I use event.stopPropagation();
Both functions work, but I also need to hide Div hideDiv() when "ESC" key is pressed. hideDiv() is executing Div
function showDiv() {
document.getElementById('PhotoFull').style.display = "inherit";
event.stopPropagation();
}
function hideDiv() {
var target = event.target || event.srcElement;
if (event.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
}
window.onload=function() {
document.onkeyup = key_event;
}
function key_event(e) {
if (e.keyCode == 27) hideDiv();
}
And HTML:
<div id="PhotoFull" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.75); display:none; z-index: 999;" onclick="hideDiv()">
<div style="width: 960px; border-radius: 3px; background-color: #ffffff; margin-top: 100px;">
<img id="one_full" src="numbers/1.jpg" style="max-width: 940px; margin: 10px;" />
</div>
</div>
Without event.stopPropagation(); Pressing ESC button executes function hideDiv() but with it, nothing happens. Don't know why.
Thanks for attention

When you press Esc key it goes in hideDiv function but the condition goes worng due to below reason.
See Debug trace in picture.
See watchExpression section in debugger. I have added event object to watch.
You can see full object description in watchExpression in above image.
You have write below condition in hideDiv function
var target = event.target || event.srcElement;
if (event.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
in debug trace you can see that event.currentTarget is body target local variable in the hideDiv function is document because you have added your listener for document object canbe seen from your code
window.onload=function() {
document.onkeyup = key_event;
}
So the solution is you have to register event listener on proper object which is body.
use below code for window.onload function..
window.onload=function() {
document.body.onkeyup = key_event;
}

window.onkeypress = keypress;
function keypress(event) {
if (event.keyCode == 27) {
alert("Hidding div *magic runing...*");
}
}
You should consider using onkeypress event to handle it.

Try this,
document.onkeydown=function(e){
if(e.which == 27) {
hidediv();
return false;
}
}

KeyBoard Navigation for menu using jquery

I am trying to add keyboard navigation to Menu(ul li based
) , i have bound the keydown event to menu (or should i bind keydown to the document ?)
the handler function used is given below
KeyDown: function(e) {
var toFocus = false;
if (e.keyCode == 38) {
toFocus = $((e.target/* li */).next()[0]);
}
if (e.keyCode == 40) {
toFocus = $((e.target).next()[1]);
}
if (toFocus) {
$(e.target).attr('tabIndex', '-1');
$(toFocus).attr('tabIndex', '0');
toFocus.focus();
return false;
}
}
here i get e.target as html instead of li ?
can u suggest any other way to add keyboard navigation ?

Try to use custom attribute to hold the tabid for up and down.
...KeyDown: function(e) {
var Direction;
if (e.keyCode == 38)
Direction = "toUp";
else Direction = "toDown";
var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
Focus.focus();
}
---
<li ... tabid="1" toUp="-1" toDown= "2" />
<li ... tabid="2" toUp= "1" toDown= "3" />
<li ... tabid="3" toUp= "2" toDown= "4" />
<li ... tabid="4" toUp= "3" toDown="-1" />
The above code is just to show the idea, it is late now and I didn't have time to test it. So please don't vote me down for not working.
Hope that helps

I just wonder if, instead of doing this by your self, why not using an already existing plugin?
jQuery Keyboard Navigation
demo page here
my demo: just to add a demo page of an example

HTML
<body>
<input type="text" id="target-box" >
<ul class="list">
<li class="selected">Hello</li>
<li>World</li>
</ul>
</body>
jQuery
$(document).on('focus','#target-box', function() {
var target_box = $(this);
$(document).on('keyup', function(e) {
if(e.which == 38){ // up arrow
var selected_item = $('.selected');
if(typeof selected_item.prev()[0] !== 'undefined') {
selected_item.prev().addClass('selected');
selected_item.removeClass('selected');
}
} else if (e.which == 40) { // down arrow
var selected_item = $('.selected');
if (typeof selected_item.next()[0] !== 'undefined') {
selected_item.next().addClass('selected');
selected_item.removeClass('selected');
}
}
if (e.keyCode == 13) { // enter
target_box.val($('.selected').html());
}
});
});
CSS
.selected {
width : 50px;
background-color: gray;
}