Disable right click on a specific div [duplicate] - javascript

This question already has an answer here:
Disable right click on specific <div> or class="" [closed]
(1 answer)
Closed 5 years ago.
I am looking for a solution to disable right click over a specific div. I have this code that does this, but it also display an alert (i fixed this) and it works on the whole page.
<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Oscar Frank
//For full source code, visit http://www.oscarmini.com
var message="";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
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("return false")
// -->
</script>
Can someone help me make this work only one or more specific divs? Thanks! I am a noob.

On the div that you are trying to disable right click events, you can just add this:
oncontextmenu="return false;"
Example:
<div oncontextmenu="return false;">This div won't have the right click menu</div>

You have to add an event on the specific div ( you can get the div by id document.getElementById ) and add an event listener for contextmenu.
Example:
document.getElementById("divId").addEventListener("contextmenu ", function(){
console.log("Right Click");
return false;
});

All you want to do is disable right mouse click in specific div as I understand.
You can use the jQuery plugin for that. Here is the code that you can refer.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
border: 2px solid black;
height: 100px;
}
</style>
</head>
<body>
<div id="demo">
This is the Phone and NO ONE SHOULD RIGHT CLICK THIS! >:)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#demo').bind('contextmenu', function(e) {
return false;
});
</script>
</body>
</html>

Related

onclick=function() not being called on text element [duplicate]

This question already has answers here:
onclick calling hide-div function not working
(3 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="overdiv">
<style>
.cross{
cursor:Default;
}
</style>
<script>
function close(){
alert("why don't you work");
}
</script>
<div id="lowerDiv">
<a class="cross" onclick=close()>x</a>
</div>
</div>
</body>
</html>
I can not understand why the x's onclick doesnt work, even if i surround the x with a div...
Any way i can fix or any other way i should be doing this? I want to close a window by pressing the x, I know how to do that but i just cant get the onclick to work... any help is appreciated.
https://stackoverflow.com/users/479156/ivar
Ivar let me know that the problem was naming the function "close()",
so i just had to name it a little different.
as explained here: onclick calling hide-div function not working
thank you Ivar!
<a class="cross" onclick=close()>x</a>
This code has a problem with onclick function. You didn't specified the function. You need the make the function code between "" tags.
Please change the code like this:
<a class="cross" onclick="close()">x</a>
I maid improvments to your code and it start to work
add "" to function in your tag onclick="onClose()",
you better add <script> in <header> but not in <body>
you can not called your function close() as it is reserved name. For example you also could not name var return etc
<!DOCTYPE html>
<html>
<head>
<script>
function onClose() {
console.log("why don't you work - I work");
}
</script>
<style>
.cross {
cursor: Default;
}
</style>
</head>
<body>
<div id="overdiv">
<div id="lowerDiv">
<a class="cross" onclick="onClose()">x</a>
</div>
</div>
</body>
</html>

How to bring `Hide Me` button to top of webpage from bottom after image present at top is made to hide?

I Have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
function changeCSS(){
document.getElementById('demo1').style.height="500";
document.getElementById('demo1').style.width="400";
}
</script>
</head>
<body>
<img src="deepika.jpg" id="demo1" height="500" width="400"><br>
<button type="button" id="demo2" onclick=myEvent()>Hide Me</button>
</body>
</html>
After clicking on Hide Me button I get this page:
Now I want to completely remove the picture block and bring Display Me button to top of the page. How can I do so?
I want to use plain JavaScript only and no JQuery
If I understand the question properly, you want to toggle the display of image upon button click. You can use the below updated myEvent function:
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo1').style.display = "none";
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').style.display = "";
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}

Show One Div and Hide Another Div when Click on button

What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>

jQuery drag and drop, validating draggable id

