hello i have a problem:
I have two views in a window and I wish with a swipe event is passed from one view to another as if it were a tabgroup.
Can anyone tell me how is it possible ?
thanks so much
You need to use ScrollableView for this.
your code will look like this:
var win = Ti.UI.createWindow();
var view1 = Ti.UI.createView({ backgroundColor:'#123' });
var view2 = Ti.UI.createView({ backgroundColor:'#246' });
var view3 = Ti.UI.createView({ backgroundColor:'#48b' });
var scrollableView = Ti.UI.createScrollableView({
views:[view1,view2,view3],
showPagingControl:true
});
win.add(scrollableView);
win.open();
Related
I am new to three.js. I found an example on the official website. I want to change the color of geometry by clicking the button. How can I do this? I tried to use the mouse click event to do it, but it was useless.
function init(){
......
......
......
$("red").onclick(function (e) {
rollOverMesh.material.color=0xff3333;
});
}
You just have to set color like this :
rollOverMesh.material.color = new THREE.Color(0xff3333);
Assuming rollOverMesh is a Mesh. Please try
var onClick = function() {
rollOverMesh.material.color = new THREE.Color(0xffffff * Math.random());
rollOverMesh.material.needsUpdate = true;
};
$('red').click(onClick);
If you want to change material in live scene, you must set material again.
JSFiddle: https://jsfiddle.net/bkr1gc4e/
I've create this scroll panel:
var app = UiApp.createApplication();
var scroll = app.createScrollPanel().setPixelSize(500, 300);
var panel = app.createVerticalPanel();
scroll.add(panel);
app.add(scroll);
spreadsheet.show(app);
But I can't get this scroll panel bigger than setPixelSize(500, 300); because, in this case, the submit button is not shown. How can I increase the size of the panel?
Don't forget you can define the size of the uiApp instance itself, it will probably solve your problem...
function myFunction() {
var spreadsheet = SpreadsheetApp.getActive();
var app = UiApp.createApplication().setHeight(800).setWidth(1500);
var scroll = app.createScrollPanel().setPixelSize(500, 300);
var panel = app.createVerticalPanel();
scroll.add(panel);
app.add(scroll);
spreadsheet.show(app);
}
I have a div, #scrollable, with a scrollbar and I want to scroll to the end.
I can do it by setting the div's "scrollTop" property to the value of the div's "scrollHeight" property thus:
var scrollable = d3.select("#scrollable");
scrollable.property("scrollTop", scrollable.property("scrollHeight"));
but I can't figure out how, if at all, I can tween it.
var scrollheight = scrollable.property("scrollHeight");
d3.select("#scrollable").transition().property("scrollTop", scrollheight);
doesn't work.
Thanks for any ideas.
Regards
You can use a custom d3 tween to transition arbitrary properties like scrollTop.
mbostock's Smooth Scrolling example demonstrates using a custom tween to scroll the entire document.
And here is the example adapted to your context (also viewable interactively on bl.ocks.org):
var scrollable = d3.select("#scrollable");
d3.select("#down").on('click', function() {
var scrollheight = scrollable.property("scrollHeight");
d3.select("#scrollable").transition().duration(3000)
.tween("uniquetweenname", scrollTopTween(scrollheight));
});
function scrollTopTween(scrollTop) {
return function() {
var i = d3.interpolateNumber(this.scrollTop, scrollTop);
return function(t) { this.scrollTop = i(t); };
};
}
I am trying to make a Demo in Appcelerator here is the code for it.
var tabGroup = Titanium.UI.createTabGroup();
var main_win = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
title:'Tab 1',
window:win1
});
var label1 = Titanium.UI.createLabel({
text:'I am Window 1',
win:win1
});
win1.add(label1);
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
title:'Tab 2',
window:win2
});
var label2 = Titanium.UI.createLabel({
text:'I am Window 2',
});
win2.add(label2);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
main_win.open();
var button1 = Titanium.UI.createButton({
title:"hello"
});
main_win.add(button1);
var button2 = Titanium.UI.createButton({
title:"hello"
});
win1.add(button2);
button1.addEventListener('click', function(e) {
tabGroup.open();
});
button2.addEventListener('click', function(e) {
main_win.show();
tabGroup.close();
});
Now button2 is not working in the desired way. I want to switch back to window_1 i.e the main window. What is going wrong with the code.
EDIT
I want to have a window (Can be a view/window or something else.) namely main_win which has a button named button1. When I click on button1 it moves to another view which shows me two tabbed views namely win1 and win2 associated with tab1 and tab2. Clicking on tab1 will show win1 and clicking on tab2 will show win2. Both win1 and win2 have a button say button2 clicking on which would send us back to the main_win. Also I want the transition to be like we are getting from scrollview by default.
I always just think about tabGroups as windows. It isn't documented, but you can use the exitOnClose property on tabGroups in Android. Please see if the following code does what you need. Titanium SDK 1.7.5 targeting Android 2.2
var main_win = Titanium.UI.createWindow({
title : 'main_win',
backgroundColor : '#fff'
});
var button1 = Titanium.UI.createButton({
title : "open tabGroup",
height:35,
width:120
});
button1.addEventListener('click', function(e) {
tabGroup.open();
});
main_win.add(button1);
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});
var tab1 = Titanium.UI.createTab({
title : 'Tab 1',
window : win1
});
var label1 = Titanium.UI.createLabel({
text : 'I am Window 1',
win : win1
});
win1.add(label1);
var button2 = Titanium.UI.createButton({
title : "< back",
top:5,
left:5,
height: 35,
width: 80
});
win1.add(button2);
button2.addEventListener('click', function(e) {
tabGroup.close();
});
var win2 = Titanium.UI.createWindow({
title : 'Tab 2',
backgroundColor : '#fff'
});
var tab2 = Titanium.UI.createTab({
title : 'Tab 2',
window : win2
});
var label2 = Titanium.UI.createLabel({
text : 'I am Window 2',
});
win2.add(label2);
var button3 = Titanium.UI.createButton({
title : "< back",
top:5,
left:5,
height: 35,
width: 80
});
win2.add(button3);
button3.addEventListener('click', function(e) {
tabGroup.close();
});
var tabGroup = Titanium.UI.createTabGroup({
exitOnClose: false
});
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
main_win.open();
the tabgroup is a global element. i'm not sure if it is possible to close it - apparently not. you can jump to a tab with
tabGroup.setActiveTab(id_of_your_tab);
you need to build your own bar if you have to hide it.
Also, is it possible to make a tabbed-view for views or scroll-views.
you can use a scrollview on your window:
var scrollView = Titanium.UI.createScrollView({
contentWidth:'auto',
contentHeight:'auto',
top:0,
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true
});
var view = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:10,
width:300,
height:2000,
top:10
});
scrollView.add(view);
Titanium.UI.currentWindow.add(scrollView);
tableviews are also a common way to implement a scrollable view.
What other options can I use while making the App for an android
device.
have a look at the titanium api. it displays which methods and views are available on android. you should also be aware of the multi density for android devices. so you need to provide youre images in multiple resolutions. have a look at the titanium guidelines.
hope it helps
I am trying to create a image for google's custom controls. When I assign a background picture in a css, it breaks, otherwise it works.
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLocationControlDiv = document.createElement('DIV');
var controlUI = document.createElement('DIV');
//controlUI.style.borderWidth = '20px';
//controlUI.style.backgroundColor = 'black';
//controlUI.style.borderStyle = 'solid';
//controlUI.style.cursor = 'pointer';
//controlUI.style.backgroundImage = "url(/img/icons/pin.png)";
controlUI.title = 'Click to set the map to Home';
myLocationControlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI);
You can also see it here: http://jsfiddle.net/k3Jjw/
Two simple problems:
You need an explicit height and width on your control - background images don't cause the DIV to grow to fit them.
The image URL you used does not exist (I get 404).
If you use the following code, you should see an image control in the top left:
var controlUI = document.createElement('DIV');
controlUI.style.cursor = 'pointer';
controlUI.style.backgroundImage = "url(http://dummyimage.com/100x100)";
controlUI.style.height = '100px';
controlUI.style.width = '100px';
controlUI.title = 'Click to set the map to Home';
myLocationControlDiv.appendChild(controlUI);
Great work posting the JSFiddle link - it made this question easy to answer.