i want to disable right click on the webpage but i want enable right click on textarea. Hey wat is this provide answers dont post lot of comments on right click (lol). i dont care if people would see my source code, thats nt the point ... i just want to know how one can enable right click only in the textarea while disabling the rest
so any1 here know the javascript function that would perform the job ??
is the below code possible ??
<html>
<head>
<title> Your Title </title>
</head>
<body oncontextmenu="return false;">
<textarea oncontextmenu="return true;">
</textarea>
</body>
</html>
-thanx in advance
-miss subanki
To enable right click on a particular element on the body while disabling the right click on the rest of the body (in html), you wil have to put the required element (whose right click you want to enable) into an iframe. And disable the right click on main body like this....
Main Body
<html>
<head>
<title>Your Title</title>
</head>
<body oncontextmenu="return false;">
<iframe src="frame1.html">
</iframe>
</body>
</html>
frame1.html
<html>
<body>
<textarea> Your text, u can right click here </textarea>
</body>
</html>
if anyone else has a better answer please post it here, thanx everyone.
What about: http://www.dynamicdrive.com/dynamicindex9/noright2.htm
But there's not much point disabling right click, it's easy to bypass and get content.
http://www.quirksmode.org/js/events_properties.html#button has probably all the information you need. You get the click event and test to see which keycode it is. Then choose to return false or true depending on where the click came from.
I have found one solution:
document.superListener = document.addEventListener;
document.addEventListener = function(type, listener, useCapture){
if(type != 'contextmenu')
document.superListener(type, listener, !!useCapture);
};
from here:
https://stackoverflow.com/a/3009161/3649420
You can disable the right click using javascript to keep the honest people honest. But the not so honest people can easily reverse this. If you are interested read on "oncontextmenu" property of html elements.
let divs = $("div");
divs.each(function(i, v) {
$(v).on("contextmenu", function() {
return false;
})
})
$(".no").off("contextmenu");
body {
background: black;
}
.yes {
width: 100px;
height: 100px;
background: tomato;
text-align: center;
}
.no {
width: 100px;
height: 100px;
background: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
The off() method removes event handlers that were attached with on().
jsfiddle => https://jsfiddle.net/dare444/we91t5gd/183/
Related
I am very new to coding and am trying to combine html, css, and javascript for the first time. The task is to have buttons make changes to a box. For example one of my buttons is "grow", in which I want the box to increase in size when the button is clicked.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
Here is my CSS
body {
background-color: aliceblue;
}
.box {
height:150px;
width:150px;
background-color:orange;
margin:25px
}
And no javascript yet. I don't really know where to even start, I know how to combine CSS and HTML, however I am stumped when it comes to adding in the javascript. Any help is appreciated and thank you in advance.
Here is a good place to start.
https://www.w3schools.com/jsref/event_onclick.asp
okay.
javaScript can modify elements (HTML buttons for example) and their properties, like text content AND style (CSS).
first of all, you need to select the element into a variable
let btn = document.querySelector('#grow-btn)
let btn means you're declaring a variable, piece of storage, named btn.
you're putting inside of it the resulte of the expression.
btn.addEventListener("click", function(){/*here you're handling the click*/})
add a listener to the btn, so you can know when a click was made and respond to it.
inside the block you can change some css properties of a box in a similar way
In your button, you add a function 'onclick', like this:
<button id="button1" onclick="growFunction()">Grow</button>
Then, you go to javascript.js and create the growFunction() that will be executed when the button get clicked.
Also, to do the growFunction, either you use no parameters and inside the function you use document.getElementById('button').{your code}, or you pass this parameter, something like:
<button onclick="growFunction(this)">Grow</button>
javascript.js
growFunction(element){
element.yourcode...
}
A few tips to help you get started, first you can make a button do something with the "onClick" HTML attribute, where you might specify a function to execute when the button is clicked. Listeners are how some people do it, but that might be more complex than you're ready for.
<button id="button1" onclick="growBox()">Grow</button>
In your js file, you would define your function:
function growBox() {
let box = document.getElementById("box");
box.style.height = '200px';
box.style.width = '200px';
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/ is a good resource for how things work, and know that just googling things like "how change css with button javascript" can teach you almost anything. Even as a working developer you'll still do this.
Just keep plugging along, this feeling is how all of us started.
I got a page I got a link. The link goes to http://stackoverflow.com.
In addition, click anywhere on the link and it goes to http://stackoverflow.com too.
I am just curious. Is there a way to do so without writing stackoverflow.com twice?
Can I make the link in the link to be inactive and clicking the link means the user activate the code written in "onclick" on body?
This is the code:
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.auto-style1 {
text-align: center;
}
</style>
</head>
<body onclick="window.location.replace('http://stackoverflow.com');">
<div id="centerInScreen">
<h1 class="auto-style1">
Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
You can see the code in action here
http://romancepriorities.com/test/index2.html
Basically the link is part of the body. So I want body.onclick to be called when a user click the link.
You could give your a element an id, and then when the click event happens, you would get the element by that id, and call the click method on it:
<body>
<div id="centerInScreen">
<h1 class="auto-style1">
<a id="go" href="http://stackoverflow.com">Click here to Get Game and See Yourself</a>
</h1>
</div>
<script>
document.addEventListener('click', function() {
document.getElementById('go').click();
});
</script>
</body>
Note that as you had it, the behaviour was not the same: location.replace will not generate an entry in the browser history, so you cannot go back. Also, the body element does not necessarily fill the page, so not all clicks would be detected, like is the case with listening to the event on document.
Two-step link
If you want to have the link "inactive" until it is clicked, and only then allow a navigation to happen on a second click anywhere on the page, then use a variable:
<body>
<div id="centerInScreen">
<h1 class="auto-style1">
<a id="go" href="http://stackoverflow.com">Click here to Get Game and See Yourself</a>
</h1>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () { // after doc loaded
var hasClicked = false;
var go = document.getElementById('go');
document.addEventListener('click', function() {
// only when link was activate with previous click
if (hasClicked) go.click();
});
go.addEventListener('click', function() {
if (!hasClicked) { // not yet clicked before?
// log the fact that the link was clicked
hasClicked = true;
// but cancel the navigation
return false;
}
});
});
</script>
</body>
You would need to use some visual hints so this becomes user-friendly: with classes you could make the link "look" inactive until it receives its first click. Upon that click you could change the style, and maybe its text,...etc. But this goes beyond the question.
I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).
Anyway id appreciate any solution.
My attempt at jquery/css/html looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.
$('.box').focus(function() {
$('.infoBubble').show()
});
In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
Try the following:
$('.box').click(function (){
$('.infoBubble').toggle();
});
By the way. The css-property to hide/show something is not visibility, but display. For example:
display: none;
or
display: block;
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute;. Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with #Ryuu's answer, don't bother with iframes at all is the best option.
basically what I want is simple, when people onclick, the field become editable.
After they change the value, press Esc at keyboard/ or click outside , to save the record.
I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work?
The documentation page: http://www.appelsiini.net/projects/jeditable
Here I post my existing code here for guys to review.
testing.html
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".click").editable("jeditabletest.php", {
indicator : "<img src='indicator.gif'>",
tooltip : "Click to edit...",
style : "inherit"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
.editable input[type=submit] {
color: #F00;
font-weight: bold;
}
.editable input[type=button] {
color: #0F0;
font-weight: bold;
}
</style>
</head>
<body>
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should
</body>
</html>
jeditabletest.php
<?php
echo "hehehe"
?>
does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.
To enable submitting the form when user clicks outside do the following:
$(".editable").editable("http://www.example.com/save.php", {
onblur : "submit"
});
Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:
/* discard changes if pressing esc */
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
reset.apply(form, [settings, self]);
}
});
yeap: i recommend http://valums.com/edit-in-place/
It uses div's contentEditable property. You may want to look into that before you start using it.
jrh
I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html.
The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.
Hope this helps!