I'm creating an for to create randomly textAreas but I need to know which textArea was pressed by the user.
Is there any way to enter a unique ID for each textArea?
How I create the textView:
var txtArea = Ti.UI.createTextArea({
color : '#000',
backgroundColor : 'transparent',
font: {
fontSize : 28,
fontWeight : 'normal',
},
editable : false,
textAlign : 'left',
value : a[i],
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
I tried to put "id : i", but all textAreas returned the same ID.
It's not suggested to add custom properties to Titanium proxies. Here is what I would do (based on my guess of what you try to achieve):
for(var i = 0; i < 10; i++){
var txtArea = Ti.UI.createTextArea({
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
(function(){
var id = i;
txtArea.addEventListener('click',function(){
console.log(id);
});
})();
}
If you want assign a numerical ID, you are in the right way but I think that you must insert all TextAreas in rows of Table view. This because you get ID from table view row not from Textarea. Your id's attemp was correct if you inserted in a table view row.
Your code for create textArea is something like this:
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
You can furthermore get the id of each row simply add a click Event Listener, in particular case:
tableViewRowName.addEventListener('click', function(e) {
console.log(e.source.id);
}
Let me know if works and not hesitate to contact me.
FULL EXAMPLE
In your controller js
var win = Ti.UI.createWindow();
var scrollableView = Ti.UI.createScrollView();
var table = Ti.UI.createTableView();
var tableData = [];
for(var i=0;i<list.length;i++){
var row = Ti.UI.createTableViewRow();
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
row.add(txtArea);
tableData.push(row);
}
table.setData(tableData);
scrollableView.add(table);
win.add(scrollableView);
win.open();
This is what i mean: in your structure you have already an empty table view.
You populate dinamically this table in your controller, with a loop (for or while it's the same).
Every iteration you push the row with the respective TextArea and at the end of loop you populate the table with setData
Regards
Related
This is default style of my chart in highcharts :
I want to change position of inputs, charts that I use are from https://www.highcharts.com/ site , i want to change from input from left to right and to input from right to left with from and to texts
I want to be like this image :
How can I do that?
It's impossible to change in regular Highcharts API options, but making some changes in core code does the job.
jsFiddle demo
At Highcharts.RangeSelector.prototype.render we need to switch sequence of triggering rangeSelector.drawInput functions:
if (inputEnabled !== false) {
rangeSelector.div = div = createElement('div', null, {
position: 'relative',
height: 0,
zIndex: inputsZIndex
});
container.parentNode.insertBefore(div, container);
// Create the group to keep the inputs
rangeSelector.inputGroup = inputGroup =
renderer.g('input-group').add(group);
inputGroup.offset = 0;
rangeSelector.drawInput('max');
rangeSelector.drawInput('min');
}
In Highcharts.RangeSelector.prototype.drawInput I made some styling/creating changes here:
// Create an SVG label that shows updated date ranges and and records
// click events that bring in the HTML input.
this[name + 'DateBox'] = dateBox = renderer.label('', inputGroup.offset)
.addClass('highcharts-range-input')
.attr({
padding: 2,
width: options.inputBoxWidth || 90,
height: options.inputBoxHeight || 17,
'text-align': 'center'
})
.on('click', function() {
// If it is already focused, the onfocus event doesn't fire
// (#3713)
rangeSelector.showInput(name);
rangeSelector[name + 'Input'].focus();
});
// Create the text label
this[name + 'Label'] = label = renderer.label(
lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'],
this.inputGroup.offset
)
.addClass('highcharts-range-label')
.attr({
padding: 2,
paddingLeft: 100
})
.add(inputGroup);
inputGroup.offset += label.width - 85;
I've been trying to code with SmartFace.
I need to make an image slider. But, I am stuck and don't know where to start.
I want to make something like this :
https://www.google.com.tr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj9tIH0hcjKAhWM7hoKHQ4dCIMQjRwIBw&url=http%3A%2F%2Fjquery-plugins.net%2Ftag%2Ftouch-enabled-slider&psig=AFQjCNH_vEXXcHB4fajB7f1Pz9x2kmwU7g&ust=1453917230609303
You can make image slider by using scrollview. This document help you to create it. Also you can see an image slider example if you download 'Smartface In Action' in App Store.
Here is the sample code:
var imageSlider = new SMF.UI.ScrollView({
top : "10%",
left : "10%",
width : "80%",
height : "60%",
contentHeight : "200%",
contentWidth : "100%",
autoSize : true,
layoutType : SMF.UI.LayoutType.linear,
orientation : SMF.UI.Orientation.horizontal,
enableHorizontalPaging : true,
enableHorizontalScrolling : true,
horizontalGap : "0dp",
verticalGap : "0dp",
});
Pages.Page1.add(imageSlider);
function fillScrollView() {
for (var i = 1; i <= 10; i++) {
var image = new SMF.UI.Image({
width : "80%",
height : "30%",
top : "5%",
left : "5%",
image : "myimage.png",
multipleLine : false
});
imageSlider .add(image);
}
}
fillScrollView();
https://developer.appcelerator.com/question/146449/how-do-i-make-a-view-with-a-bubble-but-with-a-continuous-border
I have found this tutorial, and I am trying to create a bubble chat window in titanium.
However the trouble I am having is that I cannot get the height/width of the label until I have stuck it onto the window and inside the view, even then if the label is too small, the bubble chat becomes distorted.
What is the best way to accomplish this in titanium, thanks.
var label1 = Titanium.UI.createLabel({
color : '#999',
text : 'I am Window 1',
font : {
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : 'center',
height : 'auto',
width : 'auto',
});
var bubble1 = Ti.UI.createView({
backgroundImage : 'bubble.png',
backgroundLeftCap : 43,
backgroundRightCap : 34,
backgroundTopCap : 34,
backgroundBottomCap : 36,
height : 10,
top : 10,
visible: false,
width : 10
});
bubble1.add(label1);
win1.add(bubble1);
To get height/width of label use: label1.toImage().width or label1.toImage().height
and the best way to do it is:
after adding label to View you need:
check width of label, if it is too long, and over fit of screenwidth then change back label width to size of screen - 50 px. if(label1.toImage().width > Ti.Platform.displayCaps.getPlatformWidth()) label1.width = Ti.Platform.displayCaps.getPlatformWidth() -50;
Change back width of View to same width of label.
Set label1.heigh = Ti.UI.SIZE (auto is not supported now)
Set View.height = Ti.UI.SIZE
To check small size, you can do this:
if(Ti.Platform.displayCaps.getPlatformWidth() < 100){
label1.width = 100;
View.width = Ti.UI.SIZE;
}
How to get space between TableViewRow has show in above image.
Window.js
for(var i=0;i < election.length ;i++){
//
tblRow_Election[i] = Titanium.UI.createTableViewRow({
height:(Ti.Platform.osname == 'ipad')?'280':'140',
width:Titanium.Platform.displayCaps.platformWidth,
left:(Ti.Platform.osname == 'ipad')?'20':'10',
right:(Ti.Platform.osname == 'ipad')?'20':'10',
color:'red',
touchEnabled: true,
borderRadius:'4',
borderWidth:'1',
borderColor:'green',
});
data.push(tblRow_Election[i]);
}
$.tbl_ElectionList.data = data;
Window.tss
"#tbl_ElectionList":{
top:'40',
height:'auto',
backgroundColor:'transparent',
left:'10',
right:'10',
style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
borderColor:'green',
separatorInsets: {
left:0,
right:0,
},
}
Window.xml
<Alloy>
<Window id="ElectionWin" class="ElectionWindow" >
<View class="container" id = "view_Election" backgroundColor="white">
<TableView id="tbl_ElectionList">
</TableView>
</View>
</Window>
</Alloy>
Unable to get gap between each row . Can any one advice me how to achieve the gap between each tableviewRow.
#All Thanks in Advance
First you have to set the separator style to none, so that you can define gaps yourself, you can set this in the table' tss, I would also not use the grouped style as this further constrains your styling:
"#tbl_ElectionList":{
top:'40',
height:Ti.UI.SIZE,
left:'10',
right:'10',
separatorStyle : Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
borderColor:'green'
}
Try adding rows that way and you should see the gaps
var containerrow = Titanium.UI.createTableViewRow({
height:(Ti.Platform.osname == 'ipad')?'280':'140',
width: Ti.UI.FILL
});
// This innerView will be set in the middle of the row
// It will hold your main row content
// We make it smaller than the row to give padding
var innerView = Ti.UI.createView({
width : '80%',
height : '80%',
color:'red',
borderRadius:4,
borderWidth:1,
borderColor:'green'
});
containerrow.add(innerView);
// Add to the table data
data.push(containerrow);
Then of course set the data as you did before.
Is there a way to edit this script so that it only applies to a specific select class and not to all tags within a page?
(This script is for expanding the dropdown list options so that they're not cut-off in IE.) What we want to happen is to apply this only to select tags that have very long option names.
<script>// Safely use $
(function($) {
$.fn._ie_select=function() {
return $(this).each(function() {
var a = $(this),
p = a.parent();
p.css('position','relative');
var o = a.position(),
h = a.outerHeight(),
l = o.left,
t = o.top;
var c = a.clone(true);
$.data(c,'element',a);
c.css({
zIndex : 100,
height : h,
top : t,
left : l,
position : 'absolute',
width : 'auto',
opacity : 0
}).attr({
id : this.id + '-clone',
name : this.name + '-clone'
}).change(function() {
$.data(c,'element')
.val($(this).val())
.trigger('change')
});
a.before(c).click(function() {
c.trigger('click');
});
}); // END RETURN
}; // END PLUGIN
if ($.browser.msie) {
$('select')._ie_select();
}
})(jQuery); // END SAFETY</script>
The code at the bottom appears to be the part taking the selector, so change
if ($.browser.msie) {
$('select')._ie_select();
}
to
if ($.browser.msie) {
$('select.classNameHere')._ie_select();
}