I'm experiencing bad scroll performance on mobile devices with Famo.us scrollview. I'm using Famo.us/Angular. Here's the code used:
<fa-app>
<fa-scroll-view fa-pipe-from="eventHandler">
<fa-view ng-repeat="item in items" class="item">
<fa-surface fa-pipe-to="eventHandler" fa-background-color="'#FA5C4F'" fa-size="[undefined, true]">
<img ng-src="{{ item.src }}" />
</fa-surface>
</fa-view>
</fa-scroll-view>
</fa-app>
scrollview options are set to default. Some of the Famo.us demo videos show utterly smooth scroll. However, I'm unable to translate that into practice. Since, I have not modified any scrollview options and working off a barebone template, I wonder what's causing this.
Even Javascript code is very slow with no content! Check out this demo.
The performance is extremely bad and I think you need to think twice before using it.
Related
In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
I have an Ember.js component called table-viewer. It has a toolbar which is a div with buttons. I have another ember component called report-viewer. It contains a variety of things including a table-viewer.
I want to have report-viewer add some buttons to the toolbar. What I have works but breaks the Ember connection with the element so I can't change the button text after moving it. Is there a better way to do this?
I have a lot more components than I just said, so defining the complete toolbar in table-viewer and setting flags for what to show would be annoying to manage.
Below is what I currently have in table-viewer so that any component can add additional buttons to the toolbar:
Ember.$('#toolbar').append(Ember.$('#additionalToolbar').html());
Ember.$('#additionalToolbar').remove();
I figured it out! The following works without breaking Ember connections:
Ember.$('#additionalToolbar > button').appendTo(Ember.$('#toolbar'));
It's hard to say what the best approach is without seeing the relevant code. That said, my first suggestion would be a simple yield:
report-viewer/template.hbs
{{#table-viewer}}
<button>
Some button from the report viewer...
</button>
{{/table-viewer}}
table-viewer/template.hbs
<nav>
<button>
Button one
</button>
<button>
Button two
</button>
{{yield}}
</nav>
<table>
...
</table>
If you need more that one yield, you can achieve multiple named yields with this approach.
I'd also suggest splitting the toolbar out into its own component if you haven't already. It feels wrong to put a toolbar button as the block contents of the table-viewer component as I've done above.
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
When you have a large collection of objects in an ArrayController, you can sometimes see the list gradually building on the page when you switch to that view.
Is there a way to only show the view after the list has been built, in order to avoid a flickering interface?
Is there a way to only show the view after the list has been built, in order to avoid a flickering interface?
It sounds like what you need is Ember.ListView - it improves performance for very large collections by rendering just enough rows to fill the visible area.
{{#collection Ember.ListView contentBinding="controller" height=500 rowHeight=50}}
<!-- row content here -->
{{/collection}}
Demo on jsbin: http://jsbin.com/ucegit/1/edit
https://github.com/emberjs/list-view
By the 'Prezi-like animation' I mean that your canvas rotate/zoom/shift to the tiny little portion in a sequential manner.
P.S.: The question is not limited to AE. Any animation sw would be relevant.
Some suggest HTML5, but that targets web design (my purpose is only creating some animation for self entertainment.)
Still, if HTML5 is an option have a look at layerJS, an open source library which can create Prezi-like web interfaces. It even allows multiple layers if you need some elements to move independently of each other.
It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.
The HTML code would look like this:
<div data-wl-type="stage">
<div data-wl-type="layer" data-wl-layout-type="canvas">
<div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
</div>
<div data-wl-type="frame" ...>
</div>
</div>
</div>
Yes.
You could do it manually. A little tedious, but you would place your text layers in 3d space and push your camera around. You will spend a lot of time tweaking everything like the things in the visible things in the background and the easing moves into and away from the text.
Sure Target is free and could be a big time saver. You basically use it to square up the camera to null objects and it takes a lot of the tedium out of the process, even though you have to spend a few minutes up front to figure out how it works.
http://www.videocopilot.net/tutorial/energetic_titles/
Webpgr does offer this. It's HTML5 based and comes with a Photoshop-like online editor. It's in beta but you can request an account.