How can we disable the zooming function of ion-slides in Ionic 4, I already tried adding zoom="false" input on ion-slides element but it's not working, when I am double tapping on the screen it's still zooming the image and breaking the design.
You can disable zoom using below code in options of ion-slides in your ts file.
slideOpts = {
zoom: false
};
<ion-slides [options]="slideOpts">
<ion-slide>..</ion-slide>
</ion-slides>
Related
I have a map in my angular application OpenLayers map.
During the test using testcafe, I have to zoom out, but I have no way how to do that.
I only have to put my mouse at the center of the screen, and then scroll down to zoom out.
Already tried using ClientFunction with scrollBy and etc but nothing happens in map.
Thank you
Find out on which element the handler you need hangs and what event it listens to. This is most likely a 'mousewheel' event. This should help you:
const zoom = ClientFunction(zoomSize => {
const event = new WheelEvent('wheel', { deltaY: zoomSize });
document.querySelector('#zommed-element').dispatchEvent(event);
});
I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?
Chart.js has a property (responsive) that you can configure at the global or chart level via options that will make the chart responsive. See http://www.chartjs.org/docs/#getting-started-global-chart-configuration > responsive
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
true makes it responsive. false (default) makes it non-responsive.
Example usage (only the relevant part, check out the CodePen for the full exam)
var ctx = $("#bar").get(0).getContext("2d");
var myChart = new Chart(ctx).Bar(barData, {
responsive: true
});
CodePen - http://codepen.io/anon/pen/bdrGVx
You might also want to check out the maintainAspectRatio option, if you want to maintain the ratio of width to height.
I am building a slide menu.
The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.
I am using -webkit-transform (and variants on other browsers) as the transition property.
Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.
If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.
This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.
Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.
I had the same issue with the difference that I use an animation instead of a transition and overflow: auto instead of overflow: scroll.
This fixed the issue for me (el is the DOM element to which the animation is applied):
function fixSafariScrolling(event) {
event.target.style.overflowY = 'hidden';
setTimeout(function () { event.target.style.overflowY = 'auto'; });
}
el.addEventListener('webkitAnimationEnd', fixSafariScrolling);
I'm using the ekko lightbox along with bootstrap modal to create a gallery. However I cant seem to get the image navigation controls to appear/work like they do on this example: http://ashleydw.github.io/lightbox/#image-gallery
As you can see when you hover over an image you get navigation control arrows. I've tried adding the data attribute data-gallery="multiimages" to my images but this hasnt helped.
You can see my development code here: http://agtdesigns.co.uk/bootstrap-gallery/
Any help appreciated,
tia
I had the same problem,
see https://github.com/ashleydw/lightbox/issues/33 for the answer.
In summary, you need to add a wrapping div, eg
<div class="gallery">
Then as JS code
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
always_show_close: true,
gallery_parent_selector: '.gallery',
});
});
I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.