Hammer swipe event not working ios/chrome - javascript

Ok well, I just implemented a scroller with hammer inside an angular directive, I need a div to be scrollable by page (some sort of carrousel) so I wen't with hammer.js everything works just great in desktop and android (any device) but I'm having issues with chrome on iOS and I'm not sure why is that happening, I can see hammer.js examples and they work on iPad as well so I'm sure I'm probably doing something wrong, so here is my html.
<div class="my-slidebox slidebox-container ng-isolate-scope" content-class="my-slidebox-content">
<div class="slidebox" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div ng-transclude="" class="slidebox-content" style="width: 2820px;">
<!-- ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/29/product/ror_ringer.jpeg?1404930806" src="/spree/products/29/product/ror_ringer.jpeg?1404930806">
<div class="caption text-left">
<p class="brand-name ng-binding">Rails</p>
<p class="product-name"><strong class="ng-binding">Ruby on Rails Ringer T-Shirt</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/33/product/apache_baseball.png?1404930809" src="/spree/products/33/product/apache_baseball.png?1404930809">
<div class="caption text-left">
<p class="brand-name ng-binding">Apache</p>
<p class="product-name"><strong class="ng-binding">Apache Baseball Jersey</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/41/product/spree_jersey.jpeg?1404930816" src="/spree/products/41/product/spree_jersey.jpeg?1404930816">
<div class="caption text-left">
<p class="brand-name ng-binding">Spree</p>
<p class="product-name"><strong class="ng-binding">Spree Baseball Jersey</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts -->
<div class="right-fix ng-scope"></div>
</div>
</div>
</div>
this markup is for a horizontal list, so I have a container with a fixed width, then another container inside with a huge width so it'll be scrollable and then each individual element inside, I don't wan't the user to use the horizontal scrollbar, instead I wan't to show 'pages' of items every time the user swipes(mobile) or clicks a button(desktop), so then according to hammer documentation, the usage would be
var content = document.getElementsByClassName('slidebox')[0];
var hammer = Hammer(content, { touchAction: 'pan-y' });
hammer.on('swipeleft', function(){ alert('swipe left'); });
hammer.on('swiperight', function(){ alert('swipe right'); });
This just works great on both desktop and chrome/android, but not on iPad, I don't know if maybe the event is being captured by children elements or something, I've been dealing with this for a while with no luck, any help appreciated.

Related

Toggle button - show / hide information

Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>
First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...
HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>

Image Gallery - Slider

I developed an image gallery. In a main box (large box) I introduce the first image of the array, the rest are arranged horizontally below that image.
Is there a way to get the big box to function as an image slider?
At this point try to apply, however I have some problems :( the secondary images do not appear below the main one, nor is the slider working correctly, when I move to the second image, all the others are loaded.
I chose to use * ngFor to load secondary images, in case I can have an array with indeterminate quantities of images.
DEMO
CODE
<div class="col-md-6">
<div class="drop">
<div class="abc">
<img class="img-fluid Images" [src]="images[0].img" >
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</div>
<!-- -------------------------------SLIDER----------- -->
<div class="col-md-6">
<ngb-carousel *ngIf="images">
<div class="drop">
<div class="abc">
<ng-template ngbSlide>
<img [src]="images[0].img" alt="Random first slide">
</ng-template>
</div>
</div>
<ng-template ngbSlide>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
What I want with the functional slider
I intend that when clicking on the buttons on the slider it will display the secondary images (the images shown below the main image)
you have to use corousel-Api to get change event.
corousel emit slide event when image is change(automatic or via button)
so you have to add an event to corousel change i have added change($event) to (slide) output.
<ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)" >
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" [alt]="">
</div>
<div class="carousel-caption">
<h3>{{imgIdx.head}}</h3>
<p>{{imgIdx.data}}</p>
</div>
</ng-template>
</ngb-carousel>
<div *ngFor="let imgIdx of belowImageData; let i = index" style="width:80px" >
<img class="col-sm" [src]="imgIdx.image" style="width: 100%; height: 100%;">
</div>
then in chnage event i have updated belowImageData array according to image loded in upper corousel.
constructor(){
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(0,1);
}
change(data){
console.log(data.current)
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(data.current, 1);
}
you can also add this line to pause automatic slide
this.carousel.pause();
i have developed a stackblitz for you(without proper css).

