ionic ion-scroll scroll parent page - javascript

I am developing an app that looks like this:http://codepen.io/anon/pen/vNOVvb
I am using ion-scroll to do horizontal scroll for the list of images. ion-scroll works fine as what I wanted. But the problem is user can't do vertical scroll to the full page when dragging on the ion-scroll.
How can I get the parent page vertical scroll works on ion-scroll?
My sample code as on codepen.io:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<!-- your app's js -->
<!--<script src="js/app.js"></script>
<script src="js/controllers.js"></script>-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<!-- MENU Template -->
<script id="templates/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/content1">
Content 1
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<!-- Content1 Template -->
<script id="templates/content1.html" type="text/ng-template">
<ion-view view-title="Content 1">
<ion-content>
<ion-item>
<div class="item-text-wrap mytitle">Title 1</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 2</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 3</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>
CSS file
.mytitle{
margin-top:20px;
margin-bottom:20px;
}
.foodImage {
margin-right:10px;
}
.foodImage div{
display: inline-block;
width:200px;
height: 200px;
}
.foodImage div img{
height: 100%;
width: 100%;
}
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
//controller: 'AppCtrl'
})
.state('app.content1', {
url: '/content1',
views: {
'menuContent': {
templateUrl: 'templates/content1.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/content1');
});


Just Add this piece of code in your controller.
.controller('sampleviewctrl')
inject this two library in your controller $timeout, $ionicScrollDelegate
$timeout(function(){
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
Html Page should be like this
<ion-scroll has-bouncing="false" direction="x" zooming="false" delegate-handle="horizontal">

Related

Getting pop up options like whatsApp when we click on attachment icon

I have <div> which should be opened on button click and closed again on same button click.
Someone marked it as duplicate,I know theme is same but the way of solving that question os different.I need in two different ways.
Here is my fiddle link https://jsfiddle.net/rojaHema/nhwyowcv/4/
As an example i need like whatsApp, how we get pop up options when clicked on attachments
Button
<a class = "tab-item" ng-click="showDetails = ! showDetails">
<i class = "icon ion-paperclip"></i>
Attach
</a>
Div
<div class ="bar bar-footer" ng-if="showDetails" >
<div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: white;" >
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>camera</a>
<a class = "tab-item" ng-click="pdfUpload()">
<i class = "icon ion-upload"></i>
Pdf
</a>
</div>
</div>

Link For the Updated fiddle
Updated Fiddle
Controller code
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.toggleStretchedMode = function() {
$scope.showDetails= !$scope.showDetails;
}
});
})(SampleApp || (SampleApp = {}));
Html Code
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<div class="row" ng-if="showDetails" style="padding-left: 205px;padding-top: 128px;">
<div class="col col-33" style="text-align:center;">
<ul class="row" >
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Camera
</a></li>
<li class="col" style=" display:inline;padding: 10px 15px;" >
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Gallery
</a></li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class = "tab-item" ng-click="pdfUpload()">
<i class = "icon ion-upload"></i>
Pdf
</a></li>
</ul>
</div>
</div>
</ion-content>
<div class ="bar bar-footer">
<div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
<a class = "tab-item" ui-sref="app.homeApp">
<i class = "icon ion-home"></i>
Home
</a>
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Camera
</a>
<a class = "tab-item" ng-click="toggleStretchedMode()">
<i class = "icon ion-paperclip"></i>
Attach
</a>
</div>
</div>
</div>
</div>
Hope It helps

Please try the following solution.
Everything was perfect in your fiddle code, I have just added ng-app and ng-controller. And then it worked.
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function (
$scope,
$ionicScrollDelegate,
$location
) {
});
})(SampleApp || (SampleApp = {}));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://code.ionicframework.com/1.0.0-beta.9/css/ionic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="MainCtrl">
<ion-view hide-back-button="true">
<ion-content scroll="false" style="top:0px;margin-top: 45px;">
<div class="row" ng-show="showDetails">
<div class="col col-33" style="text-align:center;">
<ul class="row">
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Camera
</a>
</li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Gallery
</a>
</li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="pdfUpload()">
<i class="icon ion-upload"></i>
Pdf
</a>
</li>
</ul>
</div>
</div>
</ion-content>
<div class="bar bar-footer">
<div class="tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
<a class="tab-item" ui-sref="app.homeApp">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Camera
</a>
<a class="tab-item" ng-click="showDetails = !showDetails">
<i class="icon ion-paperclip"></i>
Attach
</a>
</div>
</div>
</ion-view>
</body>
</html>

How can i make my Semantic Ui menu collapsable

This is my Semantic Ui menu, stackable for mobile devices. On low resolutions (mobile devices) i wanna make this collapsable. Insert something like this http://i.imgur.com/6gEp3Py.png
How can i do this? Ty
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container" class="ui fluid container">
<div id="navbar" class="ui stackable yellow inverted menu">
<div class="item">
<img src="assets/images/logo.png">
</div>
<a class="item" href="">Page1</a>
<div class="ui pointing dropdown link item">
<span class="text yellow inverted">Page 2</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
</div>
</div>
<a class="item" href="">Page 3</a>
<a class="item" href="">Page 4</a>
<a class="item" href="">Page 5</a>
</div>
</div>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$('.dropdown').dropdown({
transition: 'drop',
on: 'hover'
});
</script>
</body>
</html>

