I need a JavaScript code to make mouse double click by itself. I will use it inside my Java code . This one is a selenium project for testing-purposes but there is not any way to make mouse double click in selenium so i want to use javaScript to do that inside my java code . Do you have any idea?
This is old question of me "How to double click any where on web page?"
They said i should use JavaScript to make mouse double click but how ?
To make Mouse Double Click you can write a script and pass it to the executeScript() method as follows :
Script :
String jsDoubleClick =
"var target = arguments[0]; " +
"var offsetX = arguments[1]; " +
"var offsetY = arguments[2]; " +
"var rect = target.getBoundingClientRect(); " +
"var cx = rect.left + (offsetX || (rect.width / 2)); " +
"var cy = rect.top + (offsetY || (rect.height / 2)); " +
" " +
"emit('mousedown', {clientX: cx, clientY: cy, buttons: 1}); " +
"emit('mouseup', {clientX: cx, clientY: cy}); " +
"emit('mousedown', {clientX: cx, clientY: cy, buttons: 1}); " +
"emit('mouseup', {clientX: cx, clientY: cy}); " +
"emit('click', {clientX: cx, clientY: cy, detail: 2}); " +
" " +
"function emit(name, init) { " +
"target.dispatchEvent(new MouseEvent(name, init)); " +
"} " ;
Invoking the script through executeScript() from your #Test :
new Actions(driver).moveToElement(myElem, posX, posY).perform();
((JavascriptExecutor)driver).executeScript(jsDoubleClick, myElem, posX, posY);
As Mozfet says JQuery ! it's so easy with JQuery !
$("#myId").trigger('dblclick');
then you listen for this double click
$("#myId").on('dblclick',function(){
// do it !
});
// you can event make you own event
$("#myId").trigger('retrieve');
then you listen for this custom event
$("#myId").on('retrieve',function(){
// do it !
});
I often use it in datatables : I've got a popover (a small menu on the left td of each row) if the user choose "open modal" i then trigger a double click which goes to the table which is already waiting for a double click from the user on the row. So i don't need to implement 2 events
Using JQuery:
$(selector).dblclick()
Related
I'm trying to drag a Path element with Snap.SVG, I'm using drag method
when method is called without parmeteres it seems to work ok, but when I add the listeners I cant make it work, It's looks like is not posible to change to position x,y attributes
start = () ->
console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);
moveFunc = (dx, dy, posx, posy) ->
this.attr( { cx: posx , cy: posy } )
stop = () ->
console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);
p.drag( moveFunc, start, stop)
The previos code doesnt work with path element, but it does with circle.
Next code can move it but when drag it again loose the last position
moveFunc = (dx, dy, posx, posy) ->
this.transform( "translate("+dx+", "+dy+")")
So guessing, last method do the trick for translate it, but it doesnt really change the position.
To move a path, you will need to transform it, try this format.
this.transform('t' + dx + ',' + dy );
However, as mentioned it won't keep the last position. For that you need to store the transform on the mouse down....
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
}
var start = function() {
this.data('origTransform', this.transform().local );
}
example
Recently I have been trying to get a grasp of javascript. I've been experimenting through the past couple of months with different code to see what all is possible through javascript. Recently I've been trying to find various ways to capture the mouse coordinates through javascript with a canvas. Here's my attempt: http://jsfiddle.net/f8n2one4/
As you can see, there's a MouseHandler which is supposed to capture the mouse coordinates through the ClientX and ClientY variables. However, when I try to display these variables, nothing comes up. Why is that?
document.getElementById("test").innerHTML = "x: " + x + " y: " + y;
Shouldn't it show the x and y values?
The x and y variable are out of the scope of your draw() method.
try the following:
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
player();
MouseHandler.init(document);
var clientPosition = MouseHandler.getPos();
document.getElementById("test").innerHTML = "x: " + clientPosition.x + " y: " + clientPosition.y;
}
See it working here.
I would recommend not to initialize the whole MouseHandler every interval, just getting the position on every interval.
Also if you are animating use .requestanimationframe() instead of setInterval, you'll get better performance.
In your example are you are initializing the mouse handler (with MouseHandler.init(element)) but the x and y values have to be accessed using the getPos() method:
document.getElementById("test").innerHTML =
"x: " + MouseHandler.getPos().x +
" y: " + MouseHandler.getPos().y;
You can see a working update to your fiddle here
The x and y do not exist. You need to use:
document.getElementById("test").innerHTML = "x: " + MouseHandler.getPos().x + " y: " + MouseHandler.getPos().y;
Fiddle: http://jsfiddle.net/f8n2one4/3/
It's actually really simple, your x, y are out of scope.
You could access them via your MouseHandler variable :
MouseHandler.getPos().x
MouseHandler.getPos().y
Or try OOP Javascript and instantiating the MouseHandler with a 'new' operator
var MouseHandler = function() {
this.x = 0;
this.y = 0;
}
var myMouseHandler = new MouseHandler();
console.log(myMouseHandler.x + myMouseHandler.y);
I'm implementing a drag and drop system with Raphael.js. For this, i'm storing the original x and y position on mousedown, and if there is a collision on mouseup, I want to reset the position to the original one. Here's the bit of code that does the resetting ("this" refers to the raphael object here):
var transformString = "t" + this.original_x + "," + this.original_y;
this.attr("transform", transformString);
What's weird is that after setting the attribute, the transform string changes by a couple pixels. I debugged this with:
var transformString = "t" + this.original_x + "," + this.original_y;
this.attr("transform", transformString);
console.log("transformString: " + transformString);
console.log("transformAttrib: " + this.attr("transform"));
AFAIK, both logged values should be equal in any case. But they are sometimes off by as much as 20px. Does anyone know what's going on here?
E: Here is a simplified version, without the collision testing, which still reproduces the bug: http://jsfiddle.net/6ozsfdaf
I'm not sure why this is happening. I tried even capturing the co-ordinates before onstart using onmousedown event, even that didnt work. Also different methods provided by Raphael to get the co-ordinates using getBBox(), accessing x and y directly, didnt help.
So what I thought is, we should Maintain and Track the coordinates manually. So I have used your original_x and original_y variables which captures the position of the <path> after you create and set with some transform value. Below is the code of the same
Here is the working fiddle.
this.raph = R.path(svgPath).attr({
stroke: "hsb(0, 1, 1)",
fill: "#fff",
opacity: 1.0,
cx: 100,
cy: 900
}).transform("t" + x + "," + y);
this.raph.original_x = x;
this.raph.original_y = y;
//comment the lines in start method which captures original_x and original_y
//this.original_x = Raphael.parseTransformString(this.attr("transform"))[0][1];
//this.original_y = Raphael.parseTransformString(this.attr("transform"))[0][2];
More info regarding tracking the co-ordinates:
We will have one more coordinate say updated_x and updated_y, which will be updated in the move method. onFinish/onUp method, we can have the check whether we should update the new position or not. Here, it just asks whether new position should be updated or not and based on our input, it sets the final result.
Check this fiddle:
this.start = function() {
if (this.reference.static) return;
//this.original_x = Raphael.parseTransformString(this.attr("transform"))[0][1];
//this.original_y = Raphael.parseTransformString(this.attr("transform"))[0][2];
this.animate({r: 70, opacity: 0.25}, 500, ">");
this.updated_x = this.original_x;
this.updated_y = this.original_y;
};
this.move = function(dx, dy) {
//var ts = Raphael.parseTransformString(this.attr("transform"));
this.updated_x = this.original_x + dx;
this.updated_y = this.original_y + dy;
//ts[0][1] = this.original_x + dx;
//ts[0][2] = this.original_y + dy;
this.attr({transform: 't' + this.updated_x + ',' + this.updated_y});
};
this.up = function() {
if(confirm("Shall I update the new position??")) {
this.original_x = this.updated_x;
this.original_y = this.updated_y;
}
var transformString = "t" + this.original_x + "," + this.original_y;
this.attr("transform", transformString);
this.attr({fill: "#fff"});
this.animate({r: 50, opacity: 1}, 500, ">");
};
I'm not quite sure why that problem happens yet, but I'm wondering if this may be a better solution anyway. Rather than parsing the strings each time, just store the transform and use that.
I've also switched it to use the transform() method, rather than the attr(transform:..) method. Whilst I think that would normally work, its not quite right logically, as SVG attributes don't take a Raphael transform string, but I assume Raph would intercept that and deal with it (but maybe more error prone).
Its also worth bearing in mind in a transform string that 't' is a relative transform and 'T' is an absolute transform (I don't think thats the issue as there's no preceding transform, but I was wondering if its also related).
this.start = function() {
if (this.reference.static) return;
this.original_t = this.transform();
this.animate({r: 70, opacity: 0.25}, 500, ">");
};
this.move = function(dx, dy) {
this.transform( this.original_t + 't' + dx + ',' + dy);
};
this.up = function() {
this.transform( this.original_t );
console.log("transformString: " + this.original_t);
console.log("transformAttrib: " + this.transform());
this.attr({fill: "#fff"});
this.animate({r: 50, opacity: 1}, 500, ">");
};
jsfiddle
Found an interesting fix: you can avoid the situation if you add an epsilon to both this.original_x and this.original_y. The problem seems to disappear if this.original_x and this.original_y are not exactly the same as the starting coordinates. Check out: http://jsfiddle.net/6ozsfdaf/13/
this.up = function() {
var ts;
this.original_x += 0.0000000001;
this.original_y += 0.0000000001;
var transformString = "t" + this.original_x + "," + this.original_y;
this.attr("transform", transformString);
console.log("transformString: " + transformString);
console.log("transformAttrib: " + this.attr("transform"));
this.attr({fill: "#fff"});
this.animate({r: 50, opacity: 1}, 500, ">");
};
EDIT
Found the problem. In Raphael, Raphael.parseTransformString()'s output is cached and reused. In your move() method, you modify the output of Raphael.parseTransformString(), and Raphael tries to use your modified array when you supply it with the same string. This happens when the first drag() event is registered. You ask it to parse the current place, and then update the output array of arrays with the new location. And then, way later, when this.up() is called, you supply the Raphael.parseTransformString() with the same string. Raphael then uses your modified array of arrays. This is the fixed fiddle: http://jsfiddle.net/6ozsfdaf/16/
And here is the code (use a new array of arrays to transform when moved each time):
this.move = function(dx, dy) {
var ts = [];
ts.push(new Array('t'));
ts[0][1] = this.original_x + dx;
ts[0][2] = this.original_y + dy;
this.attr({transform: ts.toString()});
};
I am using javascript Gesture events to detect multitouch pan/scale/rotation applied to an element in a HTML document.
Visit this URL with an iPad:
http://www.merkwelt.com/people/stan/rotate_test/
You can touch the element with two finger and rotate it, but sometimes the rotation property goes go astray and my element flips around many full rotations.
Here is part of my code, I am really only taking the value directly from the event object:
...bind("gesturechange",function(e){
e.preventDefault();
curX = e.originalEvent.pageX - startX;
curY = e.originalEvent.pageY - startY;
node.style.webkitTransform = "rotate(" + (e.originalEvent.rotation) + "deg)" +
" scale(" + e.originalEvent.scale + ") translate3D(" + curX + "px, " + curY + "px, 0px)";
}...
What happens is that the value gets either 360 degrees added or subtracted, so I could monitor the value and react to sudden large changes, but this feels like a last resort.
Am I missing something obvious?
I found a solution.
In order to avoid sudden changes in the rotation that don't reflect real finger moves you need to test for that. I do that testing if the rotation changed more then 300 degrees in either direction, if it does then you need to add or subtract 360 depending on the direction. Not really intuitive, but it works.
Fixed page is here:
http://www.merkwelt.com/people/stan/rotate_test/index2.html
Here is the code
<script type="text/javascript">
var node;
var node_rotation=0;
var node_last_rotation=0;
$('.frame').bind("gesturestart",function(e){
e.preventDefault();
node=e.currentTarget;
startX=e.originalEvent.pageX;
startY=e.originalEvent.pageY;
node_rotation=e.originalEvent.rotation;
node_last_rotation=node_rotation;
}).bind("gesturechange",function(e){
e.preventDefault();
//whats the difference to the last given rotation?
var diff=(e.originalEvent.rotation-node_last_rotation)%360;
//test for the outliers and correct if needed
if( diff<-300)
{
diff+=360;
}
else if(diff>300)
{
diff-=360;
}
node_rotation+=diff;
node_last_rotation=e.originalEvent.rotation;
node.style.webkitTransform = "rotate(" + (node_rotation) + "deg)" +
" scale(" + (e.originalEvent.scale) +
") translate3D(" + (e.originalEvent.pageX - startX) + "px, " + (e.originalEvent.pageY - startY) + "px, 0px)";
}).bind("gestureend",function(e){
e.preventDefault();
});
</script>
This should be typically easy, I want to perform tracking of mouse movements. I'm capable of capturing the XY co-ords.
However, as far as I'm aware, this will vary according to the browser size, right ?
If so, can anyone recommend other things to track to ensure my results are accurate?
P.s I'm using the following Jquery example
$("html").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
Coordinates are independent of the browser size.
Hope this helps. Cheers
PS: Use $(window).mousemove or $(document).mousemove instead of $("html").mousemove, it's a better practice.