I am building an app in which I am using scrollView with 'scrollableview'. When scrolling the image, the view size is automatic increasing.
If I am giving the height in px then it is working fine but when I am giving height in % this code is not working fine. but, I need height in % only.
Here is my code:
var imageCollection = [
"/images/offers/oneplusOffer.jpg",
"images/offers/electronicsOffer.jpg",
"images/offers/shoesOffer.jpg",
"images/offers/watchOffer.jpg"
];
var viewCollection = [];
// Vertical ScrollBar
var scrollView = Ti.UI.createScrollView({
top:0,
left:0,
backgroundColor:'#f1f1f1',
layout:'vertical'
});
// offerBanner view
var bannerView=Ti.UI.createView({
height:"10%",
backgroundColor:"pink",
});
for (var i = 0; i < imageCollection.length; i++) {
var view = Ti.UI.createView({
backgroundColor: 'yellow'
});
var img = Ti.UI.createImageView({
image : imageCollection[i]
});
view.add(img);
viewCollection.push(view);
}
var scrollableView = Ti.UI.createScrollableView({
top:0,
views:viewCollection,
showPagingControl:false,
});
bannerView.add(scrollableView);
scrollView.add(bannerView);
//creating view
for(var i=0;i<7;i++){
var view=Ti.UI.createView({
top:"2%",
backgroundColor:"blue",
//height:"120",
height:"15%",
});
//adding view to scrollview
scrollView.add(view);
}
$.homeScreenWindow.add(scrollView);
$.homeScreenWindow.open();
Try below code,
var scrollView = Ti.UI.createScrollView({
top:0,
left:0,
backgroundColor:'#f1f1f1',
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
layout:'vertical'
});
you can also give the above height in % as well. Try this.
Related
I'm trying to create a layout (using famous.js) similar to the BBC News native app; a vertical ScrollView, within which are numerous horizontal ScrollViews. I've got both 'working' to the extent that everything renders and the horizontal scrollers work perfectly. My issue is that the vertical scroll event won't fire if the user swipes a surface within a horizontal ScrollView. If i touch an area outside the horizontal scrollers, the vertical scroller will do its job and scroll... vertically
Does anyone know what i'm missing? I have a feeling that a RenderNode may be needed, but have had no luck so far. I'm just getting to grips with Famous. What i've seen so far is amazing, but not being able to figure this out is really getting to me...
Uber thanks in advance if anyone can help...
/*globals define*/
define(function(require, exports, module) {
// import dependencies
var Modifier = require('famous/core/Modifier');
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var Scrollview = require('famous/views/Scrollview');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var mainContext = Engine.createContext();
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
// create app header and add to layout
var appHeader = new ContainerSurface({
size: [undefined, 50],
classes: ['app-header']
});
appHeader.add(new Surface({
size: [undefined, 50],
content: 'Site Name',
classes: ['app-header__title'],
properties: {
lineHeight: '50px',
textAlign: 'center'
}
}));
layout.header.add(appHeader);
// create page container surface
var page = new ContainerSurface({
properties: {
top: '0'
}
});
// returns a horizontal ScrollView containing
function createCategory() {
var categoryScroll = new Scrollview({
direction: 0,
});
var surfaces = [];
categoryScroll.sequenceFrom(surfaces);
for (var i = 0, temp; i < 7; i++) {
var temp = new Surface({
size: [128, 128],
content: 'surface' + (i + 1),
properties: {
backgroundColor: '#fff',
borderColor: '#303030',
borderStyle: 'solid',
borderWidth: '0px',
borderRightWidth: '4px',
borderLeftWidth: '4px'
}
});
temp.pipe(categoryScroll);
surfaces.push(temp);
}
return categoryScroll;
}
// returns a vertical page scroll
function createPageScroll() {
// create array of horizontal ScrollViews
categories = [];
for (var i = 0; i < 7; i++) {
categories.push(createCategory());
};
var pageScroll = new Scrollview();
var surfaces = [];
for (var i = 0; i < 7; i++) {
temp = new ContainerSurface({
size: [window.innerWidth, 136],
});
temp.add(categories[i]);
surfaces.push(temp);
pageScroll.sequenceFrom(surfaces);
temp.pipe(pageScroll);
};
return pageScroll;
}
layout.content.add(createPageScroll());
mainContext.add(layout);
});
I see you figured it out, but I thought I would post a clean working example for anyone that needed a starting point.. So here it is..
To answer the question, Yes, you needed to pipe your events from the surfaces to each of the scrollviews
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var context = Engine.createContext();
var surfaces1 = [];
var surfaces2 = [];
var scrollers = [];
scroll_v_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden' }
});
var scroll_v = new Scrollview({ direction: 1 });
scroll_v.sequenceFrom(scrollers);
scroll_v_cont.add(scroll_v);
var scroll_h1_cont = new ContainerSurface({
size:[300,300],
properties: {overflow: 'hidden'}
});
var scroll_h1 = new Scrollview({ direction: 0});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
var scroll_h2_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden'}
})
var scroll_h2 = new Scrollview({ direction: 0})
scroll_h2.sequenceFrom(surfaces2);
scroll_h2_cont.add(scroll_h2);
scrollers.push(scroll_h1_cont);
scrollers.push(scroll_h2_cont);
for (var i = 0; i < 4; i++) {
var surface1 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface1.pipe(scroll_v);
surface1.pipe(scroll_h1);
surfaces1.push(surface1);
var surface2 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8 + (360 / 8)*4) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface2.pipe(scroll_v);
surface2.pipe(scroll_h2);
surfaces2.push(surface2);
};
context.add(scroll_v_cont);
the famous-flex FlexScrollView supports vertical & horizontal scrolling restrictions when embedding one scrollview in another. It is described in more detail at the bottom of the FlexScrollView tutorial:
https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md
I have this in the view index.xml:
<Alloy>
<Window class="container" fullscreen="true">
<View id="accueil">
<ImageView id="button_way"></ImageView>
</View>
</Window>
</Alloy>
and this in the controllers index.js
$.accueil.addEventListener("touchmove", function(e){
Ti.API.info(e.y);
});
My problème are if i start click in the imageview and i move the absolute position are to the image view and not to the view.
I don't no why...
Can you help me, thanks, and sorry for my english.
The touchmove event's coordinates are always relative to the view in which the initial touch occurred.
You need to convert the points in the image, to the points in the containing view, thankfully Titanium provides a helper method for that: convertPointToView
I'm not sure exactly what you are trying to accomplish but here is an example of using this function, apply it to what you need to do:
$.accueil.addEventListener("touchmove", function(e){
// If the points are in the image, convert them to the containing view
if(e.source == $.button_way) {
var imageViewPoint = { x e.x, y : e.y };
// Translate from button_way to accueil point of view
var accueilViewPoint = $.button_way.convertPointToView(imageViewPoint, $.accueil);
Ti.API.info(accueilViewPoint);
} else {
// Otherwise just leave them
var accueilViewPoint = { x e.x, y : e.y };
Ti.API.info(accueilViewPoint);
}
});
Here is perfect solutions for all devices:
var circle = Ti.UI.createView({
height:300,
backgroundColor: 'red',
width:250
});
$.win.add(circle);
var item1 = Ti.UI.createImageView({
top:'0',
id:'item1',
//left:'0',
width:'50',
height:'50',
zIndex:'1',
backgroundColor:'green',
image:'/burger_menu.png'
});
circle.add(item1);
var wth = item1.getWidth()/2;
var hgt = item1.getHeight()/2;
item1.addEventListener('touchmove', function(e) {
touchMove(item1 , e);
});
function touchMove(obj , e)
{
var convertedPoint = obj.convertPointToView({x: e.x, y: e.y}, circle);
if(convertedPoint != null)
{
item1.animate({
left: Math.round(convertedPoint.x/Ti.Platform.displayCaps.logicalDensityFactor) - wth,
top: Math.round(convertedPoint.y/Ti.Platform.displayCaps.logicalDensityFactor) - hgt ,
duration: 1
});
}
}
$.win.open();
here is the script code:
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.open('http://www.google.com', function () {
var arr = page.evaluate(function () {
var pageWidth = document.body.clientWidth;
var pageHeight = document.body.clientHeight;
return [pageWidth, pageHeight];
});
console.log('pagwWidth: ' + arr[0] + '; pageHeight: ' + arr[1]);
page.render('google.pdf');
phantom.exit();
});
I'm trying to get clientWidth and clientHeight of document.body page. When I exec this script I'm getting the folowing values:
pagwWidth: 400; pageHeight: 484
Why is the width above is 400px? I think I should be wider.
Thank you for the reply. But then I don't understand the following thing. When I use viewportSize = {width: 1024, height: 800}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 1024, height: 800};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the following file:
But if I use viewportSize = {width: 400, height: 400}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 400, height: 400};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the same:
So I don't understand how does viewportSize affect to the view?
The document is affected by the viewport size and not by the paper size. Think along this line, how a web page looks like in your web browser has nothing to do with your current printer setting.
Use viewportSize if you want to influence the page layout:
page.viewportSize = { width: 1024, height: 800 };
i am new App Developer with Titanium. i want to create a window base application. whose run on iphone or ipad or android platform.
When i run application on iphone than run properly, but when i run on Android than it show a msg (Unexpected Error) and after this it is close.
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0',
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000',
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00',
});
var abc = new Array();
abc[0] = 'images/img.png',
abc[1] = 'images/img1.png',
scrollView1.add(abc);
view1.add(scrollView1);
win1.add(view1);
win1.open();
how i add Array in my scroll view.
in array i store (images path)
please help me,
Thanks in advance,
Try This,
var array = new Array();
array[0] = 'image path';
array[1] = 'image path';
for(a = 0; a<array.length;a++){
var lab1 = Titanium.UI.createLabel({
backgroundImage : array1[a],
height : 75,
width : 75,
backgroundColor : '#712347',
borderRadius : '10',
zIndex : 11,
});
scrLabel.add(lab1);
}
I, Think this is supported, for you.
You can't 'add' an array to a window object - 'add' only takes Titanium Proxy objects - things returned from Ti.UI.create.... methods - as the argument. See my commented code below:
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0',
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000',
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00',
});
var abc = ['images/img.png', 'images/img1.png'];
// if you want the image paths available as a variable, just set it
scrollView1.abc = abc;
// But I don't understand why you are doing this - you can just access the paths
// from abc directly
view1.add(scrollView1);
// You were adding the scroll view twice: win1.add(scrollView1);
// You want to add the view:
win1.add(view1);
win1.open();
Try this code:
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0'
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000'
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00'
});
var abc = ['images/img.png','images/img1.png'];
scrollView1.add(abc);
view1.add(scrollView1);
win1.add(view1);
win1.open();
var array = new Array();
array[0] = 'image path';
array[1] = 'image path';
for(a = 0; a<array.length;a++){
var lab1 = Titanium.UI.createImageView({
backgroundImage : array1[a],
height : 75,
width : 75,
backgroundColor : '#712347',
borderRadius : '10',
zIndex : 11,
});
scrLabel.add(lab1);
}
I have a tab app set to fluid on both height and width. Height is no problem ... it is the width that is not working so a good portion of my page (which is only 648px wide) is not showing up. We intentionally set the width to be less than the max so we wouldn't have this problem. To view you can go to the Arrow Fasteners page ... contest or like us to enter tabs.
Tab Apps are only working with a fixed width: 520px. Only height is settable.
Fluid Width is only for Canvas Apps (apps.facebook.com/app-name), that's why these settings are prefixed with "Canvas" (Canvas Width, Canvas Height).
Mike
Add your AppID and the following codes, above the closing body tag. It will work perfectly on tabs.
<script type="text/javascript">
fb_root = document.createElement( 'div' );
fb_root.id = 'fb-root';
try
{
window.document.childNodes[0].appendChild( fb_root );
}
catch( error )
{
window.document.body.appendChild( fb_root );
}
window.fbAsyncInit = function() {
FB.init({
appId : '222222222222222', //your app ID
status : true, // check login status
cookie : true // enable cookies to allow the server to access the session
});
//FB.Canvas.setSize({ width: 520, height: 1400 });
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var mySetSize = function() {
var height = getDocHeight();
FB.Canvas.setSize({ width: 520, height: height });
setTimeout( mySetSize, 200 );
};
setTimeout( mySetSize, 200 );
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode('body { position: relative; max-width: 520px!important;width: 520px!important; overflow: hidden!important; margin: 0px!important; }');
style.type = 'text/css';
if(style.styleSheet)
style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
</script>