FAQ Database Discussion Community

Center Surfaces inside SequentialLayout (famo.us)

I am trying to solve the problem of centering Surfaces with different widths inside a vertical SequentialLayout, in famo.us. I've gone through the Famo.us University and the source code on the github site, but couldn't figure out a "clean" solution.. For instance, the following code is adapted from http://famo.us/university/lessons/#/layout/sequential-layout/2 to...

Famo.us: How to put form fields inside a scrolling view that works on iOS and Safari?

I’m trying to create a scrolling form for a mobile web app using a Famous ScrollView. However, iOS exhibits severe display bugs when scrolling while the keyboard is active. This occurs whether using an InputSurface or embedding an <input> directly in the Surface HTML. What’s the best way to achieve...

Is it possible to have multi touch input linked across multiple surfaces in famo.us ?

I have created the following render tree: Context -> MainNode -> ImageSurfaces -> MoreSurfaces The image surfaces can be added by the user and are created dynamically, I want to have drag for each ImageSurface depending upon the touch input given by the user. For eg. If I have two...

piping event handlers in famo.us

I want to pipe event handler of view1 to event handler of view2. As a result the following code should trigger eventListeners of both: view1 and view2: define(function(require, exports, module) { var Engine = require('famous/core/Engine'); var View = require('famous/core/View'); var Surface = require('famous/core/Surface'); var ctx = Engine.createContext(); var surf =...

Famo.us: why won't the width of the clicked surface change?

Famous.Engine = famous.core.Engine; Famous.Surface = famous.core.Surface; Famous.RenderNode = famous.core.RenderNode; Famous.ContainerSurface = famous.surfaces.ContainerSurface; Famous.ScrollView = famous.views.Scrollview; Famous.SequentialLayout = famous.views.SequentialLayout; Famous.Transform = famous.core.Transform; Famous.Transitionable = famous.transitions.Transitionable; Famous.SnapTransition = famous.transitions.SnapTransition; Famous.TransitionableTransform = famous.transitions.TransitionableTransform;...

Famous Draggable vs. GenericSync with famous-views

I'm working through use of Draggable and GenericSync with famous and meteor famous-views package and not understanding (obviously) I'd like to drag a surface with constraints and perform another action when predetermined limits are reached. I'm learning and from the examples I've found, I haven't been able to get this...

How to properly layout in Famo.us/ famous-views?

I am using meteor.js and the gadicohen:famous-views and mjn:famous packages. I would like to list projects to be displayed in the layout pattern above. The first project is twice the height of the subsequent two, and takes half of the screen. The subsequent two split the height of the...

Another effect to slide views on fame.us app?

i have 2 views in fame.us app, and slide in EdgeSwapper view, and i want change default effect of EdgeSwapper.show(). I want effect like a smooth transition forward and backwards, how i can do it?

Unexpected behaviour in famo.us javascript

The code below creates up the elements for a grid, and arranges it using the transformOut method. This part works fine, but I then want the grid to collapse in to the centre on mousedown, and spring back out again on mouseup. However, all subsequent calls to either the transformIn...

z-translate is ignored by GridLayout view

I want to use GridLayout in ScrollView context and be able to translate surfaces of GridLayout in Z-direction. The problem is that for some reason Z-translate is ignored in GridLayout. Seems like GridLayout has zero perspective because translate in x and y directions just work. How to fix that? Here...

Distribute circles around a center circle

I'm trying to place six circles around a center circle. Eeach of them has the same diameter so it should be possible to place them around the center without space between or overlaps. I thinking to be close to the solution but there are small overlaps. I can't find an...

Famo.us View can't contain imagesurface on top of a surface inside a scrollview

define(function(require, exports, module){ var View = require('src/core/View'); var Surface = require('src/core/Surface'); var ImageSurface = require('src/surfaces/ImageSurface'); var EventHandler = require('src/core/EventHandler'); var StateModifier = require('src/modifiers/StateModifier'); var RenderNode = require('src/core/RenderNode'); var Transform = require('src/core/Transform') function DetailedList(){ View.apply(this, arguments); _createStrips.call(this); _createImage.call(this); } DetailedList.prototype =...

Famous physics, Uncaught TypeError

The code below generates this error: Uncaught TypeError: Cannot read property '5' of undefined This is thrown by line 52 of the code below. I don't understand how the value of rows or cols gets to 5, when the two loops are set to stop at 4. Thanks for any...

Famo.us physics engine: forces and walls not behaving as expected

I am tyring to create a grid of particles, using the famous physics engine. I thought that if 25 particles were placed beteween 4 bounding walls (forming a square) and they all had an equal repulsion force to each other, they would naturally form a grid - ie. they would...

Famo.us Balls Drag and Drop, set velocity when released

I'm trying to achieve something similar to an air hockey table effect with Famo.us. The idea is to have multiple circle bodies that can collide (see battle). Right now my first concern is getting the ball's vector attributes to zero out on drag start. I'm trying to use the 'reset()'...

on collision events in famo.us: How to get bodies involved?

I know how I can listen on collisions: collision.on('collision', function(e){ //e is one element involved in my collision }); But how to I get both bodies involved? Only one body is passed to this function....

Famo.us ScrollContainer not scrolling

define(function(require, exports, module){ var View = require('src/core/View'); var Surface = require('src/core/Surface'); var ScrollContainer = require('src/views/ScrollContainer'); function ListView(){ View.apply(this, arguments); _createContent.call(this); } ListView.prototype = Object.create(View.prototype); ListView.prototype.constructor = ListView; ListView.DEFAULT_OPTIONS = { data: [] } function _createContent(){ var sc = new ScrollContainer(); var sequence = []; sc.sequenceFrom(sequence); for (var i = 0;...

Change item height in famous-flex list

I have a list in a FlexScrollView. I'm selecting an item in the list according to some logic, and I need the selected item to expand. Since a change in height won't be noticed by famo.us I'm looking for a way to make it work. Any ideas? So far I...

Exclude input events in famous-angular from general Event

I'm writing a mobile app with famous/angular. A swipe to the right in any view reveals the menu. For this I have set up the following event handling: var MouseSync = $famous["famous/inputs/MouseSync"]; var TouchSync = $famous["famous/inputs/TouchSync"]; var GenericSync = $famous['famous/inputs/GenericSync']; $scope.sync = new GenericSync( ["mouse", "touch"], {direction: GenericSync.DIRECTION_X} ); $scope.sync.on('update',...

Use famo.us with meteor without famous-views

I would like to use famo.us in my meteor application. I would like to write pure famo.us javascript without the famous-views package. Now, I have a question: Is it possible to use with blaze? Can I create for example content in a surface with reactive data by using {{data}}?

What is famous-gl ?

In a lot of of codepen samples of Famo.us I see people including famous-gl references for rendering things, but I cannot find which library is to be referenced to use it nor I can find any documentation on it can someone guide me in the correct direction ?

How can you alter the classList of an element in Famo.us + Angular?

I'm using Famo.us + Angular. I'm able to retrieve the classList of a Surface by doing this: $scope.findElement = function() { var elem = $famous.find("#colored-bg")[0].renderNode; // Returns Surface console.log(elem.classList); // RETURNS: ["purple-bg", "container-border", "box-shadow"] }; You can't perform any of the operations on Famo.us object which you normal could to...

famous: can't draw image to CanvasSurface with own size property

I am new to famo.us and cloned the start example. What I was trying to do, is to create a CanvasSurface, create an Image, load ImageData into it, then draw() the Image onto the canvas' context. The strange thing is, that it works once, when not defining a custom size....

Famo.us how to select the surfaces in a scrollView that were not clicked on?

I have a scrollView that contains 5 surfaces. If I click on a surface, I would like the others to be either faded out, z-indexed far behind or translated off the screen. The problem is, I do not know how to implement the selection of the other surfaces. Famo.us Code:...

How to animate famo.us surface in Meteor

I am using the famous-views package for Meteor, and I love it. I have created a simple UI with a few templates and a few surfaces and so on. Now I would like to do some simple animations. I would like to do something like this: surface.on("click", function (e) {...

How can I use the (seemingly built in) famo.us device view?

In this launch event, Hongxu Liu adds device views to his famous app. Are they open sourced? I cannot find anything about it. I am currently developing a phonegap app, and this would come in handy.

How to get Famo.us draggable modifier's render node

I am trying to get parent renderNode of a draggable modifier on 'end' event, is there any api to get a renderNode to which draggable belongs to? My code is as follows : /*globals define*/ define(function(require, exports, module) { var View = require('famous/core/View'); var Surface = require('famous/core/Surface'); var Transform =...

Disable Scrollview in Famo.us

How can I disable and re-enable dragging on a scrollview in Famo.us? Docs here...

How to consume rest api in vanila famo.us [closed]

I am fairly new to famo.us, I have gone through famo.us university tutorials. Now my question is how can we call rest api's in famo.us and bind data from Rest api to the surfaces. Is there any tutorial explaining this? I know there exists famo.us/Angular integration which helps in achieving...

ng-include not working in famo.us-angular - not due to missing double quotes

I'm working on a hybrid mobile app using famo.us-angular. I'm trying to include a partial/template in my 'index.html' like so: <fa-surface class="content"> <div ng-include src="'test.html'"></div> </fa-surface> Double quotes are there, there's no 404 for the file and my 'test.html' contains only this: <p>test</p> After hours of googling and looking here...

Famo.us Scrollview + TouchSync - Make ScrollView/TouchSync Aware of rotateZ Transforms

EDIT: Solved - see new code excerpts I have a Famo.us scroll view nested inside a ContainerSurface. The ContainerSurface rotates on mutli-touch rotate gestures, but once rotated the scrollview's scroll direction doesn't stay relative to the modifier that rotates the surface and its children....