Disable right click except some elements - javascript

I am using this code to disable right click on my page:
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
How can i add some exception, lets say when you right click on image the context menu should not be disabled.
Maybe something with stopPropagation but can't figure it out.
Thanks

with event.target:
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if(!$(e.target).is('img')){
return false;
}
});
});

Try this:
<script type="text/javascript">
$(function () {
$('#btnClick').bind('contextmenu',function(e){
e.preventDefault();
alert('Right Click is not allowed');
});
});
</script>
<input type="text" /><br>
<input type="checkbox" />
<button id="btnClick">Click</button>
http://jsfiddle.net/NLJ6t/1/

Related

"Return" content when closing toggle

The goal is to hide the #boxar when the toggle is active and return the "#boxar" when "toggle is closed. The code works fine until I close the toggle (the "#boxar" disappears) but when I close the toggle, they won't return.
Anyone who knows how to fix this?
$(document).ready(function(){
$('#toggle').click(function(){
$('.boxar').hide();
$('#'+this.rel+'').show();
return false;
});
});
You need to use toggle() instead, like :
$(document).ready(function(){
$('#toggle').click(function(){
$('.boxar').toggle();
$('#'+this.rel+'').toggle();
return false;
});
});
$(document).ready(function() {
$('#toggle').click(function() {
$('.boxar').toggle();
$('#' + $(this).attr('rel')).toggle();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='toggle' rel='test'>Toggle</button>
<br>
<div class='boxar'>Boxar DIV</div>
<span>Regular span</span><br>
<span id="test">Rel span</span><br>
<span>Regular span</span><br>
<span>Regular span</span>

How to trigger mouse right click programmatically using javascript or jQuery

I need trigger mouse right click using javascript or jQuery.
Here I tried below code it is not working for me
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$('#testing').contextmenu();
//or
$('#testing').trigger({
type: 'mousedown',
which: 3
});
});
</script>
can you please any provide information on this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$("#testing" ).contextmenu(function() {
alert( "Right clicked" );
});
});
</script>

How do I use dynamically created html/javascript with ASP.NET? [duplicate]

Please see the following code:
<body>
<form id="form1" runat="server">
<div>
<button id="helloButton">
Search</button>
<div id="hello">
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('#helloButton').click(function () {
$('#hello').html('<div>hello world</div>');
});
});
</script>
</div>
</form>
When I use this script, all it does is flash "hello world", it doesn't keep it on the page. Does this has something to do with the click event? I'm trying to click the button and then leave the object on the page.
Otherwise you can simply do a return false which will do both
preventDefault and stop propagation
$('#helloButton').click(function (e) {
$('#hello').html('<div>hello world</div>');
return false;
});
in order to prevent the form from posting, so that you can see your changes, you need to call preventDefault()
$('#helloButton').click(function (e) {
e.preventDefault();
$('#hello').html('<div>hello world</div>');
});

How to post form by clicking in anchor element

How to submit form by clicking in a element ?
I tried code below but Chrome sends it using http GET method. How to fix this so that form is sent using POST method ?
<html>
<body>
<form id="_form" method='post' target='_blank'>
<input type="email" value="me#company.com" name="_email" />
<a href='SendEMail?_entity=DokGReport&_dokumnrs=135361'
id='sendemail' class='button'>
Send
</a>
</form>
<script>
$(function () {
$('#sendemail').button({ icons: { primary: "ui-icon-mail-closed" } })
.click(function () {
$('#_form')[0].action = $(this).attr('href');
$('#_form')[0].submit();
});
});
</script>
</body>
</html>
You need to prevent the default action of clicking on the anchor, which is to follow the link:
$(function () {
$('#sendemail').button({ icons: { primary: "ui-icon-mail-closed" } })
.click(function (e) {
e.preventDefault(); // Don't follow the link normally
$('#_form').attr('action', $(this).attr('href')).submit();
});
});

How to execute javascript function from a dynamic html result? Jquery

Please have a look at this code -
When I click on myLink I get a modal dialog window which shows the html as defined below. This html includes a button (id=test_button), and when I click on this button I want to do an ajax request.
But its not working. So to test it I am just doing an alert but it wont work as well.
Also will it be possible to update existing dom element values (just populate a form) from within a test_button click function.
Thanks for your help.
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
Try with Events/live:
$('#test_button').live("click", function(){
alert('test');
});
The problem is that you're attempting to attach the click handler before the element exists.
As stated by CMS, you can either use .live() or you can add the click handler in your $('#myLink').click() function
Like so:
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
});

Categories