If you set minSize, Jcrop seems to have different click behavior, depending on whether or not you are additionally setting the aspectRatio option. If you set minSize + aspectRatio, you have to click and drag to get the crop box to to display; if you set minSize without setting aspectRatio, all you have to do is click to get the crop box.
This is easy to reproduce on JCrop's advanced demo page (http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced):
If you have "Allow new selections" and "minSize/maxSize setting" checked, all you have to do is click inside the image to get the crop box to display.
If you have "Allow new selections," minSize/maxSize setting," and "Aspect ratio" checked, then you have to click and drag inside the image to get the crop box to display.
Has anyone had any luck getting the crop box to display with just a click in both cases?
You could try calling the setSelect API method on the click event. The x and y coordinates are available to you, you just need to specify a width and height.
For example:
jcrop_api.setOptions({
setSelect: [10,10,100,100],
aspectRatio:2
});
where jcrop_api is initialized when "attaching" jcrop to an image:
$j(function($) {
$('#leftImg').Jcrop({
onSelect: checkSelection,
onChange: checkSelection,
onRelease: wholeImage,
bgOpacity:0.2,
bgColor:"white"
},function(){jcrop_api = this;}
);
});
Related
My GTK# (v2.12.44) app has a single Window with a single button on it. The button appears to be centered on the Window, because that's where the text appears, but the border/background for the button is shifted up and to the left for no reason I can see. Has anyone seen this before? I saw similar behavior from an Image widget. Note this only happens in Windows, not on (for example) Raspberry Pi/Jesse.
Here's the code:
Application.Init();
var window = new Window("test") {new Button("testing 1, 2, 3")};
window.Maximize();
window.ShowAll();
Application.Run();
Your code works well. Try to add a container before adding a button and set some parametrs you want to. Fill and Expand when adding Button.
I've got a ToolBarButton floating right within a heading similar to the example given on the documentation for dojox.mobile.heading ( http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/Heading.html ):-
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Voice Memos"'>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Speaker"'></span>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Done",defaultColor:"mblColorBlue"' style="float:right;"></span>
</div>
Produces:
My issue is that while this is fine with a short title (e.g. Voice Memos as above), for longer titles on smaller width devices the toolbarbutton on the right is sacrificed and not shown at all.
I'd like to show something on the page if that isn't visible. Is it possible to detect the visibility of the right-floated toolbarbutton and if it isn't visible add something further down the page (e.g. a link)? And if so, how would I do it?
Using Dojox Mobile 1.9.2
One way to go would be to set the label by code, using a long or a shortened text depending on the actual screen size. Here's a rough implementation:
var heading = registry.byId("heading");
var adjustLabel = function() {
var dim = common.getScreenSize(); // dojox/mobile/common
var label = dim.w > 350 ? // adjust the value as needed
"This is quite a long label" : "Short label";
heading.set("label", label);
heading.resize();
}
adjustLabel();
connect.subscribe("/dojox/mobile/resizeAll", function(){
adjustLabel();
});
Live here: http://jsfiddle.net/adrian_vasiliu/3p64t/ (you can test it by resizing the right-side pane: the label adjusts itself automatically; the same would happen on a phone or tablet upon orientation change).
That said, I do not reproduce (with Dojo 1.9.2) the fact that, with your code as-is, the button on the right is not shown. You can try it here: http://jsfiddle.net/adrian_vasiliu/QYjY5/. I also tested it outside of jsfiddle by adding your piece of HTML into dojox/mobile/test_Heading.html - and it behave the same in Chrome/Windows, Chrome/Android and Safari/iOS.
Background:
I am doing some UI work where I allow the user to programatically add and resize controls on a canvas.
Problem:
When resizing a combo box through AS the dropdown stays at the same width as the first time it drops down. So user places combo box on the page, clicks the down arrow, sees the options, selects an option or clicks down arrow again to close, resizes the width of the drop down, clicks the down arrow. Now drop down is the same width as original.
Have tried simple things like setting the width of the dropdown specifically and invalidating display list but it still doesn't work.
Example:
Code Example pending
While trimming my code down to an example I solved my problem. A combobox has a dropdownWidth property. I was trying to set this myComboBox.dropdownWidth = newWidth, which doesn't work (not entirely sure why, didn't dig into the SDK). However if I change my code to myComboBox.dropdown.width = newWidth it actually goes to the dropdown element and re-sizes it directly which does work.
comboBox.dropdown.width did not work for me. I had to use
comboBox.dropdown.percentWidth = 100;
It seems to work without having to call invalidateSize()
In the ComboBox, overriding the set dataProvider and performing the following seemed to work, because the dataProvider field is bound to the collectionChange event.
ComboBox.calculatePreferredSizeFromData(count:int):Object
override public function set dataProvider(value:Object):void {
super.dataProvider = value;
var size:Object = calculatePreferredSizeFromData(dataProvider.length);
this.dropdownWidth = size.width;
this.dropdown.width = this.dropdownWidth;
this.invalidateSize();
}
I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?
It does it in FF but no currently in IE.
Thanks in advance,
B
you can set the width with css using width: 125px.
Not sure if you can control the width of the popup part, but this will normally automatically resize, up to some arbitary limit.
To achieve the effect you are after, I think you'd need to use either some CSS 3 properties (which won't work in all browsers) or more likely some Javascript.
You could use the onFocus and onBlur events of the select box, and then update the style.width property accordingly. Let me know if you'd like some code samples!
Here's a quick jQuery solution that will resize the select box for you on mousedown - then change it back once something is selected or you click away.
var example = $('#some-id');
$(example).mousedown(function() {
$(this).css('width','400px');
});
$(example).blur(function({
$(this).css('width','200px');
});
$(example).change(function() {
$(this).css('width','200px');
});
I have one third party Popup to display message. It has two properties OffsetX and OffsetY. To set its position in browser.
Now i am invoking this Popup on Button Click event. I need this popup just next to my Button and for that i have to set above mentioned OffsetX and OffsetY properties of Popup.
I tried following code on Button's Click Event,
Popup.OffsetX = Button.Style.Item("Top")
Popup.OffsetY = Button.Style.Item("Left")
But values of Button.Style.Item("Top") and Button.Style.Item("Left") are always nothing and Popup always appear in Left Bottom corner due to value = nothing.
FYI, I did not set Top and Left from CSS. I just dragged the button from tool box.
The values of "Top" and "Left", unless explicitly defined in the CSS, won't be defined. Dragging controls onto the designer won't do that as the Top/Left positions can vary depending on the browser, the end users screen resolution (whether elements get re-positioned due to the width of the screen) and a number of other factors.
You'll probably need, from the sounds of it, to use a bit of client side javascript (if possible) to trigger the pop-up being shown and/or setting its Top and Left properties.