I am just developing a Titanium App. I want to disable scrolling of a scrollView after some scrolling . In other words I want the scroll to stop at a certain position of my screen. Suppose I want the below scrollView to stop scrolling after it scroll a height of 200px. How can I do this?
var containerScroll = Ti.UI.createScrollView({
backgroundColor : 'transparent',
opacity : 0.0,
showVerticalScrollIndicator : true,
showHorizontalScrollIndicator : false,
});
Thanks
It appears this would be your answer, but it is iOS specific. Set the 'scrollingEnabled : false' property. I wasn't able to find an Android version for you.
var scrollableView = Ti.UI.createScrollableView({
views:[new generateVerifyView(),new generateUserView(),new generateAddrView()],
showPagingControl : false,
scrollingEnabled : false
});
http://developer.appcelerator.com/question/122741/disable-scrolling-in-a-scrollableview
YOu try about
scrollview.contentOffset="200";
this is working for me ...
Related
I want to fade out the splash screen.
I think it's possible in native code android or iOS.
However for titanium which way is the appropriate ??
for now my source code is this
var topWin = Ti.UI.createWindow();// main application window.
var img = Ti.UI.createImageView({
image : '/img/Default.png',
top : 0,
left : 0,
width : '100%',
height : '100%'
});
var splash = Ti.UI.createWindow(); //splash window
splash.add(img);
splash.open();
var fadeOut = Ti.UI.createAnimation({
opacity : 0.2,
duration : 300
});
var fadeIn = Ti.UI.createAnimation({
opacity : 1,
duration : 1800
});
setTimeout(function(e) {
splash.close(fadeOut);
topWin.open(fadeIn);
}, 3000);
It works as I mean however I think this way might be a bit strange.
Since
I have to decide the each image according to different resolution devices(iphone/ipad/android ,,) by manual while splash screen is chosen automatically.
Is there a good way other than this??
Take a look at this:
http://www.tidev.io/2015/01/06/how-to-re-use-the-launch-image-in-the-app/
I haven't done this in a while, and I'm not sure if the changes to 5.2 SDK for iOS for Storyboard launch files breaks this method but here's where I'd start.
I'm very noob in Titanium Mobile.
When I create a new window the content of it goes through the iPhone Status bar (hour, signal and battery icons go on the content of my window).
Is there a fast way to check if the App is run by an iPhone and set the window to start under the status bar? (I mean in alloy way).
"#mainWindow": {
fullscreen: false,
statusBarStyle:Titanium.UI.iPhone.StatusBar.DEFAULT
}
I tried this but it did not work, but if I set in the previous code the property fullscreen to true the status bar disappears.
I suppose you want use this app at iOS 7 (title question).
"#mainWindow": {
fullscreen: false,
statusBarStyle: Ti.UI.iPhone.StatusBar.DEFAULT
width: Ti.Platform.DisplayCaps.getPlatformWidth(),
height: (Ti.Platform.DisplayCaps.getDpi() === 320 || Ti.Platform.DisplayCaps.getDpi() === 260) ? Ti.Platform.DisplayCaps.getPlatformHeight() - 40 : Ti.Platform.DisplayCaps.getPlatformHeight() - 20,
top: (Ti.Platform.DisplayCaps.getDpi() === 320 || Ti.Platform.DisplayCaps.getDpi() === 260) ? 40 : 20
}
The MainWindow Top or View where you add all UI Elements must have top 40 (retina) or 20.
This is the height of StatusBar on iOS. If you want use this app at iOS version below 7.0, top is 0.
-App uses Sencha touch 2.0 carousel
-Images in the carousel are displayed full screen (minus the navigation bar at the top of the screen)
-App is targetted for iPad2, iPad2 Retina display, Android xhdpi (tablets)
Goal: To display full screen images in the carousel in all target devices
Question: What should be the resolution of the image?
I have tried 1028x768 image in the carousel. Displays fine (full screen) on iPad2 retina but on Samsung galaxy Tab 10 I see vertical bars on the sides. I understand the resolution is lower than retina but I figured that it would automatically scale down to the resolution of the target device and display the image full screen but apparently it isnt doing so.
Has this been achieved, if so please share.
Appreciate it.
Thanks.
Got it!
The resolution of the image doesnt really matter! True.
What is important is making sure the image tag displays the complete image by automatically resizing the image.
Here is how:
-Define a DIV tag with a specfied height (window.innerHeight) and width (window.innerWidth).
-Place the img tag as a child element of the DIV tag with height=100% and width=100%
Irrespective of the resolution of the image, resolution of the device, screen size of the device the image will be always be automitcally resized and displayed in full size.
The complete code to make the carousel work is here:
Carousel code
{
xtype: 'panel'
layout: 'fit',
flex: Ext.os.is.Phone ? 5 : 6,
items: [
{
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
id: 'ImgId',
flex: Ext.os.is.Phone ? 5 : 6,
config: {
fullscreen: true
}
}
]
}
Carousel item code
Ext.each(images, function (picture) {
var img = picture.url;
var bigImg = picture.bigUrl;
itemsoverlay.push({
xtype: 'label',
html: '<div style="width:'
+ window.innerWidth
+ 'px;height:' + 'px;"><img src='
+ imgURL
+ ' style="width: 100%;height: 100%;" /></div>'
});
});
This code works for tablets and smartphones, iOS or Android.
HTH
I have a little problem with Dijit.Dialog.
I have some dialogs, which have a small size, and they are displayed in the center of my screen, so it's ok.
But I have also a Dialog with a height of 550px, and it's not displayed in the center of my screen but in the bottom : the browser scroll to the bottom and then displayed it.
I create the dialog simply by:
var dialogLodge = new dijit.Dialog({
id : "dialogLodge",
style : "width:700px;height:550px",
title : "Create lodge",
href : "/lodge/create.html",
preload : true,
draggable : false,
onCancel : function(){
…
},
onLoad : function(){
…
},
});
dialogLodge.startup();
So I don't know why it's not displayed at the center.
If anyone has an idea,
Thanks.
PS : I use Dojo 1.6.1 and I tested it with the 1.7 too
Creating a dialog puts a dom node in your page with css styles that hide it (display:none; visibility:hidden).
In order to make your dialog visible, you should use dialog.show().
You can use dialog.hide() to make it invisible again (and it will remain available in case you want to show it back).
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.