I've built a really simple drag and drop activity.
When an answer is dropped on the drop area, its id is stored in a variable called 'answer'.
When the submit button is hit it runs a function called validate which checks if the variable answer has an id of 'correct' stored inside of it.
The problem is, when I hit the submit button it doesn't run the validate function because it says 'the variable answer is not defined'.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yay for drap and drops!</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style> div {
height: 100px;
width: 100px;
border: solid 2px #000;
margin: 10px;
}
</style>
<script>
$(document).ready(function() {
$("#correct").draggable(); //I have drag capability now!
$("#wrong").draggable(); //I have drag capability now!
$("#dropArea1").droppable({
drop: function(event,ui) {
var answer = ui.draggable.attr("id");
console.log(answer);
}
});
});
</script>
</head>
<body>
<div id="correct">
<p>CORRECT ANSWER</p>
</div>
<div id="wrong">
<p>WRONG ANSWER</p>
</div>
<div id="dropArea1">
<p>I'm the drop area</p>
</div>
<script>
function validate() {
if (answer == ("#correct")) {
window.location.replace("www.google.com") //correct! redirect web page to next activity
}
else {
window.alert("Incorrect, try again") //incorrect, try again
}
}
</script>
<button onclick="validate()">Submit</button>
</body>
</html>
One option to fix this is to define the variable answer outside of the $(document).ready() scope, like this:
var answer = null;
$(document).ready(function() {
$("#correct").draggable(); //I have drag capability now!
$("#wrong").draggable(); //I have drag capability now!
$("#dropArea1").droppable({
drop: function(event,ui) {
answer = ui.draggable.attr("id");
console.log(answer);
}
});

Detecting a click within an iFrame which triggers the execution of a function (using only Javascript)

This topic has been covered a few times but there is no clear solution using Javascript. All responses were quite nebulous. Please help me out as there hasn't been a straightforward answer anywhere that I could find on any site.
I am trying to execute a function when any click occurs within an iframe window. Specifically, a click on a hyperlink on page displayed within the iframe. However just being able to have any click within an iframe trigger a function is enough for me.
I have a function Show() that I would like to run when an iframe is clicked. So basically a link is automatically hidden and when the first link is clicked it is shown. When the "click to hide" link that shows up is clicked, the "click to hide" link is hidden. I want the "click to hide" link to show up when someone clicks within the iframe. I need it to run the function every time a click occurs within the iframe. Thanks.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
click to show below link
<div id="my_div" class="hidden">
<a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
</div>
</center>
</body>
</html>
If there is some kind of domain issue please explain and please, if you have time and are able, explain what the issue is and how to fix such a problem. Edits to this code are welcome for the sake of coming up with a solution that achieves the goal that I outlined.
You guys are great.
UPDATE
I have implemented apaul34208's response which technically works, but I am having three problems.
1) How can this take up the full width of the window (I tried adding 100% to the width value under #cover)
2) When the div covers all of the iframe, the webpage within the iframe is not clickable
3) The div is not transparent.
If someone can edit the below code and have the div take up all of the width while being transparent with the iframe's webpage being entirely clickable - I would be very appreciative and happy.
<html>
<head>
<title>Show / Hide Link</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
links
<div id="my_div" class="hidden">
<a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
</div>
</center>
</body>
</html>
I would strongly advise against doing this for any reason, this is usually referred to as "Clickjacking", and it is an extremely bad practice.
So... Please don't ever do this.
But for educational purposes... You can cover an iframe with another positioned element and capture the click on that element:
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 300px;
}
<div id="cover" onclick="Show();"></div>
<iframe id="iframe" src="http://stackoverflow.com"></iframe>
<div id="my_div" class="hidden">
click me to hide
</div>
Once again. Don't ever do this.
I found a solution. It's not perfect but I figured out that I don't really need to it to detect every iframe click and this is good enough. I originally wanted to make a back button appear if a link within the page that is within the iframe was clicked (which would return the user to the main page within the iframe where they started). Obviously they may click randomly and not hit a hyperlink and the back link would pop up for no reason (while they are still on the main page). That's fine I guess but if someone knows of a better solution let me know. Most people would just hit a link to begin with as the page only has hyperlink interaction I presume.
I hope my working code below helps people who are exploring this topic in the future.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
}
</style>
<script type="text/javascript">
var visible_link = true;
var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>
click to show link
<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>
</center>
</body>
</html>

Categories

Resources