IE hides div element when certain class is used, works fine in chrome/firefox, does anyone have information on this error?

So, I am using oracle apex and I use JavaScript to populate a div tab and add the element to a hidden region on the current page. The resulting HTML is below:
<div class="t-ButtonRegion **t-Form--floatLeft** t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="main_details" role="group" aria-labelledby="main_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="main_details_heading">Main Panel</h2>
<div class="container">
<div class="row">
<div class="col col-12 ">
<div class="t-ButtonRegion t-Form--floatLeft t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="other_details" role="group" aria-labelledby="other_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="other_details_heading">Details</h2>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
<div id="divide" style="margin: 5px 5px 15px; padding: 20px 15px 20px 20px; **position: fixed;** background-color: rgb(222, 239, 251);"><h3 id="header1">B.2.1</h3><p id="paragaph1">Organizational system for the environmental program that defines staff roles and responsibilities, etc,etc </p></div></div>
</div>
</div>
</div>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
</div>
I starred the two spots that if removed would fix the issue of the divide element not appearing on the screen. Not both, either one or the other. I needed a fix position so i removed the floatLeft. Would anyone know why this floatLeft class would cause the divide element to not show. Note: only time this occurs is in IE, Firefox and chrome work fine with the above code. Any help is appreciated.
Edit: I looked for the css after the suggestion and got:
.t-Form--floatLeft{overflow:hidden}
.t-Form--floatLeft .col{width:auto!important}
.t-Form--floatLeft .t-Form-fieldContainer{width:auto;float:left;clear:none}
.t-Form--floatLeft .t-Form-labelContainer{min-width:0;width:auto}
.t-Form--floatLeft .t-Form-inputContainer select{max-width:100%}
I have more to go off of now, so I am researching still but if anyone has ideas, please let me know.

jQuery .draggable() either doesn't drag or drags too many cards

I'm making a web app for poker cards. The idea is you drag cards from a deck to a hand/board and it ranks it for you. The functionality of the site works; I just can't get the cards to be able to drag from the deck to the board.
Draggable doesn't work on the card, and the text of the card is highlighted instead.
Draggable does work, but it drags more cards than I want it to. For example, I'll try to drag the 3 of diamonds and for some reason it grabs all the 3s and some of the 4s.
How can I get dragging a single card working correctly?
.card {
height: 9.2em;
width: 6.61em;
padding-left: .2em;
font-size: 12px;
margin:.2em;
float:left;
clear:both;
position: relative; }
<div class="container-fluid" id="deck">
{% for card in deck %}
<div class="drag">
<div id="{{card.rank}}{{card.suit}}" class="card rank{{ card.rank }}{{ card.suit }}">
{{ card.rank }} <br/> &{{ card.suit_verbose }};
</div>
</div>
{% endfor %}
</div>
<script>
$(function() {
$(".drag").draggable();
});
</script>
EDIT: here's the Jinja html:
<div class="container" id="wrapper">
<h1 class="container text-center">
two pair
</h1>
<div class="panel panel-default" id="canvas">
<div class="container-fluid" id="board">
<div class="row col-md-1">
<span class="card empty"/>
</div>
<div class="row col-md-1">
<span class="card empty"/>
</div>
...
</div>
</div>
</div>
Strange, but it looks like you simply forgot to add jQuery UI to your scripts. I added jQuery UI to your fiddle and it works (checked on Chrome and FF). Check it out: https://jsfiddle.net/wx5oz45g/1/ . Only other change was adding cursor: pointer in CSS to class .drag so I could see better what should be responsive.

Mansonry layout responsive gutter

I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).

Categories