Trigger Mousedown Event Continuously by Mouse and Keyboard - keyboard

I have a link with the role set to button. When the user presses and holds the mouse button or the enter key on the link, I need it to execute my code continuously. I've achieved the mouse portion of my goal by setting an interval during mouse down and canceling it after mouseup.
However, when I press and hold the enter key, only the mouseup portion of my code is executed. Here is an example of my code:
HTML
Test
jQuery/JS
var my_interval;
$("#test_button").on('mousedown', function(e){
my_interval= setInterval(function(){
console.log ("mousedown");
}, 500);
}).on('mouseup', function(e){
clearInterval(my_interval);
console.log ("mouseup")
});
View JSfiddle

Related

How can we handle button click like event for entry box in gtk-rs?

We can add a button click event in gtk-rs like this
let btn: Button = builder.get_object("button1").expect("Cant get button");
btn.connect_clicked(|_| {
println!("Activated");
});
like the above code how can I add similar click event for entry box such that when I press the mouse on the entry box it should print pressed. I tried this
let entry: Entry = builder.get_object("box1").expect("Cant get box");
entry.connect_icon_press(|_, _, _| {
println!("pressed");
});
The program is compiling without any error but when I clicked on the entry box I expected to see pressed in terminal but instead there is nothing.

swipe and click to next slide

With flickity, is it possible to have two behaviours at the same time on the same slide?
swipe (default and better four touch screen)
click to next slide (better for desktop)
I tried something like:
var carouselCells = Array.from(document.querySelectorAll('.carousel-cell'))
carouselCells.forEach(function(e) {
e.addEventListener('click', function() {
flckty.next();
})
})
Here is the fiddle: https://jsfiddle.net/francoisromain/fum7Lrac/
The click works fine but the problem is the swipe moves forwards two slides.
use Flickity's staticClick event over standard click, as click is triggered during drag.
flkty.on( 'staticClick', function() {
flkty.next()
})
from: https://github.com/metafizzy/flickity/issues/486#issuecomment-258686221

Stripe payment without any button

Currently I'm using a stripe payment button as a way to charge users. however, the process for this is:
they get an email, the email has a pay button.
once you press the button, the button launches a page with a stripe pay button.
pressing the stripe pay button opens the card payment.
I'd like to be able go straight from the user pressing the email's pay button to the card payment page opening up, instead of them having to press another button.
I've been using https://stripe.com/docs/checkout. I think that calling the stripecheckout.open directly would do the trick, however, I'm not sure how to format this call correctly with javascript.
For example, when the email pay button is pressed, the stripe pay button is generated like this
res.write('<script ');
res.write('src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"');
res.write('data-key="' + body[0].data_key + '"');
res.write('data-amount="' + body[0].data_amount +'"');
res.write('data-name="' + body[0].data_name + '"');
data_desc_string = body[0].data_description;
data_desc_short = data_desc_string.substring(7);
res.write('data-description="' + data_desc_short + '"');
res.write('data-currency="usd">');
res.write('</script>');
I'm not sure how I should rewrite it just for the stripecheckout.open.
The Custom Buttons section of the Checkout docs details how to call StripeCheckout.open().
In your case, you simply call StripeCheckout.open() once the page has loaded (because you want it to appear immediately) instead of in response to a button click (as in the example).
How exactly you'd go about that would vary with the JS framework you're using. Using jQuery as in their example code, you'd bind to $(document).ready():
<script src="https://checkout.stripe.com/v2/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<button id="customButton">Purchase</button>
<script>
$(document).ready(function(){
var token = function(res){
var $input = $('<input type=hidden name=stripeToken />').val(res.id);
$('form').append($input).submit();
};
StripeCheckout.open({
key: 'pk_test_czwzkTp2tactuLOEOqbMTRzG',
address: true,
amount: 5000,
currency: 'usd',
name: 'Joes Pistachios',
description: 'A bag of Pistachios',
panelLabel: 'Checkout',
token: token
});
return false;
});
</script>

Cannot get the tab ID of the background page in Chrome extension

I am writing a Chrome extension, in which there is a dialog-like window to let users input the username and password, which are then sent back to background page to make a request for the token in OAuth 2.0.
To send the username and password from dialog window back to background page, I used the following codes (inside the dialog window .html file):
<script>
function usrpwd(){
var up = {};
up.usr = document.login_form.usr.value;
up.pwd = document.login_form.pwd.value;
chrome.tabs.sendRequest(window.dialogArguments,up);
window.close();
}
</script>
where the window.dialogArguments is supposed to be the tab ID of the extension's background page.
And the dialog window is opened in background page by
chrome.contextMenus.create({
"title" : "show Modal Dialog",
"contexts" : ["all", "page"],
"onclick": handle_click
});
function handle_click(){
chrome.tabs.getSelected(null, function(tab){
console.log('tab ', tab);
window.showModalDialog("login_popup.html", tab.id, "dialogHeight:300px; dialogLeft:200px;");
});
}
The tab.id is supposed to be the ID of the background page, and it will be passed to dialog window and assigned to window.dialogArguments.
Also in the background page, the username and password are received by,
chrome.extension.onRequest.addListener(
function(request){
console.log("Username: ", request.usr);
console.log("Username: ", request.pwd);
}
);
However, console.log('tab ', tab) inside the handle_click function always shows that the getSelected tab is the tab where the context menu got clicked, not the background page. So I am wondering how to get the tab ID of the background page in this case. Or is there any other better ways to communicate between dialog window and background page?
Thanks a lot!
Background pages do not have a tabId, since they are not tabs.
To send a message to the background page, use chrome.extension.sendRequest (extension instead of tabs).
PS. Full demo

dijit menu onmouseover

I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });

Resources