I just want to remove the tittle bar (header) (blue side part in image)inside this page.
my ionic code in about.html page
<nav-page hide-nav-bar="true">
<ion-view>
<ion-content class="app-view">
<div class="list-inset-feed">
<div class="item item-text-wrap">
<div class="row responsive-sm text-center">
<div class="col">
<h1 class="text-white">{{"about_page_title" | translate}}</h1>
<h3 class ="text-white">version 1.0.0</h1>
<div class="image_container">
<img alt="logo" height="100" src="img/logo.png">
</div>
<a class="text-white" href="#" onclick="window.open('http://abcd.html', '_system', 'location=yes'); return false;">
privacy policy
</a>
</div>
</div>
</div>
</div>
</ion-content>
Add hide-nav-bar="true" inside your <ion-view> tag.
HTML
<ion-view hide-nav-bar="true">
<ion-content >
</ion-content>
</ion-view>
Related
am working on tile base interface design using angular2,Tile name and image click events are fetching details from db.Now iam trying to fetch details when click on article div.please check my code
<ng-container *ngFor="let item of itemdetails;">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="col-item">
<figure class="photo">
<a [routerLink]="['/productdetails',item.ItemID]">
<img [src]="item.ItemImage1" class="img-responsive center-block" alt="Product Image" />
</a>
</figure>
<div class="info">
<div class="row" style="margin:0px;">
<div class="ItemDetails ellipseArea">
<a [routerLink]="['/productdetails',item.ItemID]">
<span class="Subtext">{{item.ItemDescription}}</span>
</a>
</div>
</div>
</div>
</article>
</div> <!--col ends-->
</ng-container>
template
<article class="col-item" (click)="fetchDetails(item)">
component
fetchDetails( _item ) {
this._http.(...)
}
Id like to hide image in iframe. I am trying this :
iframe A IMG {
display:none;}
But it doesnt help, my HTML :
<div class="container-fluid blog-main">
<div class="blog-post">
<h2 class="blog-post-title">
<span><a href="http://martinpodlesak.com/stanislav-dietz/" rel="bookmark" title="Permanent Link to Stanislav Dietz">
Stanislav Dietz</a></span>
</h2>
<div class="meta-tag">
<div class="cleared"></div>
<i class="fa fa-pencil-square-o"></i> <a class="post-edit-link" href="http://martinpodlesak.com/wp-admin/post.php?post=435&action=edit">Edit</a>
<div>
<p><iframe src="http://www.eliteprospects.com/iframe_player_stats.php?player=72289" width="100%" height="490" scrolling="yes" frameborder="0"></iframe></p>
</div>
</div>
</div>
<div class="cleared"></div>
</div>
And my website where I am trying to solve the problem:
http://martinpodlesak.com/stanislav-dietz/
I have used ion-slide-box to show slides on home page of application,
But i can't found the fade effect to ionic slide box.
I have used the following code to show slides , please suggest me how to add fade effect ion-slide-box. (Ionic Version - 1.7.15)
<ion-view>
<ion-content>
<div class="top-icons">
<div class="row paddings">
Some content are here
</div>
</div>
<div class="slider-container">
<ion-slide-box show-pager="true" does-continue="true" auto-play="true" slide-interval="5000">
<ion-slide class="slider-res">
<img src="image/slider/img1.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img2.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img3.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img4.png" />
<div class="slider-text">Text Content</div>
</ion-slide>
</ion-slide-box>
</div>
<div>
Other Content are here
</div>
</ion-content>
</ion-view>
Please help me to solve this issue.
how do id encode/decode html in ionic framework
below is my code.
<ion-view view-title="Products">
<ion-content class="padding">
<div class="list">
<div class="card" ng-repeat="item in products">
<a class="item item-avatar" on-tap="productDetails(item.ProductId)">
<h2>{{item.Name}}</h2>
<p>Price {{item.Prices[0].Value}}</p>
<p>{{item.Description}}</p>
</a>
<a class="item item-image" on-tap="productDetails(item.ProductId)">
<img ng-src="{{item.ImageUrl}}"/>
</a>
<!--<div class="item item-icon-left energized" >-->
<div class="button-bar">
<div class="button button-clear energized" ng-click='addToCart(item.ProductId);' style="font-size:80%;">
<i class="icon ion-ios-cart"></i>
Add To cart
</div>
<div class="button button-clear energized" on-tap="productDetails(item.ProductId)" style="font-size:80%;">
<i class="icon ion-eye"></i>
View More
</div>
</div>
<!--</div> -->
</div>
</div>
</ion-content>
when I tried to fatch my record from product and
it is encoding
therefore browser is showing like the below image
And the value store in salesforce product2 object is
"Pacifique - Bora Bora Pearl Beach Resort & Spa - Polynésie française"
Use
<h2 ng-bind-html-unsafe="item.Name"></h2>
The documentation can be found here
There is a working plunkr -> http://plnkr.co/edit/dOzvvNcaLjd9CsKzyIY0?p=preview
I'm trying to put header and top navbar inside of the ion-view directive.
If I put header nav navbar outside of the ion-view tag page is blinking black if page is initialized.
But if I try to insert header and top navbar inside of the ion-view title and heading in the header is not displayed.
Could somebody tell me what I'm doing wrong?
Maybe some tag inside is missing?
Thanks for any help.
Here is the code of the template:
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-view>
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-content ng-controller="DailyListCtrl">
<!--WRITEOUT OVERAL STATS FOR DAYS -->
<ion-list class="list" >
<ion-item class="item itemListCustom" ng-repeat="listDataItem in listData">
<div class="listDateTimeBlock">
<div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div>
<div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div>
</div>
<!--ROW ONE -->
<div id="left">
<div class="left-inner">
{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'DIALS' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DIALS_CNT}}
</div>
</div>
<!--ROW TWO-->
<div id="left">
<div class="left-inner ">
{{ 'SUCCESS_RATE_SINCE_START' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE_SINCE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'CONVERSATIONS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.CONVERS_CNT}}
</div>
</div>
<!--ROW THREE-->
<div id="left">
<div class="left-inner">
{{ 'MY_DEFICIT' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DEFICIT}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'APPOINTMENTS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.APPT_CNT}}
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll
icon="ion-loading-c"
distance="30%"
on-infinite="setDateRange();">
</ion-infinite-scroll>
</ion-content>
<!-- BOTTOM TABS -->
<div class="tabs-striped tabs-background-positive tabs-light">
<div class="tabs">
<a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-ios7-paper-outline"></i>
</a>
<a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list">
<i class="icon ion-star"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
</div>
</div>
</ion-view>
Here are some examples of navbar usage:
Simple page with buttons left and right:
http://codepen.io/beaver71/pen/YwLELa
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
</ion-content>
</ion-view>
Navigation via side menu:
http://codepen.io/beaver71/pen/XXBvYp
Navigation via side menu and tab bar:
http://codepen.io/beaver71/pen/xZWXBO
Try to use the JavaScript versions of tabs and navigation bars.
They are easier to be manipulated in JS code, because they come with the services $ionicTabsDelegate and $ionicNavBarDelegate.