How to handle left and right swipes in react js.
There is a div block in which I want to catch swipes.
I also wanted to determine how long the swipe was in pixels.
Thanks!
You can do this using hammerjs.
Here is an implementation :
var hammertime = Hammer(el);
hammertime.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
Related
I am new in react native , I want to scroll the image continuously bottom to top in react native.
We can scroll image in html using marquee tag.
E.g.,
<marquee behavior="scroll" direction="up">
<img src="../t1.png"/>
</marquee>
Similar thing I want to achieve in react native.
currently I am using the below code
<Animatable.Image
animation={{
from: { translateY: 0 },
to: { translateY: -70 },
}}
duration={10000}
delay={1}
easing={t => Math.pow(t, 1.7)}
iterationCount={100}
useNativeDriver
source={require('./../assets/images/gradient_bg.png')}
style={LoginStyles.scrollerImage}>
</Animatable.Image>
this code works but it resets the the posion of image to 0 and starts again can someone help me fix this
Thanks.
Set the iteration count to infinite
iterationCount="infinite"
If you read their documentation , there's an option to make the iteration in an infinite loop.
I think you should try this package
react-native-marquee-scroll
It works for me.
I know there is a lot of topic about this but i can't find answer. My custom icon won't display. Here is my link http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=icon:http%3A%2F%2Fwww.ide-imprimerie.com%2Fdata%2FnewTemplate%2Fpin.png|45.7472473,-0.6246753000000353
But the map is working well as you can see here : http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=45.7472473,-0.6246753000000353
also the icon here : http://www.ide-imprimerie.com/data/newTemplate/pin.png
I encoded the URL, tried 32x32/64x64 icon, different icon and I still don't understand why this custom icon won't show up, thank you for reading and helping !
EDIT: Didn't find the issue but shortened url works so thread closed.
I believe this will works for you..
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://www.ide-imprimerie.com/data/newTemplate/pin.png'
map: map
});
I am using Ionic2 slider which is using the Swiper under the hood. I have built a carousel that shows 3 at a time but I would like the fourth slide to show partly so the user knows there is more slides (can't use pagination dots). I can't see any configuration (either on Ionic API or Swiper API) to achieve. Is anyone aware of a configuration or a "non-hacky" way of achieving this. I have attached screenshot of what the design is suppose to look.
Try something like this in the template ...
<ion-slides [options]="sliderOptions"> ... <
And in your .ts class ...
export class ClassWithSlider {
// slider options
sliderOptions = {
slidesPerView:4,
centeredSlides:true
};
}
The reference for the options can be found here, in section Swiper Parameters.
I am new to google maps. right now I'm using ng-map with angularjs. I am finding it difficult to put animations on the makers (like bounce) when I click on a div. Can anybody tell me how can I do that?
I've written an example of how to animate a marker by clicking on a Div element (See the div under the map which has the text "Div element - Click me to toggle marker animation!"). It can be found here:
http://plnkr.co/edit/KATXex?p=preview
The code to animate the marker is as follows:
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
Note that to get this to work properly I had to set the marker's animation property to null in the "on" event e.g.
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
var mapMarker = map.markers[0];
mapMarker.setAnimation(null);
marker = mapMarker;
});
By default it is undefined, which means that without this step you'd normally have to click on the marker twice, once to set the animation to null, second to set the animation e.g. to BOUNCE. The issue with "undefined" may be an issue with the ng-maps library.
I have a div that I want to make draggable or not, depending on the state of some other stuff on my page. I seem to be able to easily make it draggable, but I can't seem to figure out how to best remove the draggability from the div.
I am making it draggable with:
var dd = Ext.create('Ext.dd.DDProxy', mydiv, 'myDDGroup', { isTarget: false });
And I've tried to then remove the draggability by removing the only group it's a member of
dd.removeFromGroup('myDDGroup');
and just destroying the dd object with
delete dd;
Neither of these seem to actually keep me from starting a drag on the element. I suspect I should be able to use the b4Drag override in some way to simply cancel a drag of my div before it even begins, rather than toggling the draggable state of the div at all, but I can't seem to find docs on how I might cancel the drag during the b4Drag call.
So, how can I make a div undraggable after I have already made it draggable?
Seems to be working for me.
Here is the JSFiddle http://jsfiddle.net/01gx33h0/
var dd = Ext.create('Ext.dd.DDProxy', 'test123', 'myDDGroup', { isTarget: false });
Ext.fly('btn123').on('click', function() {
dd.removeFromGroup('myDDGroup');
});
Can you give me the sample code where it is not working. And what version of ExtJs are using?
You have to unreg. Not removeFromGroup.
It just removes from group. But events are not removed on that element.
dd.unreg();
https://fiddle.sencha.com/#fiddle/1eun
When looking at something specific that needs to be dragged, you might consider that allowing dragging is something users expect, for general ease of use you might try the ondragstart="return, this could be appended to your images, or links like so:
<a ondragstart="return false" href="#link">link</a>.