I've noticed that the CSS3 scale attribute does really bad things to jquery ui, specifically to sortable. The problem is that the mouse still needs to move as much as if the elements were not scaled. Check out this jsfiddle example.
Does anybody have thoughts on how to fix this? Is it possible to change the speed that the mouse moves? I'm going to look into the html5 native drag and drop next, and try to write my own sortable function.
UPDATE:
Jquery ui draggable works ok with CSS3 scaled elements, here is a fiddle for it.
It turns out the real answer does not require writing special move functions. Jquery ui sortable can be used as long as the items being sorted have been wrapped in a div of the appropriate size with overflow hidden. Check this jsfiddle for an example.
The problem was that I had forced the scaled divs to be close to one another using a negative margin. Then when I started to drag an item it was taking up the wrong amount of space. With the scaled item wrapped in a non-scaled div everything works as expected.
I don't have a solution for working with jquery ui but I do have a solution for working with Raphael and by extension other svg objects.
First, using chrome or firefox, go drag the dots around in this jsfiddle. Be sure to drag both dots and to use the slider at the bottom to change the scale of the box. The slider has a default scale range of .4 to 1.2. In Chrome the slider is actually a slider but in Firefox it shows up as a textbox. If you are using firefox enter values that are 100 x the scale, i.e. 70 => 0.7.
What you should have just experienced is that the black dot tracks with the mouse regardless of the scale and the red dot only tracks when the scale is 1.0.
The reason for this is the two dots are using different 'onMove' functions. The black dot moves according to 1/scale while the red dot moves normally.
var moveCorrected = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + (1/scale)*dx,
cy: this.oy + (1/scale)*dy
});
}
var move = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
}
So, in answer to my original question. You can't (and shouldn't) be able to change how the mouse moves, that is clearly user defined behavior, but you can change the move function of the object being moved to track with the mouse.
Related
I know how to draw an object arrow on the chart, which I usually do like this:
ObjectCreate(0,"prevHigh",OBJ_ARROW_DOWN,0,Time[0],High[highestCandle]);
ObjectSetInteger(0, "prevHigh", OBJPROP_COLOR, clrRed);
Now I have an indicator which (I didn't code myself and is a .ex4 file which) draws up/down arrows on the chart as seen in the image (https://imgur.com/a/8yG0suw).
How can I when for example a Magenta down arrow has been drawn and the candle (index) at which it is drawn?
Please note that the arrows not in the list of objects on the chart
Q : "How can I recognise programmatically when an up/down arrow is drawn on a chart?"
Given the facts above, your test ought evaluate the moment the CustomIndicator ( via a published / used iCustom()-call signature ) by checking it as it goes from EMPTY_VALUE to any value != EMPTY_VALUE.
Given the CustomIndicator is a closed source ( *.ex4 ) you may need to check, if it did set its own ( hidden from our sight ) value, other than a current visible EMPTY_VALUE, yet this "re-calibration" will work, after you get a few manual tests of the CustomIndicator values for bars, that do not show any arrow - like for the 2020-Apr-08 09:30 et al v/s the displayed arrows are not the MQL4-Objects on their own, they are the closed-source CustomIndicator's SetIndexStyle() / SetIndexArrow() by-products, thus not inspectable either in the Object-List, or in the *.mq4 source-code.
Yet, detectable
I have a problem with aligning the SVG component DataPointCircle inside the Victory Scatter Graph.
My main problem is not how it looks but how it acts.
the tooltip and the VictoryVoronoiContainer is acting weird when hovered over the data circles.
When the data circle is hovered it sometimes shows the tooltip sometimes not!, this is more clear on the last data point.
Since I had to do this x={x - 10} y={y - 10} to properly align the data points, I thought that maybe it is causing a distortion.
I need the tooltip and VictoryVoronoiContainer to act normal. I'm 100% if it is an aligning problem or if I need to do something else, suggestions would be lovely!.
Thanks in advance.
Here is a SandBox
https://codesandbox.io/s/YED2ql2mK
The answer was posted in github:
Yes, that [manually add offset props x={x - 10} y={y - 10}] would definitely be causing the issue. VictoryVoronoiContainer calculates the positions of all of your data points. If you move the points around manually, the triggers will no longer match up. I don't think this is something I can fix at the library level. It might be better to add the tooltips directly to VictoryScatter so that they will be attached to your custom point components regardless of how you you manually position them
https://github.com/FormidableLabs/victory/issues/695
I have a jQuery UI slider here.
http://jsfiddle.net/DrR7s/7/
I have animate attribues value as "true". When I place my mouse pointer somewhere on the bar and click there, it is giving a slide visual effect. But if I drag the slider pointer to a different point, I am not getting the animated slide effect which I got in the other case. It looks like its jumping from one point to another. Is there any way I can have the slide effect here too ?
Below is my script:
$(function(){
$('#slider').slider({
animate: true,
step:1,
min:0,
max:5
});
});
You're using the "Snap to Increments" version of the slider. If you take of the min, max, step or just set your step to something like .1, you'll get smoother sliding. But if you want to snap to those increments, you can't get smooth dragging.
If you really wanted the smooth sliding and the forced incremental values, you could just round the numbers when you go to handle them.
You need to raise your max number, if you put it to max:100, it has a smoother dragging. The max tells the slider how many points to place on the slider itself. So going from point 0 to point 1 is big jump.
I am using jQuery-ui slider for the first time and am confused by a rather basic issue. When setting my slider, I wish to do so without using a theme. When I slide from left to right, the right hand position of the slider handle steps 1 handle width past the slider. This is due to the slider css positioning the handle with left: 100%. I note many many other people using the slider without any difficulty, but can't see how they are getting round this issue.
Demo of issue
I assume I am missing something embarrassingly basic and would love to know what.
many thanks
Having read a bit more into this, it seems that the slider is designed to act in the way described, but with the handle offset to the left by 50% of its width. Thus the centre of the bar denotes to value - which makes total sense (when the slider denotes a value).
To use the slider as a scrollbar simply wrap the slider in a div which is padded left and right with 50% of the slider's width. I've updated my demo to reflect this.
If anyone has a better solution, without needing the extra div, I would like to see it.
I checked your demo. You are missing some css files. DID you also download the css files from jquery ui site. For instance ui-widget-content is the css that specifies the width of the slider bar and its missing in your slider. Get a css and link it to your page and you should be fine.
Set a left margin or minus half the width of the handle
It also helps to ensure that the values passed to the slider are integer. I had some issues with the pointer of the slider being in the wrong place but when I forced the value to be integer with parseInt() like so:
value: parseInt(whateverValue)
it worked fine.
I find css "translate" property the best option here...
.ui-slider-horizontal .ui-slider-handle {
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
Adjust translate pixel value to your needs :)
I have a Delphi form with TImages on it. Actually, it's a "fake" desktop with "icons" (the TImages).
When the user resizes the form (scales it or maximizes it, for example) the icons on the form should align proportionally.
Right now, I'm doing something like this with the images:
ImageX.Left:=Round(ImageX.Left * (Width / OldWidth));
ImageX.Top:=Round(ImageX.Top * (Height / OldHeight));
Now this is OK, as long as I start to make the maximized form smaller.
In that case the rightmost images are cut in part by the form's border (they're off the form's client area).
If I reposition these images to fit the client area, then the position of the icons get distorted upon scaling back to maximum size.
Any ideas for a better algorithm/fix?
Thanks!
First of all, you can't have a correctly scaled desktop when you only move the images, and don't scale them as well. You can do slightly better by moving the midpoints of your images, not their top left corner. It still won't be perfect, but it will work better. Of course, now the images will be cropped on all four sides, not just bottom and right, but at least it will be symmetrical :-)
Second, you will get accumulative rounding errors since you constantly override the "original" values (ImageX's top and left coordinate). You'd be better off having the original values stored in some sort of collection or array, and setting the new position based on the original value, rather than the previous value.
Something like this:
ImageX.Left:=Round(ImageX_OriginalLeft * (Width / Original_Width));