Open a hidden div when swiped up

Ionic Framework ionic-v3
1

i want to hide a div placed at bottom of the page when i swipe from bottom the div should be available

2

you can use swipe($event)

Name Value
DIRECTION_NONE 1
DIRECTION_LEFT 2
DIRECTION_RIGHT 4
DIRECTION_UP 8
DIRECTION_DOWN 16
DIRECTION_HORIZONTAL 6
DIRECTION_VERTICAL 24
DIRECTION_ALL 30

show: any = false
swipeEvent(e) {
if (e.direction == 2) {
this.show = true
}
}

3

swipe is working i have problem with placing a hidden div at the bottom and making it visible on swipe events

4

you can use

*ngIf

attribue in that div

1 Like
5

not working like i wanted
the div contains slides of images. *ngif is removing the div, its contents and position are reloaded when the div is shown again. i just want to hide it not remove it

6

it depend on how you use *ngIf to div

ngif works in both manner to hide or remove div either show or display it.

you just have to set true false value in ngIf ,when you swipe up then show the div by set true condition and when inverce action performed you can set false condition to hide the div

7

can u show how to hide an element using *ngif when i set value to false the element is removed

8

can you show me html code ?

9 
<div class="bottom" *ngIf="value==0" >
	 <ion-slides loop="true"  zoom="true" initialSlide="{{slide_no}}" slidesPerView="5" >
    <ion-slide *ngFor="let img of qq">
      <img class="img2"  src="{{img.src}}"  (click)="changeImage(img.src,img.image_id,img.index)">
    </ion-slide>
  </ion-slides>
	</div>
10

as i understand, you want to hide this div on (click)="changeImage(...) event right ?

11

yes i want to hide div on (click)="changeImage(…)
the slide contains a long list of images so when i change *ngif it actually removes the slides not hide

12

use boolean varible in ngIf

<div class="bottom" *ngIf="divVisible" >
  <ion-slides loop="true"  zoom="true" initialSlide="{{slide_no}}" slidesPerView="5" >
    <ion-slide *ngFor="let img of qq">
      <img class="img2"  src="{{img.src}}"  (click)="changeImage(img.src,img.image_id,img.index)">
    </ion-slide>
  </ion-slides>
</div>

declare divVisible as boolean in your ts file

divVisible:boolean=true;

and set true/false in changeImage(){
divVisible:boolean=false
}

13

First assign id to your div like shown below.

<div class="bottom" id="bottomDiv">
	 <ion-slides loop="true"  zoom="true" initialSlide="{{slide_no}}" slidesPerView="5" >
    <ion-slide *ngFor="let img of qq">
      <img class="img2"  src="{{img.src}}"  (click)="changeImage(img.src,img.image_id,img.index)">
    </ion-slide>
  </ion-slides>
	</div>

Then add this to your changeImage function:

  var bottomDiv = document.getElementById("bottomDiv");
  if(this.value == 0){
    bottomDiv.style.display = "none"; //to hide the div according to value
  }
  else{
    bottomDiv.style.display = "block"; //to show the div according to value
  }

Here you can modify your variable’s value as you require.

1 Like
14

thanx ankit it works
and a small typo a.style.display = "none"; should be bottomDiv.style.display = "none";

1 Like
15

Oh… sorry. Thanks for pointing it out.:grinning: (corrected)