I'm looking for a bookmarklet which will delete the current Google Sheet (rather than the "Move to bin" menu option). I can see from the JavaScript that the "File">"Move to bin"code looks like this:
Ih = Ak(uk("docs-trash").label("Move to bin").Ea(765), "trash").dc("bin | delete | remove ||").build();
I thought that the solution might be:
javascript: document.getElementById("docs-trash").click();
Am I going down the wrong route trying to do it this way?
I hope something like this may be helpful to you:
javascript:(function() {
var eltMove = document.querySelector('#\\:b2>div>span');
fireMouseEvent(document.querySelector('#docs-file-menu'), 'mousedown');
fireMouseEvent(eltMove, 'mousedown');
fireMouseEvent(eltMove, 'mouseup');
fireMouseEvent(eltMove, 'mouseup');
function fireMouseEvent(eltTarget, myEvent) {
var screenX, screenY, clientX, clientY;
var event = document.createEvent('MouseEvents');
event.initMouseEvent(myEvent, true, true, window, 1, screenX, screenY, clientX, clientY, false, false, false, false, 0, null);
eltTarget.dispatchEvent(event);
}
})();
Related
I am developing an iOS application using Swift that incorporates web content by using WKWebView.
[URL Loading and Goal] Once a URL has been loaded inside this web view, I want to open a keyboard whenever the user wants to type.
[JavaScript Events] As browsing is based on eye coordinates, I want a JavaScript event to be triggered when the user's gaze is focused on an input field. On the basis of eye gaze coordinates, I can determine the underlying element of the webpage document. After this, I want to trigger a mouse event/touch event for clicks within the input element.
However, the system-level keyboard does not appear if I follow these steps.
Code:
touchPoint variable contains the current x and y coordinates of the eye gaze.
#IBOutlet var webView : WKWebView!
let jsStyle = """
function sendTouchEvent(x, y, element, eventType) {
const touchObj = new Touch({
identifier: Date.now(),
target: element,
clientX: x,
clientY: y,
radiusX: 2.5,
radiusY: 2.5,
rotationAngle: 10,
force: 0.5,
});
const touchEvent = new TouchEvent(eventType, {
cancelable: true,
bubbles: true,
touches: [touchObj],
targetTouches: [],
changedTouches: [touchObj],
shiftKey: true,
});
element.dispatchEvent(touchEvent);
}
function click(x, y)
{
var ev = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
var el = document.elementFromPoint(x, y);
if(el.nodeName == "INPUT") {
el.autofocus = true;
el.click();
el.focus();
sendTouchEvent(x, y, el, 'touchstart');
}
try {
el.dispatchEvent(ev);
} catch(error) {
console.log(error);
}
}
click(\(touchPoint.x), \(touchPoint.y));
"""
webView.evaluateJavaScript(jsStyle, completionHandler : { result, error in
print("### Evaluate JavaScript for current click!")
} => Called when eye gaze coordinates are received.
[Temporary Solution] In order to make this work, I created a native UITextField that acts as a proxy for the webpage element and opens the keyboard by becoming the first responder when I determine using JS that the eye gaze is focused on an input element.
My goal, however, is to remove the proxy logic and replace it with JavaScript code that opens the system-level keyboard.
Hi I know we can trigger click event . but I want to know that can we trigger mousemove event without any actual mouse movement by user.
Description :
I want to show a message when user select something. on canvas ,my canvas is of full height and width,when user click on a button the canvas shows up. when user do mouse movement he see a message "Click and drag on any part of the web page". this message follows the mouse movement of the user.
What I want to do :
When user click the button he should see the message that "Click and drag on any part of the web page". and message must follow wherever user moves the mouse.
Problem :
User is not able to see the message after click until he/she moves his mouse.
Code:
function activateCanvas() {
var documentWidth = jQ(document).width(),
documentHeight = jQ(document).height();
jQ('body').prepend('<canvas id="uxa-canvas-container" width="' + documentWidth + '" height="' + documentHeight + '" ></canvas><form method="post" id="uxa-annotations-container"></form>');
canvas = new UXAFeedback.Canvas('uxa-canvas-container', {
containerClass: 'uxa-canvas-container',
selection: false,
defaultCursor: 'crosshair'
});
jQ(function() {
var canvas = jQ('.upper-canvas').get(0);
var ctx = canvas.getContext('2d');
var x,y;
var tooltipDraw = function(e) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
var str = 'Click and drag on any part of the webpage.';
ctx.fillStyle = '#ddd';
ctx.fillRect(x + 10, y - 60, 500, 40);
ctx.fillStyle = 'rgb(12, 106, 185)';
ctx.font = 'bold 24px verdana';
ctx.fillText(str, x + 20, y - 30, 480);
};
canvas.addEventListener('onfocus',tooltipDraw,0);
canvas.addEventListener('mousemove',tooltipDraw,0);
canvas.addEventListener('mousedown', function() {
canvas.removeEventListener('mousemove', tooltipDraw, false);
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
}, false);
});
}
jQ('body').on('click', '.mood_img_div', function() {
// alert("soemthing");
toggleOverlay();
activateCanvas();
});
I have made a function which is called after click but the message is not visible. Is there any way to call it for the first time with message and show is everytime when user uses mouse.
I have replaced jQuery with jQ because I am making my own plugin(this is not causing the problem)
A good native approach is to use dispatchEvent method on EventTarget.
It dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
Try
// 1. Add an event listener first
canvas.addEventListener('mousemove', tooltipDraw ,0);
// 2. Trigger this event wherever you wish
canvas.dispatchEvent(new Event('mousemove'));
in your case it should trigger mousemove event on canvas element.
(Triggering events in vanilla JavaScript article can be also useful):
var elem = document.getElementById('elementId');
elem.addEventListenter('mousemove', function() {
// Mousemove event callback
}, 0);
var event = new Event('mousemove'); // (*)
elem.dispatchEvent(event);
// Line (*) is equivalent to:
var event = new Event(
'mousemove',
{ bubbles: false, cancelable: false });
jQuery:
Try this with jQuery trigger method:
$('body').bind('mousemove',function(e){
// Mousemove event triggered!
});
$(function(){
$('body').trigger('mousemove');
});
OR (if you need triggering with coords)
event = $.Event('mousemove');
// coordinates
event.pageX = 100;
event.pageY = 100;
// trigger event
$(document).trigger(event);
OR
Try using .mousemove() jQuery method
let coordX = 0; // Moving from the left side of the screen
let coordY = window.innerHeight / 2; // Moving in the center
function move() {
// Move step = 20 pixels
coordX += 20;
// Create new mouse event
let ev = new MouseEvent("mousemove", {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY
});
// Send event
document.querySelector('Put your element here!').dispatchEvent(ev);
// If the current position of the fake "mouse" is less than the width of the screen - let's move
if (coordX < window.innerWidth) {
setTimeout(() => {
move();
}, 10);
}
}
// Starting to move
move();
Albeit it is probably possible to mimic such an event as shown in Andrii Verbytskyi's answer, most of the time, when you want to do it, it is because of an "X-Y problem".
If we take OP's case for instance, here we absolutely don't need to trigger this mousemove event.
Pseudo-code of current implementation :
function mousemoveHandler(evt){
do_something_with(evt.pageX, e.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)
function clickHandler(evt){
do_something_else();
}
element.addEventListener('click', clickHandler);
And what we want is to also call do_something_with in the click handler.
So OP spends some time to find a way to trigger a fake mousemove, spends another amount of time trying to implement it, while all that is needed is to add a call to do_something_with in clickHandler.
Both mousemove and click events have these pageX and pageY properties, so the event can be passed has is, but in other case, we could also just want to pass it with a fake object containing required properties.
function mousemoveHandler(evt){
do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)
function clickHandler(evt){
do_something_else();
do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('click', clickHandler);
// here we won't have pageX nor pageY properties
function keydownHandler(evt){
do_something_else();
// create a fake object, which doesn't need to be an Event
var fake_evt = {pageX: someValue, pageY: someValue};
do_something_with(fake_evt.pageX, fake_evt.pageY);
}
element.addEventListener('keydown', keydownHandler);
Note : you are mixing jQuery.on and element.addEventListener, so you might need to pass the originalEvent property of the jQuery event object.
Objective :
I want to open a new window but the focus remain on old window.
what I tried :
<button id="test">Open Google</button>
-
document.getElementById("test").addEventListener("click", openNewBackgroundTab, false);
function openNewBackgroundTab(){
var a = document.createElement("a");
a.href = "http://www.google.com/";
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true,
window, 0, 0, 0, 0, 0,
true, false, false, false,
0, null);
a.dispatchEvent(evt);
}
Here is the link : JSFiddle
This works fine in Chrome but not in Mozilla.
Please help !!
This behaviour is up to the browser and can't be controlled by JavaScript.
write onload event of the new window
window.opener.focus();
I need to build and automate task where I need to click a button in a web page but I don't know how can I get the location on screen. Any of you can be so kind and help me to figure out how to get position on screen to click ?
I'll really appreciate your help.
Here is a javascript function I wrote to simulate clicking a link. I think you can adapt it pretty easily to click any object in a page that has a valid ID:
function ClickLink(AnchorName)
{
var evt = document.createEvent("MouseEvents");
var Link = document.getElementById(AnchorName);
var LinkForJquery = '#' + AnchorName
var x = $(LinkForJquery).offset().left;
var y = $(LinkForJquery).offset().top;
evt.initMouseEvent("click", true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
var allowDefault = Link.dispatchEvent(evt);
}
I am aiming to do a phone gap-android project.
I want to implement the swipe view (as in android with page-controller) in phone gap but preferably using Java script.
I saw there are many options such as
hammer,zepto,jquerysloution,quo & iScroll.
Which is the best one out of these or anything else that better to implement?(preferably in java script )
I also notice that for all these we need to give the no of contents for the swipes such as page 1, page 2....etc.
**How to create a swipe view based on the no of contents in the database?
i have tried implementing using iscroll...
this the scroll.js code..
document.addEventListener("orientationchange", updateLayout);
// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;
var myScroll = new iScroll("pageWrapper", {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
lockDirection: true});
updateLayout();
function updateLayout() {
var currentPage = 0;
if (wrapperWidth > 0) {
currentPage = - Math.ceil( $("#swipe_body").position().left / wrapperWidth);
}
wrapperWidth = $("#pageWrapper").width();
$("#swipe_body").css("width", wrapperWidth * 4);
$(".page").css("width", wrapperWidth - 40);
myScroll.refresh();
myScroll.scrollToPage(currentPage, 0, 0);
}
page3Scroll = new iScroll("wrapper", {hScrollbar: false, vScrollbar: false, lockDirection: true });
and i copied the iscroll.js from here
when i run the program i get an error as
04-22 18:26:01.892: E/Web Console(2453): TypeError: Result of expression 'that.wrapper' [null] is not an object. at file:///android_asset/www/iscroll.js:57
As,i was facing errors, i tried implementing it with SwipeView.js from [here] (https://github.com/cubiq/SwipeView/blob/master/src/swipeview.js) it goes in to the loop..the page controller is displayed but.the following things are missing
the page controller is been seen vertically and not horizontally
the images set for the swipe view are not visible.
the page moves vertically and not horizontally
i also, find a WARNING as Miss a drag as we are waiting for WebCore's response for touch down.
i tried adding the following code...there is no change
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
Any remedy or solution for this??