I am trying to tween the color of a Kinetic.Rect when the mouse moves over it. I also have a piece of text defined at the same location. It seems that adding padding to a Kinetic.Text interferes with mouseover events.
I have created a fiddle at http://jsfiddle.net/d5pbK/
I have two padding statements one at line 40 and one at line 45.
The way the fiddle is right now when I move the mouse in the blue rectangle its changes color but if you move the mouse over the horizontal text extents then the rectangle does NOT change color.
Also if you activate any of the padding statements then only when I place the mouse over the orange border, only then does the rectangle change colors.
I would like the rectangle to change colors when the mouse is over it irrespectively of the text.
The Kinetic.Text element takes up the same space as the Kinetic.Rect element when padding is added to the text.
So instead of adding the events to the Kinetic.Rect, add them to the Kinetic.Text
Updated fiddle at: http://jsfiddle.net/MZ57d/
Related
Using latex2html5 Javascript library, I try to fill a parallelogram with grey color and solid fillstyle.
This library has a subset of pstricks latex functions, so my issue may not be solved.
Here's [the link of my current version][2]. My issue is that, once page is loaded and parallelogram is drawn and filled (see grey area), if I move the mouse over or near the figure, the black diagonal segment of the middle disappears automatically and I don't know to prevent this.
The specific part to fill the parallelogram is :
% Fill
\psplot[algebraic,linewidth=1pt, linecolor=grey, fillstyle=solid, fillcolor=grey]{-2}{0}{-2-0.25*x}
\psplot[algebraic,linewidth=1pt, linecolor=grey, fillstyle=solid, fillcolor=grey]{-2}{0}{2-0.25*x}
I didn't find how to fix this behavior, if someone could see what's wrong ...
UPDATE 1:
the concerned diagonal segment disappears only when I move the mouse horizontally and remains displayed if I move vertically the mouse. You can check it on [the above link][2]
Probably due to a Latex2Html glitch. Script refreshes the SVG output on hover event and parallelogram is appended at the end of the SVG, so it overlaps the grid. If your grid is placed before the psplot in your TeX document, try to put it to the end:
\begin{pspicture}
\psplot ...
\psplot ...
\psaxes ...
\end{pspicture}
I wrote this code using d3.js.
Here's my problem:
When you mouse over the rectangles, the pop up tooltip appears, but not when the pointer is over the text within the rectangle.
I would like the tooltip to appear when the mouse is over the text as well as the other parts of the shape. How can this be accomplished?
Here's my code for the rectangle:
cartridgeRectangles.push({"x_axis":startx+2, "y_axis":90+textbeginy, "width":35, "height":15, "color":discovery_status_color, "stroke":"#33CC33", "thickness":1, "mover":chassisDetails , "movercolor":"darkgreen", "mout":"True", "moutcolor":"#33CC33" });
The problem is that the text is capturing the mouse. This can be avoided by removing the pointer events for the text in css:
// This will apply to all text elements, consider using a class
text {
pointer-events: none;
}
More information in pointer events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
How do I drag the background image and change its position? Like when you change the position of your cover photo on facebook.
I've searched everywhere but can't find the right one.
On mousedown, log the current mouse position. Create a mask, and on that mask:
On mousemove, get the current mouse position and subtract it from the original mouse position. Move the background accordingly
On mouseup, remove the mask and save the new position.
You can try with this jQuery plugin, and is as easy as:
element.backgroundDraggable()
Here you have a demo
Is it possible to switch the object being dragged to another object on clicking the first object?
Problem: In the jsfiddle below, when the red circle is dragged, it changes into a blue rectangle but does not respond to the initial drag. A 2nd drag has to be made on the blue rectangle to drag it.
Desired: It should change from red circle to blue rectangle and the blue rectangle should immediately follow the dragging motion smoothly.
Attempt: I tried to .simulate() the events but it does not seem to work. Any ideas?
circle.on('dragmove', function(e) {
circle.simulate('click'); // used click handler to change into a blue rectange
circle.simulate('dragend'); // (FAILED) stop dragging red circle
rectangle.simulate('dragmove'); // (FAILED) start dragging blue rectangle
});
JSFIDDLE: http://jsfiddle.net/M6ufm/
http://jsfiddle.net/M6ufm/3/
I updated this for you.
Essentially, you were removing the circle and then simulating an event on it, then simulating an event on the rectangle.
// Show BLUE rectangle on clicking RED circle, Hide RED circle, start dragging rectangle
circle.on('dragstart mousedown', function(e) {
layer.add(rectangle);
circle.remove();
rectangle.simulate('mousedown');
rectangle.simulate('dragstart');
});
I have two blocks in HTML5 canvas.
Blue Block ie fixed in the canvas
Yellow Block that can be dragged with mouse.
When someone moves the yellow block over blue block, I want to change the color of overlapping or intersection regions to green. (please see attached image to have clear idea)
Since blue + yellow = green, is there any way to achieve this by changing the opacity level of blocks or I have to search for the overlapping area of the two blocks and display green block in that area or is there any other way?
I would like to know what is the best approach to achieve this?
Have a look at canvas globalCompositeOperation. The lighter composite type seems to fit what you're after.
You could use 3 elements:
Yellow bottom: Opacity 1
Yellow top: Opacity 0.x, same dimensions as the bottom one
Blue: Full opacity between the yellow divs
Example on jsFiddle
This is far from done, but maybe a step in the right direction.
EDIT: I noticed too late that you requested it on canvas, but the principe should be the same there.