When creating a nice slider using Mootools More 1.5.1 Slider class, I noticed that the 'knob' can be dragged too far to the right.
Consider this slider scenario:
|--|~|----------------|
I find I am able to do this:
|---------------------||~|
which is no good when the parent div has overflow:hidden set.
This occurs because the Drag object in the Slider class sets the left most x position ( limit.x[1] ) as the width of the passed in element (parent of the knob).
I would expect this limit to be the the element width minus the knob width.
I get the same problem whether the 'knob' is inside or outside the 'element' (above and below in the DOM).
The only way I could fix this was with a hack:
if(mySlider.drag.options.limit.x[1]===mySlider.element.getSize().x){
mySlider.drag.options.limit.x[1] -= mySlider.knob.getSize().x;
mySlider.drag.setOptions(mySlider.drag.options);
}
Check out this Fiddle (examples of broken and hacked).
Am I missing something here? Or should this be raised as a bug?
Related
What would be the approach with Vue.Draggable/SortableJS in order to achieve the functionality as shown in this animated gif?
The default behavior of Sortable for nesting is to drag the element up to the above element until the mouse reaches emptyInsertThreshold pixels from the drop zone of the above element but I would like to be able to nest elements by dragging them to the right. Same for un-nesting.
I have set emptyInsertThreshold to 0 to disable the default behavior and now when I drag the element to the right I get the following events fired: clone and start (in that order).
But how do I:
Can get notified when the mouse has traveled the pre-defined distance to the right?
Inform Vue.Draggable that the ghost element should be nested as a child to the element under which I am doing the horizontal movement?
You can get the mouse position given in the start event under event.originalEvent and in the onMove event using the originalEvent argument (2nd argument). I would track the % that the mouse is past the end of the list item above the dragged item, using: (clientX - aboveItemStart) / aboveItemWidth. Then when it reaches 10% or so, change the DOM directly using event.dragged. Not sure how you would modify it to work with Vue.Draggable... you might need to edit the Vue.Draggable source.
I'm working with a jsx script in Photoshop that resizes images to a specific size. The resolution is set at 200 dpi. After running the script, I can check this under Image > Image Size.
Problem is, depending on the image, it initially tends to show the resolution in dots/cm instead of dots/inch. The number itself is correct either way, but I'd like to see it mentioned there as the latter. Is there a way to realize this in JSX?
Thanks!
J
The easy way is to open your Info Panel by going to Window > Info, and then click on the x/y coordinates dropdown in the Info Panel and select inches. The dropdown is the + toward the lower-left of the panel, with the little down arrow at the bottom right of the + symbol (The plus is actually an x axis and y axis representing a coordinate plane). After that, when you check under Image > Image Size, it should show you all information in inches instead of centimeters. This should also show you inches anywhere else you look in Photoshop's interface, too, such as the rulers.
An exception would be that when using selection tools, such as the marquee tool with a setting like "fixed size" selected, you can override the units setting by typing in another unit in the Width and Height sections at the top of the window. You can even mix and match units, making a precise selection that is, for example, exactly 250 pixels (px in the Width setting) by 30 points (pt in the Height setting). And when you check your image size, it should still show you results in inches.
And finally, to answer your question as it was asked, the following code will change your rulerUnits preference without opening the Info Panel.
#target Photoshop
preferences.rulerUnits = Units.INCHES;
Note that if you want to write other scripts, you can change the rulerUnits to whatever units the script calls for, and then at the end of the script put your units back the way you had them.
#target Photoshop
// Save the original rulerUnits setting to a variable
var originalRulerUnits = preferences.rulerUnits;
// Change the rulerUnits to Inches
preferences.rulerUnits = Units.INCHES;
//
// Do magical scripty stuff here...
//
// Restore the original setting
preferences.rulerUnits = originalRulerUnits;
// List of rulerUnits settings available
// Units.CM
// Units.INCHES
// Units.MM
// Units.PERCENT
// Units.PICAS
// Units.PIXELS
// Units.POINTS
How can I detect if a button is in a desired area
I have used if( button.frame.orgin.x == area.framee.orgin.x){
if (button.frame.orgin.y == area.frame.orgin.y )};
The Problem with this code is that it is very exact so it is hard to match up the button with the label. So I would like to know how to detect if a button is inside a desired area. And how to make the area bigger than the button. Thanks In advance
Your best option is probably CGRectContainsRect() which would work something like:
if(CGRectContainsRect(someRect, button.frame))
{
//Button is in area.
}
To expand the rect you can use CGRectInset(), passing negative values to increase the frame size by that amount. This function will maintain the center of the original rect.
CGRect newRect = CGRectInset (smallRect, -10.0f, -10.0f);
You can read more about CGGeometry functions in the docs.
Use GCRectContainsRect(frame1, frame2); to see if an object is contained within another object. Or use CGRectIntersectsRect(frame1, frame2); to see if the rects overlap at all.
OK, so here's the deal :
I'm having a vertical NSSplitView (actually using DMSplitView sublass) with 2 subviews in it
I want the bottom one to be of fixed height
DMSplitView manages to "fix" its size under certain conditions (e.g. when the window is resized the bottom view stays as is)
However, if the user tries to drag-resize the view (although both min/max constraints have been set) he's able to, which means that the bottom view is not of fixed height after all.
And this all of my (related) code :
[_mainHorizontalSplitView setMinSize:25 ofSubviewAtIndex:1];
[_mainHorizontalSplitView setMaxSize:25 ofSubviewAtIndex:1];
So, any ideas of a possible workaround for this?
Just found it (actually a modification to DMSplitView delegate) :
- (CGFloat)splitView:(NSSplitView *)splitView
constrainSplitPosition:(CGFloat)proposedPosition
ofSubviewAt:(NSInteger)dividerIndex
{
return [self positionOfDividerAtIndex:dividerIndex];
}
I have a Zedgraph textobj which I want to place always in the same x, y position (ASP.NET image). I noticed that the text doesn't always show in the same starting x position. It shifts depending on the text's length. I tried to have the text to have the same length by padding it with spaces. It helped a little but the result is not always consistent. I am using PaneFraction for coordType.
What's the proper method to have a piece of text to always show in the same x position. I am using textobj as a title because the native title property always shows up centered and I need my title be left aligned to the graph.
No, it does not depend on text lenght, however...
It depends on various other things:
Horizontal and vertical align of the text box (see: Location )
Current size of the pane. The font size is scaled dynamically to fit the changing size of the chart.
Counting proper positions to have TextObj (or any other object) always at the same place is quite hard. So you need avoid as much as you can any numbers/fractions in your location coordinates. ZedGraph sometimes calculates the true position in quite odd way then.
You haven't provided any code, so it's hard to tell if and where you made the mistake (if any). But, if I were you, I would do something like that:
TextObj fakeTitle = new TextObj("some title\n ", 0.0, 0.0); // I'm using \n to have additional line - this would give me some space, margin.
fakeTitle.Location.CoordinateFrame = CoordType.ChartFraction;
fakeTitle.Location.AlignH = AlignH.Left; // Left align - that's what you need
fakeTitle.Location.AlignV = AlignV.Bottom; // Bottom - it means, that left bottom corner of your object would be located at the left top corner of the chart (point (0,0))
fakeTitle.FontSpec.Border.IsVisible = false; // Disable the border
fakeTitle.FontSpec.Fill.IsVisible = false; // ... and the fill. You don't need it.
zg1.MasterPane[0].GraphObjList.Add(fakeTitle);
I'm using ChartFraction coordinates instead of PaneFraction (as drharris suggests) coordinates to have the title nicely aligned with the left border of the chart. Otherwise it would be flushed totally to the left side (no margin etc...) - it looks better this way.
But make sure you didn't set too big font size - it could be clipped at the top
Are you using this constructor?
TextObj(text, x, y, coordType, alignH, alignV)
If not, then be sure you're setting alignH to AlignH.Left and alignV to AlignV.Top. Then X and Y should be 0, 0. PaneFraction for the coordType should be the correct option here, unless I'm missing your intent.
Alternatively, you can simply download Zedgraph code, edit it to Left-align the title (or even better, provide an option for this, which should have been done originally), and then use it in production. Beauty of open source.