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
Related
After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')
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 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>
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.
I want to use i18n translation plugin (http://code.google.com/p/jquery-utils/wiki/I18N) for translation of web app.
Is it mobile site: if I am trying:
<div data-role="header">
<h1><script type="text/javascript">document.write($.i18n('appTranslate', 'footer')); </script></h1>
</div>
everything is O.K.
But if I want to add translation to a href
<div data-role="content">
<ul data-role="listview">
<li><script type="text/javascript">document.writeln('footer'); </script></li>
<li><script type="text/javascript">document.writeln('footer'); </script></li>
</ul>
</div>
I get always only white screen with translated string.
Question is:
How to solve that or if is any better way how to use i18n with jQuery mobile ?
(http://the-m-project.org I tried).
Many thanks for help