I'm building an iOS app with Phonegap, Ionic and Angular, and am having an issue where when I'm using ng-repeat with img src (or ng-src) the scrolling for a page of images becomes unacceptably jittery / laggy when scrolling past the images (you can imagine an Instagram or Facebook-like feed of images on a page). I seem to have the issue both when I load the page in Safari as well as on an iPhone. Chrome seems to be much better, so I perhaps it's a problem related to Safari?
I'm using standard ion-content tags. My ng-repeat is
<div ng-repeat="post in myPosts track by $index">
If I have the following code within the ng-repeat it works fine and the scrolling is perfect:
<img ng-src="https://s3.amazonaws.com/exampleS3Bucket/photos/somephoto.jpg">
However, when I try to use angular to have different images for each item in the repeated array I encounter the lag issue:
<img ng-src="{{post.image.url}}" >
I've tried using various ion-content scrolling settings and Bindonce, but nothing has helped so far. Appreciate any help you can provide!
You can try overflow-scroll="true" in ion-content tag.
Example:
<ion-content overflow-scroll="true">
It gave me huge performance boost.
You should take a look at the new collection repeat feature of Ionic, it helps you increase the performance for huge lists.
Here you have an extensive code example.
From the docs:
<ion-content ng-controller="ContentCtrl">
<div class="list">
<div class="item my-item"
collection-repeat="item in items"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}">
{{item}}
</div>
</div>
</div>
Related
I am trying to create a tile like menu for my mobile application which should look like the main menu on windows 8. I am using the ionic framework version 1.0.0. Please can anyone give me pointers on how to implemeny this.
2018 Update:
Use CSS Grid. You can use a feature query (#supports) to provide a backup for browsers that don't support Grid currently, taking advantage instead of flexbox. Alternatively, you could use the built-in Ionic grid and use a feature query to override the ionic styles using CSS Grid.
For example:
#supports (display: grid) {
ion-content {
display: grid;
}
}
I know this question is about ionic framework. When i tried for a similar application which gives windows 8 look i used Gridster.js. have a look into it. If you find it helpful use it. gridster
you can Use card Imaged from Ionic
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
here is the Link
Ionic Card Images
but Gridster is a pretty neat solution
I am working in a project where I use jQuery (~2.1.1), Bootstrap (~3.3.1), AngularJS (~1.3.4), Angular-ui-bootstrap (~0.12.0), and some more libraries. I have a small problem which is related with the popover directive of the angular-bootstrap library. This little problem is that many of the popovers are misplaced, so probably I am forgetting about something.
From the documentation and even personal tests (Plunker Example Ex. using angular 1.3.4), the popover should look aligned to the center of the HTML element, and the arrow of it should touch the element, like this:
The problem is that in my application the popover gets misplaced somehow (In this case only vertically the offset is noticeable, so it's not touching the element), as you can see next:
Another example (which is the most noticeable) is with a dynamic generated list using ng-repat, as you can see in the next picture:
<div class="col-xs-6 col-sm-2 sidebar-offcanvas"
id="sidebar-left" role="navigation">
<div class="list-group shadow-bottom" id="sideMenuTitle">
<span class="list-group-item list-group-item
disabled offcanvas-title" style="text-align: center">
<strong>Metrics</strong>
</span>
<a popover="{{metrics_messages[$index]}}" popover-popup-delay="450" popover-trigger="mouseenter"
popover-placement="top" popover-animation="true" ng-repeat="m in metrics" ui-sref="{{m.sref}}"
class="list-group-item"
ng-click="selectMetric(m)" ng-class="{active: m.selected}">{{m.caption}}</a>
</div>
</div>
PS: I included ui.bootstrap to the "global" angular module, as they suggest Angular Bootstrap Site.
The problem was related to the version where this post was made, after that version they fixed this problem.
I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.