I'm doing an animation, where a thumbnail blows up to take up the whole screen. The first step is to get the element, change it's position to absolute and assign explicitly the dimensions and position that it's currently occupying, using a style object. Then I do my animation.
Most of the time it works nicely, but I seem to be getting DOM renders that catch my element in an intermediate state, it's position changed to absolute but the dimensions not set. In Vue, is there a way of grouping into a single batch a bunch of updates to an element?
var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
var rect = outer.getBoundingClientRect();
this.elStyle.height = rect.bottom - rect.top;
this.elStyle.width = rect.right - rect.left;
this.elStyle.top = rect.top;
this.elStyle.left = rect.left;
this.elStyle.zIndex = 100;
this.elStyle.position = 'absolute';
this.elStyle.transition = 'all 0.5s ease-in-out';
setTimeout(function () {
this.elStyle.top = this.vueStore.contentRect.top;
this.elStyle.left = this.vueStore.contentRect.left;
this.elStyle.height = this.vueStore.contentRect.bottom;
this.elStyle.width = this.vueStore.contentRect.right;
}, 300);
} else {...
You should assign elStyle in 1 time
var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
var rect = outer.getBoundingClientRect();
me.elStyle = Object.assign({}, me.elStyle, {
height: rect.bottom - rect.top,
width: rect.right - rect.left,
top: rect.top,
left: rect.left,
zIndex: 100,
position: absolute
})
setTimeout(function () {
me.elStyle = Object.assign({}, me.elStyle, {
height: me.vueStore.contentRect.bottom - 50;,
width: me.vueStore.contentRect.right,
top: me.vueStore.contentRect.top,
left: me.vueStore.contentRect.left,
})
}, 300);
}
Related
I am trying to display images in a view but the images are not getting rendered according to the x and y coordinates provided.
The var all_dim[i] is a string of the form X_coord,Y_coord, Height, Width
public styles = StyleSheet.create({
scroll_layouts: {
height: 100,
zIndex: 40,
backgroundColor: "#fff",
},
Lay_view: {
width: 100,
height: 200,
transform: [
{ translateX: 0},
{ translateY: 0},
]
}
});
public displayLayout()
{
if(this.props.index == 2)
{
var to_disp = [];
var all_layouts = this.props.data_string.split('&');
for(var j = 0;j < all_layouts.length - 1;j++)
{
var all_dim = all_layouts[j].split(";");
var xyz=[];
var images_arr = this.props.arr_img;
for(var i = 0;i < all_dim.length - 1;i++)
{
var image_fill = images_arr[i].uri;
var indivi_elems = all_dim[i].split(',');
var h = parseFloat(indivi_elems[2]);
var w = parseFloat(indivi_elems[3]);
var xc = parseFloat(indivi_elems[0]);
var yc = parseFloat(indivi_elems[1]);
xyz.push(<Image key = {i} source = {{uri: image_fill}} style = {{height: h, width: w,transform: [{ translateX: xc},{ translateY: yc},{scaleX:1},{scaleY:1}]}}/>);
}
var hjk = <View key = {j} style = {this.styles.Lay_view}>{xyz}</View>;
to_disp.push(hjk);
}
return (
<ScrollView horizontal = {true} style = {this.styles.scroll_layouts}>
{to_disp}
</ScrollView>)
}
}
I expect the images to be displayed according to the coordinates provided and not one below the other.
Expected layout of images in output
Output rendered
The children of the view should have their position prop set to 'absolute'
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.
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
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 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>