I am currently working of a ionic v1 project and i need to add a background slideshow for the application but cannot find how to do that in ionic. I have tried https://tympanus.net/codrops/2013/04/17/background-slideshow/ but i need something that works with angular.js.
Thanks
<ion-content scroll="false" class="padding">
<div class="full">
<div class="half">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<center> <i class="ion-android-archive homefont"></i>
<h2>Post a request</h2>
<p></p>
</center>
</ion-slide-page>
<ion-slide-page>
<center> <i class="ion-locked homefont"></i>
<h2>Safe Deposit</h2>
<p></p>
</center>
</ion-slide-page>
<ion-slide-page>
<center> <i class="ion-plane homefont"></i>
<h2>Traveller Fulfills</h2>
<p></p>
</center>
</ion-slide-page>
</ion-slides>
</div>
<div class="2half">
<div class=" padding-top">
<center > <img src="img/logo.jpg" alt="logo" width=80 height=80></center>
</div>
<div class=" padding-vertical">
<button class="button button-block button-positive">
Post Your Request
</button></div>
<button class="button button-block button-positive">
Post Your Trip
</button>
</div>
</div>
</ion-content>
class full will have a height of 100% while half and 2half will both have a height of 50% and display value is block.
to make the slider to a full background slider class half height will be 100%
Related
I have a project in Ionic v1 and I am making some enhancements to it.
I have a list of cards where the card itself is clickable to take the user to more details. I need to add couple buttons on the card but I can't get the clicks to be captured by the button - the click goes to the card href. Sample code below.
<div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
<div class="item" ng-click="clickCard(evtKey)">
<div class="row">
<div class="col-20 row-center">
<div> Some stuff here</div>
</div>
<div class="col-80 item-text-wrap">
<div> More stuff here </div>
<div class="row text-center">
<div class="col col-33">
<div> More stuff </div>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('No')">No</button>
</div>
</div>
</div>
</div>
<p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
</div>
</div>
Looking for help on how to make the click on the button be captured by the button and not by the card. Examples I have found so far are all on doing that with Ionic v2 and later and not for v1.
Thanks,
-S
event.stopPropagation() will stop calling event from parent elements. And also don't put alert in ng-click
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
</div>
I'm building an app with AngularJS.
Inside this app I would like to have 2 buttons on each row, except when the total buttons are not even.
How can I let the code stop creating the last col?
With the next code the 6th button (on a array with 5 items) is empty. I don't want this one on the screen.
<div ng-repeat="tool in tools">
<div class="row" ng-if="$even">
<div class="col" ng-repeat="tool in [tools[$index],tools[$index + 1]]">
<button class="button button-block button-{{tool.color}}">
<i class="icon {{tool.icon}}"></i>
<br>{{tool.name}}
</button>
</div>
</div>
</div>
Switch the inner ng-repeat to use limitTo filter;
<div ng-repeat="tool in tools">
<div class="row" ng-if="$even">
<div class="col" ng-repeat="tool in tools | limitTo:2:$index">
<button class="button button-block button-{{tool.color}}">
<i class="icon {{tool.icon}}"></i>
<br>{{tool.name}}
</button>
</div>
</div>
</div>
I have the footer bar added in the index.html file
<ion-footer-bar align-title="left" class="bar-assertive zee-footer" ng-show="loggedUser && loggedUser > 0">
<div class="buttons {{footerTabSee}}">
<button class="button btn-relative" ng-click="seePage()"><img src="img/pen-white.png" alt=""/>
<span id="seeNoti"></span>
<!--<span class="btn-notification">1</span>-->
</button>
</div>
<div class="buttons {{footerTabHeart}}">
<button class="button " ng-click="heartPage()"> <img src="img/single-heart.png" alt=""/> </button>
</div>
<div class="buttons foo-rose {{footerTabChat}}">
<button class="button" ng-click="rosePage()"> <img src="img/rose.png" alt=""/>
<!--<span class="btn-notification" ng-show="roseNotification">{{roseNotification}}</span>-->
<span id="roseNoti"></span>
</button>
</div>
<div class="buttons {{footerTabChatGrp}}">
<button class="button "> <img src="img/double-heart.png" alt=""/> </button>
</div>
</ion-footer-bar>
this footer is displayed in all the files in my project, but in one page i don't want this footer. I want to add my custom footer that will be in the page itself.
<ion-footer-bar class="bar-stable item-input-inset chat-page chat-footer" keyboard-attach>
<!--<div class="chat-camera" ng-show="msgData.txt == ''"></div>-->
<label class="item-input-wrapper">
<textarea msd-elastic name="msgData.txt" ng-model="msgData.txt" ng-blur="" placeholder="Write here..."></textarea>
</label>
<button class="button button-icon icon ion-android-send chat-send" ng-disabled="!msgData.txt || msgData.txt === ''" ng-click="sendMessage(User.other_chat_id)"></button>
</ion-footer-bar>
Is there any way to do this?
I want to simulate an effect similar to ng-disable in buttons which disables and makes button semitransparent, but on a div.
I'm using ionic framework (just in case).
I have this div, I want it to have transparency/opacity to 50% and to be disabled at the beginning:
<div class="suboption">
<div class="description-and-dropdown-wrapper" >
<h4>{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
But once a button in an another div has been clicked to make its transparency to 0% and to enable all contents inside the first div, this is the other div, So on cityClick() I want to trigger something that unlocks/enables all contents in first div and sets tranparency of first div to 0%:
<div class="description-and-dropdown-wrapper">
<h4>{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities" ng-click="cityClick(city)"> //NOTICE cityClick() HERE
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
I'm a newbie with angular so I just want someone to point me in the right direction to do this.
I could do this by using ng-class to toggle between two classes 1 with opacity and the other one without opacity and using the same var of ng-class to ng-disable enable the button:
<!-- ng-class with ternary operator: if disableSpecialty then class=disabled-suboption else class=suboption -->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper" >
<h4>{{specialtyName}}</h4>
<div class="buttons">
<!-- if disableSpecialty === true then disable the button-->
<button class="button button-icon ion-ios-arrow-down" ng-disabled="disableSpecialty" ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
When i load a template on click of button using $state.go() slider embedded in template not displaying its content.
When i rotated my device then it start showing the slides.
Please sugggest what i am missing in this code snippet of template.
<ion-slide-box on-slide-changed="" show-pager="true">
<ion-slide ng-repeat="placementStep in placementSteps">
<div class="list card">
<div class="item-divider">
<div class="row">
<div class="col">
<h1 class="title">{{placementStep.stepName}}</h1>
</div>
<div class="col">
<button class="button icon ion-chevron-right button-positive button-small right" ng-if="$index!=placementSteps.length-1&& placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,0)"></button>
<button class="button icon ion-chevron-left button-positive button-small right" ng-if="$index!=0 && placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,1)"></button>
</div>
</div>
</div>
<ion-list show-reorder="data.showReorder" can-swipe="false" ng-class="has-header">
<ion-item ng-repeat="student in placementStep.studentsForStep">
<div class="row">
<div class="left checkbox">
<input type="checkbox" ng-checked="student.checked==true" ng-model="student.checked">
</div>
<div class="col vertical-center">
{{student.first_name}}
</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
Call This function,
$ionicSlideBoxDelegate.update();
Immediately after loading the image files or directly within the controller definition for that view.
notice the absence of of the getbyhandle();
I used delegate handle to update the slide box after loading data. It worked.
$ionicSlideBoxDelegate.$getByHandle('placementStepSlideBox').update();
Where "placmentStepSlideBox" is the delegate handle name.