Disable ion-side-menus only within a specific div container - ionic-framework

I am trying to add an image slider to my page but when scrolling left on the image slider, it causes the side menu to reveal itself as well. I still want the side menu to work on the page, just not in the div containing the image slider.
Below are the relevant files with some sections omitted for brevity. Basically, a page called clients.html is injected between the ion-nav-view tags in index.html. This clients page has a custom directive called img-slider, whose html is defined in directive.html. The image slider has a container "swiper container", and this is the container in which I want the side menu to be disabled. Any dragging events outside this div should still trigger the left menu.
In case it's relevant, the image slider uses a third party library called Swiper.
index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="menuCtrl as vm">
<div class="list">
<div class="item">
<a href="#/clients">
<i class="icon ion-person-stalker"></i>
Clients
</a>
</div>
<div class="item">
<a href="#/appointments">
<i class="icon ion-calendar"></i>
Meetings
</a>
</div>
<div class="item">
<a href="#/products">
<i class="icon ion-pricetag"></i>
Products
</a>
</div>
<div class="item">
<a href="#/sales">
<i class="icon ion-social-usd"></i>
Sales
</a>
</div>
<div class="item" ng-click="vm.logout()">
Disconnect
</div>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
</html>
clients.html
<ion-view view-title="Commercial: Clients">
<ion-header-bar align-title="center">
<h1 class="title">Commercial: Clients</h1>
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</div>
</ion-header-bar>
<ion-pane>
<ion-content>
<img-slider></img-slider>
</ion-content>
</ion-pane>
</ion-view>
directive.html
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
directive.js
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
$ionicSideMenuDelegate.canDragContent(false);
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());


I just modified your code by adding an ng-show tag it worked for me
<div class="swiper-container" ng-show="menu()">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
and in directive.js file
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
//$ionicSideMenuDelegate.canDragContent(false);
$scope.menu = function(){
$ionicSideMenuDelegate.canDragContent(false);
return true;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());
If having any queries please reply me

Related

bootstrap 4 collapse only one at a time doesn't work. but works in bootstrap 3

I'm working with bootstrap 4.4.1. My goal is to expand accordion one panel at a time and close other panels which are previously open. I couldn't achieve this. I noticed one more issue, that my goal is achieved when bootstrap 3.3.1 is used. I mean accordion open one panel at a time is working in bootstrap 3.3.1, but not working in 4.4.1.
Bootstrap 4.4.1
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Bootstrap 3.3.1
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Is it feasible to achieve this on bootstrap 4.4.1?
Thanks in advance

You need to set data-parent="#accordion1" property to div#collapseOne1, div#collapseTwo1 and div#collapseThree1 instead of your divs with class panel-title.
working example on codepen
You can also add class="accordion" to your wrapper (div#accordion1) and use cards to style your accordion. Refer to accordions
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse show" data-parent="#accordion1">
<div class="panel-body">Body 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse" data-parent="#accordion1" >
<div class="panel-body">Body 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse" data-parent="#accordion1">
<div class="panel-body">Body 3</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

How can I use Swiper in Polymer?

<link rel="stylesheet" href="../swiper/swiper-3.4.2.min.css">
<script src="../swiper/swiper-3.4.2.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide aa">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
It does not work.

you can use this component made for Polymer which wraps around Swiper.js

Creating a modal box on page load

I want to insert this modal box on my webpage, but I don't have the css of this code:
http://www.bootply.com/testazoid/14LH4kZul2#

you'r might be looking for this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>

This modal from bootstrap. you need bootstrap JS and CSS
refer this https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

How to change the page content based on Carousel in Ionic

I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.

Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>

Ionic framework and bottom fixed content

I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not work.
HTML:
<ion-view hide-nav-bar="true">
<ion-content padding="true">
<img class="logo" src="img/logo.jpeg" />
<div class="login-form">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</ion-content>
I would like to set as "fixed" the div.login-form.
Using the following CSS does not work:
{
position: fixed;
bottom: 20px;
}
Also, with position:fixed input texts seem no more editable.
In Ionic, is it possible to fix part of the content to bottom?
Thx!

You could use anythnig out the ion-content with a button inside of it.
Demo
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
<div class="fixed-outside">
<div class="row">
<div class="col">
<button class="button button-circle button-energized icon ion-log-in"></button>
</div>
<div class="col">
<button class="button button-circle button-positive icon ion-social-facebook"></button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</div>

How about just using the default ionic tab bar and just change the height to auto or any px that you wishes. Just make sure you put the code below ion-content tag.
Code:
<ion-content padding="true">
</ion-content>
<div class="tabs tabs-dark" style="height:auto;">
<div class="row">
<div class="col">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" >
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-positive">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
Codepen example : http://codepen.io/ridwan/pen/JozeYK

You could use a directive to calculate the height of the form. It will recalculate on window resize. I haven't tested navigating away from the page.
Codepen
Relevant HTML
<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
<ion-content padding="true" scroll="false">
<ion-scroll scroll-height>
Content to go above the form
</ion-scroll>
<div class="login-form">
Login form
</div>
</ion-content>
</ion-view>
CSS
.scroll-content {
position: relative;
}
div.login-form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Directive
.directive('scrollHeight', function($window) {
return {
link: function(scope, element, attrs) {
scope.onResize = function() {
var winHeight = $window.innerHeight;
var form = angular.element(document.querySelector('.login-form'))[0];
var formHeight = form.scrollHeight;
var scrollHeight = winHeight - formHeight;
element.css("height", scrollHeight + "px");
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
})

all the elements which you want to have fixed in the bottom should be out of the ion-content. This is a working example:
<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
<img class="logo" src="img/logo.jpeg" />
</ion-content>
<!-- align to the bottom of the page -->
<div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>

I just find a simple solution, which works fine for me.
<ion-content>
<ion-scroll style="height: 300px">
<div style="height: 1000px">
your scroll content
</div>>
</ion-scroll>
<div>
your fixed div, maybe a form
</div>
</ion-content>
you can also refer to: http://ionicframework.com/docs/api/directive/ionScroll/
I hope it helps.

I ended up more or less circumventing Ionic's intentions and using a flex box layout:
<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
<div class="flex-head"> ... </div>
<div class="flex-body flex-1"> ... </div>
<div class="flex-foot"> ... </div>
</ion-view>
The SCSS, using Ionic's mixins, looks something like this:
.flex-wrapper {
#include display-flex;
#include flex-direction(column);
...
}
.flex-1 {
#include flex(1);
...
}

actually i am using the version Ionic 2.0.0 i resolve with this code
<ion-fixed class="fixed">
<button fab fab-right fab-bottom>
${{ totalPrice }}
</button>
</ion-fixed>
in your File Scss
.fixed {
bottom: 50px;
right: 10px;
}