I have a simple dojo gauge, and I would like to add animation so the needle moves from 0 to it's value when the page loads. I like the easing option for elasticOut, but I don't know how to use it. Can someone help me to implement it?
This code snippet is from my xpages custom control that uses custom properties for each of the indicator values.
if (_indType == "Needle") {
gauge.addIndicator(new dojox.widget.gauge.AnalogNeedleIndicator({
'value': parseInt(_indValue),'color': _indColor,'width': parseInt(_indWidth),noChange: true,useRangeStyles: 8
}));
}
If available out-of-the-box, the animationDuration property looks the most likely, see http://dojotoolkit.org/reference-guide/1.10/dojox/dgauges.html. If not, you may need to extend the relevant Dojo widget class.
Related
I have included the less files for Ant Design (antd) into my React-app, because I want to customise the theme, as explained here and here. However, I am uncertain which variables to change, to edit or remove the fading-effect when hovering menu-items. (I.e. I would like the text and background color of the hovered menu item to change faster or immediately.)
You cannot achieve that level of customization through editing theme variable. you would need to manually apply custom css on those elements that you would like to customize, eg
for example, making the hover animation to 4s while you hover it.
.ant-menu-item:hover {
transition-duration: 4s;
}
to find exact classname you can always inspect the node
using the same idea you can fit your custom needs.
Im new to react-native. I have just created a reusable component of text input as I want.
Im using that reusable component into a view. At one place Im adding reusable component 4 times, and at another place 7 times.
example :
<Textinput
style={styles.textInput}
secureTextEntry={false}
textInputName={'USERNAME'}
showBottomBorder={true}
height={45}
onTextChange={this.onTextChangeUsername}
/>
using above code 7 times in view , causes increase of size of the view.
But I dont want to allow this at it looks ugly on iPhone 4s screen.
So is there any way to disallow that ? Or rather can I give height to reusable component depending upon its parent view's height ?
Like , height={parentView.height/7} ?
I'm not sure exactly how to solve your problem, but if you wanted to add a custom width/height component that depended on the size of the div, you could do something like this with a class function:
resizeGraphs(){
var div = document.getElementsByClassName("yourcontainer")
if (div[0] != undefined){
var divWidth = document.getElementsByClassName("yourcontainer")[0].clientWidth //or .clientHeight
this.setState({
divWidth,
})}}
To explain, this will be called in componentDidMount (I guess you don't have to worry about window resizing). It gets the width of a given class and you can scale your inner elements appropriately as you suggested.
I guess warning flags should be going off if you see direct references to the DOM in react, but I wasn't sure how else to solve this. If anyone has a more "react-y" solution i'd love to see it..
I would like to make vertical menu with offset which is calculated by position. Center row is more on right than others, like in picture. Also center row is marked as pressed. Can anyone suggest some sample how to achieve that? Now I am looking at iCarousel, but can't find how to make vertical carousel like this
As per your image displayed in question, it looks like you can use this custom tableview code.
Where in did select row method you can write your own logical code.
CustomCircularTableView
Hope this will work for you.
Enjoy Coding :)
Set the vertical property to true/YES; And you will probably need to set the carousel type to iCarouselTypeCustom. Then you can override the delegate methods:
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
- (CGFloat)carousel:(iCarousel *)carousel valueForTransformOption:(iCarouselTranformOption)option withDefault:(CGFloat)value;
- (CGFloat)carousel:(iCarousel *)carousel itemAlphaForOffset:(CGFloat)offset;
For an example I suggest looking inside iCarousel.m itself and following the example of iCarouselTypeWheel type. This will get very close to the effect you want, but you will need to add the custom highlighting code. For that, I suggest implementing the carouselCurrentItemIndexUpdated: method and updating the views there (setting background color etc.).
I'm using jQuery Isotope and I'm wondering if there's a built-in (or at least "easy") way to have it dynamically resize elements via a user control, like a slider.
There's a fluid/responsive demo in the documentation, but it resizes elements based on the size of the browser window. I'm looking for something where the window/container would stay the same size, and the user could control the size of the elements by dragging a slider (like the thumbnail size slider in iPhoto).
Is this even possible? I haven't been able to find any examples of Isotope used in this way.
You should try this link: http://isotope.metafizzy.co/demos/relayout.html This sample shows you how an item resizes onclick, but you can transfer this code to make it work with a slider. But as far as I know this plugin uses predefined width and heights via css-classes for its animations, so you might add a lot of css-classes different sizes and it won't work stageless but I am insecure about this. You'll probably need to set the size of an element dynamically. For example you can use the following code to increase the size of an item 5px in width and height:
/* resizing and relayouting the list */
$container.on('click', '.item', function(){
$this = $(this);
$this.width( $this.width() + 5);
$this.height( $this.height() + 5);
//reorganizes the elements in the list
$container.isotope('reLayout');
});
$container is your wrapping element and ".item" is the class of an item. You should probably use a named function for this event handler to bind and call it with your scroller. Hope that helps.
I'm fairly new to iPhone programming and am trying to implement a double-component PickerView. At this point the picker works fine in terms of taking user input, created with Interface Builder. However, I need to change the font size to accommodate the text length in each column. I very much would appreciate any link to a straightforward method to creating a multi-component picker with an adjustable font size. Seems like it is not possible if Interface Builder is used to create the picker. So far I have not found any code links that address this issue in detail.
Thanks in advance.
You need to implement the delegate method...
pickerView:viewForRow:forComponent:reusingView:
... and then alter the font of the UI element inside the provided view. I think the default is a UILabel. Alternatively, you can provide your own custom view.