Maybe put all items to <div id="hiddable"> and add css mediaquery:
#media only screen and (max-width: 320px){
#hiddable { display:none }
}
And add
$( ".dropdown" ).click(function() {
$("#hiddable").show();
});
or somehting like this.

JQuery Mobile how to enable a collapsible set to drag and drop

I have tried to get the following demo working using a collapsible set instead of a listview and I am unable to do so:
http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/
Once the collapsible set is made sortable, the collapse functionality gets broken.
I am using:
JQuery Mobile 1.4.5
JQuery 1.11.0
JQuery-UI 1.11.4
Cordova 6.3.0
And I'm testing this on Android (SGS4)
HTML:
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.touch-punch.min.js"></script>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
JavaScript:
$(document).on("pageshow","#test",function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
/// Refresh list to the end of sort to have a correct display
$( ".sortable" ).bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});

pageshow event not firing. Go through the following code, it is working perfectly.
HTML code:
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
</html>
js code:
$(document).ready(function(){
$(".sortable").sortable();
$(".sortable").disableSelection();
/// Refresh list to the end of sort to have a correct display
$(".sortable").bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});

I hope this will help someone else out. I have not been able to get a collapsible set to work correctly with drag and drop functionality in cordova, so I came up with a different method. I just placed buttons on the collapsible header so that they can move up or down. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/app.css" rel="stylesheet" >
<link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.theme.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jsignature/jSignature.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable ui-collapsible-set ui-group-theme-a ui-corner-all" data-enhanced="true">
<div data-role="collapsible" id="collapsible-1" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 1<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 1</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-2" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 2<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 2</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-3" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 3<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-4" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 4<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 4</p>
</div>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
CSS:
.circular-btn {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
padding: 0px !important;
margin: 0px !important;
}
.circular-btn span span {
height: 100px !important;
line-height: 70px;
}
.span-move-up {
position: relative;
z-index: 10;
float: right;
top: -22px;
left: -40px;
}
JavaScript:
$('.move-collapsible-up').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var prevCollapseElem = currCollapseElem.prev('div');
/// detach and attach the add button
currCollapseElem.insertBefore(prevCollapseElem);
$('.sortable').collapsibleset('refresh');
});
$('.move-collapsible-down').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var nextCollapseElem = currCollapseElem.next('div');
/// detach and attach the add button
currCollapseElem.insertAfter(nextCollapseElem);
$('.sortable').collapsibleset('refresh');
});
Again, I hope this helps someone. If I have any issues in my code please don't hesitate to comment.

How to pass variable between states?

I'm new to ionic; I want to pass variables between two states, please guide me on how to do it.
I have setup a codepen example.
I want when items are left clicked (say item1, item2) move to view cart page and show id of clicked item.
Below is attached my code:
angular.module('ionicApp.controllers', [])
.controller('Tab1Ctrl', function($scope){
})
.controller('Tab2Ctrl', function($scope){
})
.controller('Tab3Ctrl', function($scope){
});
.btn-footer .button { margin: 0; }
.btn-footer .row { padding: 0; }
.btn-footer .col { padding: 0 5px; }
.img-box img { max-width: 100%; }
.p0 { padding: 0; }
.tabs-top-my .tab-nav.tabs { top: 0; }
.my-content-tabs > .row { height: 100%; }
.my-content-tabs .col-25,.my-content-tabs .col-20 { position:relative;}
.img-box {
height: 100%;
max-height: 100%;
position: absolute;
left: 0;
}
#maincontainer > div.scroll{padding-left:10px;}
.my-imgs-scroll { height: 100%; overflow:hidden !important; overflow-y:scroll !important; }
ion-scroll > div.scroll > img{ border-bottom:1px solid #eee;}
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic page</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
</head>
<body ng-controller="HomeTabCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view animation="slide-left-right"> </ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="list">
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-chatbubble-working"></i>Call Ma</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">
<ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
<ion-nav-view name="tab1-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
<ion-nav-view name="tab2-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
<ion-nav-view name="tab3-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
<ion-nav-view name="tab4-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
<ion-nav-view name="tab5-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()" ui-sref="tabs.tab6">
<ion-nav-view name="tab6-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button class="button button-block button-positive" ng-click='next()'> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
</script>
<script id="templates/tab1.html" type="text/ng-template">
<ion-view view-title="tab1">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
<div id="1" style="height=:40px"> Item 1</div>
<hr/>
<div id="2" style="height=:40px"> Item 2</div>
<hr/>
<div id="3" style="height=:40px"> Item 3</div>
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 1
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab2.html" type="text/ng-template">
<ion-view view-title="tab2">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 2
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab3.html" type="text/ng-template">
<ion-view view-title="tab3">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> <canvas id="canvas3"></canvas> </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab4.html" type="text/ng-template">
<ion-view view-title="tab4">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab5.html" type="text/ng-template">
<ion-view view-title="tab5">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab6.html" type="text/ng-template">
<ion-view view-title="tab6">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/next.html" type="text/ng-template">
<ion-view view-title="View Cart" nav-bar-class="bar-balanced">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
clicked id :
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ngAnimate']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.tab1', {
url: "/tab1",
views: {
'tab1-tab': {
templateUrl: "templates/tab1.html",
controller: 'Tab1Ctrl'
}
}
})
.state('tabs.tab2', {
url: "/tab2",
views: {
'tab2-tab': {
templateUrl: "templates/tab2.html",
controller: 'Tab2Ctrl'
}
}
})
.state('tabs.tab3', {
url: "/tab3",
views: {
'tab3-tab': {
templateUrl: "templates/tab3.html",
controller:'Tab3Ctrl'
}
}
})
.state('tabs.tab4', {
url: "/tab4",
views: {
'tab4-tab': {
templateUrl: "templates/tab4.html"
}
}
})
.state('tabs.tab5', {
url: "/tab5",
views: {
'tab5-tab': {
templateUrl: "templates/tab5.html"
}
}
})
.state('next', {
url: "/next",
templateUrl: "templates/next.html",
controller: "NextController",
params: {
clickedid: null
}
})
$urlRouterProvider.otherwise("/tab/tab1");
})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate, $state) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.toggleRightSideMenu = function() {
console.log('rigth open')
$ionicSideMenuDelegate.toggleRight();
};
console.log('HomeTabCtrl');
$scope.next = function(){
$state.transitionTo('next');
}
}).controller("NextController", function($scope){
$scope.showAlert = function(){ alert("I'm a modal window!") }
});
</script>
</body>
</html>

