How to trigger mouse right click programmatically using javascript or jQuery - javascript

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>

Related

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>');
});

jQuery not working on any element inside a form

Here's my HTML code inside the form tag:
<section id="mp-cart-after" class="mp_cart_after">
<div id="mp-checkout-payment-form">
<h3 class="mp_sub_title">Payment</h3>
And here's the JS:
jQuery( document ).ready(function() {
jQuery('.mp_sub_title').click(function(e){
e.preventDefault();
jQuery('.mp_sub_title').hide();
});
});
I have tested jQuery on elements outside this form and it works. `
as the form is dynamically generated, you need to use delegated .on('click'
like so:
jQuery( document ).ready(function() {
jQuery('body').on('click', '.mp_sub_title', function(e){
e.preventDefault();
jQuery('.mp_sub_title').hide();
});
});
Maybe you forgot some closing tags. However this works:
<form>
<section id="mp-cart-after" class="mp_cart_after"></section>
<div id="mp-checkout-payment-form">
<h3 class="mp_sub_title">Payment</h3></div>
</form>
and
$(document).ready(function () {
$(".mp_sub_title").click(
function (e) {
e.preventDefault();
jQuery('.mp_sub_title').hide();
}
);
});
Here is a working jsfiddle: Working Example

Disable right click except some elements

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/

hide plusone button after click

I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:
JS:
$(function() {
$("#button").click(function()
{
$(".HIDE").hide();
});
return false;
});
HTML:
<div class="HIDE">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="small" class="plusone"></g:plusone>
</div>
Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.
<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>
Demo: jsfiddle.net/Gju6T
You may want to try the HTML5 equivalent syntax:
<div class="g-plusone" data-size="standard" data-count="true"></div>
All in all, the rendered HTML will be the thing to look at.
I think this is what you need, but put it at the end of your page just above </body>
$('g\\:plusone').live('click',function (){
$(this).remove();
});
ELSE
try this...
$('iframe').contents().find('#plusone').live('click',function (){
$(this).remove();
});
orrr
<script>
function mycall(str){
console.log(str);
//$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here.
There you find the option "callback" you could use like this:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
gapi.plusone.render("HIDE",
{"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
$("#HIDE").hide();
}
</script>
<div id="HIDE">
<g:plusone></g:plusone>
</div>

Bind a jquery function to elements

I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.
When a user selects the textbox I want to change the desired div tag.
This is how the html looks
<div class="left">
<div class="right">
<input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
<span id="rfInput"></span>
</div>
</div>
my jquery looks like this
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$('.box.left').addClass("active");
}).blur(function () {
$('.box.left').removeClass("active");
});
});
</script>
Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class="myTextBox" how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?
Any help would be great!
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
})
.blur(function () {
$(this).closest('.left').removeClass("active");
});
});
</script>
this refers to the element that received the event.
So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.
.closest() - http://api.jquery.com/closest/
you were not that clear, so, here,s my guess...
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
}).blur(function () {
$(this).closest('.left').removeClass("active");
});
});

Categories