The simple way is to use $rootScope but will always reset when the page refreshes, since it's a single-page app.
You need to use something that persists client-side, such as a cookie or sessionStorage (as they both have an expiration time). For the cookies see $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore

How about this ?
http://codepen.io/anon/pen/YwjEBx
Note that i'm not technically passing variable between states.
Your sidepanel and details view belong to the same controller so I just have to set some variable on the scope controller to play with.
Here's the main change : an ng-repeat with objects on the side panel. Use of a button to be able to bind an ng-click event. A currentItem in the scope that hold the value of the currentItem to be shown in the details view. I only modified the template tab1.html and the tab1Ctrl nothing more.
.controller('Tab1Ctrl', function($scope){
$scope.items = [{label:'Item 1', details:'details 1'},{label:'Item 2',details:'details 2'}]
$scope.currentItem=null;
$scope.setCurrentItem = function(item){
$scope.currentItem = item;
}
})
<div ng-repeat="item in items">
<button id="$index" style="height=:40px" ng-click="setCurrentItem(item)">{{item.label}}</button><hr/>
</div>

You can work with $rootScope to sharing data between controllers. I use a lot.
See here a good example

Don't abuse the $rootScope to pass things between states. It's not meant for that. $rootScope is meant for global application level functionality.
Please read this solution: watched scope is empty after route change

Ionic Framework: Can't redirect to another page from my controller?

Having trouble trying to get my app to switch to another page on a click in my controller. If anyone could give me pointer on what I'm missing or doing wrong here it would really be appreciated!
here is my app.js
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'login': {
templateUrl : 'index.html',
controller: 'TestCrtl'
}
}
})
.state('userprofile', {
url: '/mainmenu',
templateUrl: 'views/main-menu/main-menu.html'
})
$urlRouterProvider.otherwise('/');
})
.controller('TestCtrl',function($scope, $location) {
$scope.testMove = function($scope, $location) {
console.log("Button was pressed!");
$location.transitionTo('/mainmenu');
}
});
and here is my index.html
<body ng-app="app" animation="slide-left-right-ios7">
<ion-view style="" title="MainMenu">
<div class="bar bar-header bar-assertive">
<h1 class="title">Home</h1>
<a class="button icon-right button-clear ion-gear-a"></a>
</div>
<ion-content style="background-color: #e9efec" class="has-header" scroll="true" padding="true">
<div align="center" style="padding: 15%">
<img style="height: 60px; width: 180px" src="img/digicellogo.png">
</div>
<div style="" class="list card">
<div class="item item-body">
<form >
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/username-logo.JPG">
</a>
<input type="text" placeholder="DigicelID">
</label>
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/password-logo.JPG">
</a>
<input type="text" placeholder="Password">
</label>
<div align="right">
<button class="button button-clear button-assertive">
Forgot Password?
</button>
</div>
<a class="button button-block button-assertive" ng-click="testMove()" ng-controller="TestCtrl">
Login
</a>
<button class="button button-block button-assertive">
Sign Up
</button>
</form>
</div>
</div>
</ion-content>
</body>
EDIT:
My Updated controller in App.js:
No longer gives me a "undefined error" but simply does nothing? I don't know if I fully understand how to inject $scope.
.controller('TestCtrl',['$scope', '$state', function($scope, $state) {
$scope.testMove = function() {
console.log("Button was pressed!");
$state.go('userprofile');
};
}])

Try using $state.go('userprofile');
instead of location.transitionTo('/mainmenu');
(remember to inject $state into your controller to test this)

Categories

Resources