There are 4 images. Whenever I swap them, I want to have a smooth animated transition. How may I apply that in my current code?
Click here to view the code
Also please check out the 2nd screenshot. I don't want the left swap option to be active when there is no image. But it swaps 1 extra time and stops. What is wrong with my logic?
Here is the screenshot
Have a try with the below code:
const handleSwipeLeft = () => {
if (activeImg < totalImage - 1) {
setActiveImage(currActive => currActive + 1)
}
}
as the length greater than the index.
Related
Is there an easy way to know when the user scrolls back up to top in a FlatList?
Specifically
FlatList renders normally
User scrolls down
And then user scrolls back to the top
I am looking to get an easy way to detect event #3.
I have looked at using onScroll and using the nativeEvent y offsets but is there an easier or more elegant solution?
The easiest way I found involves the e.nativeEvent.contentOffset.y
I noticed that the e.nativeEvent.contentOffset.y becomes 0 on Android when on top
while can become negative on iOS (over scroll)
To be able to act when user just starts to scroll from the top and when the user scrolls back right to the top, the following works fine for me.
(sample using a component)
constructor(props) {
super(props)
this.yOffset = 0;
}
onScroll = (e) => {
if (this.yOffset <= 0 && e.nativeEvent.contentOffset.y > 0) {
// case when user just started scrolling down from the top
} else if (this.yOffset > 0 && e.nativeEvent.contentOffset.y <= 0){
// case when the user scrolls back to the top
}
this.yOffset = e.nativeEvent.contentOffset.y;
}
I'm trying to create a slider that will update every time a slide is altered. I've got it set to observe, observeParents, and observeChildren, and it works the first time I show or hide slides, but it's only working once. Is there a good workaround for this?
Here's a link to the page with the slider on it. Click the color swatches to see what I'm talking about. Thanks in advance!
I figured out a workaround! I added a data-element called data-slides that updates on the container when you click to make the slideshow change, like so.
thumbnails.each(function() {
var wrapper = $(this);
container = $('.swiper-container');
color = colorLabel.val();
while (wrapper.parent().children().length === 1) {
wrapper = wrapper.parent();
}
if (jQuery(this).attr('alt') === optionValue) {
wrapper.fadeIn('500').show();
container.attr('data-slides', color);
} else {
wrapper.fadeOut('500').hide();
}
});
It triggers the observe function and allows it to update as necessary.
Still working on this visualization: https://ayyrickay.github.io/circulating-magazines/
I've got some good updates going, but one thing that's irking me is that, when somebody clicks on the line chart, it maintains state. For example, if I click on an issue, it runs this code to update both application state and crossfilter state
(chart) => {
chart.selectAll('circle').on('click', (selected) => {
state.circulationClicked = true
const clearFilterButton = document.getElementById('clearIssueFilterButton')
clearFilterButton.classList.remove('hide')
clearFilterButton.addEventListener('click', lineChart.unClick)
renderIssueData(selected)
samplePeriodEnd.filter(d => {
const currentIssueDate = moment.utc(selected.x)
const periodEnding = moment.utc(d)
const periodStart = moment.utc({'year': periodEnding.get('year'), 'month': periodEnding.get('month') === 5 ? 0 : 6, 'day':1})
if (currentIssueDate >= periodStart && currentIssueDate <= periodEnding) {
Object.assign(state, {currentIssueDate, periodStart, periodEnding})
return currentIssueDate >= periodStart && currentIssueDate <= periodEnding
}
})
state.totalSalesByState = salesByState.all().reduce((a, b) => ({value: {sampled_total_sales: a.value.sampled_total_sales + b.value.sampled_total_sales}}))
us1Chart.colorDomain(generateScale(salesByState))
us1Chart.customUpdate()
})
}
There's a lot going on here, but I'm frustrated because it seems like because I've overridden the default click, I've blown out some functionality that I wanted - specifically, I want the circle associated with the data point to stay in the viz.
Using the renderDataPoints method isn't right, because I only need the circle to stick around on click. I've also tried creating a moveToFront method to bring the circle to the front, but that hasn't worked for me. My problem seems to be that I'm not able to locate the circle and modify its properties in the click method itself. I get the data, but I don't get the HTML/SVG associated with the data point to modify it accordingly.
Rambly question as always, but would love some help sorting this out (and potentially getting it documented somewhere?)
I have a simple ScrollView (scrolling horizontal) with some items that each have a TouchableOpacity around them.
The onPress-method for them is just a console.log so I can see the output.
So far it works!
But I then have made a setInterval() that on each loop makes a scrollTo({x:xValue, y:0, animated:false}) on the ScrollView that increases the X-value.
This way I get like a Newsticker look and feel and it is scrolling nicely.
But when it runs, the click on each item stop working?!
I guess it has something to do with the time set for setInterval(func, time) because when I increase it to a high value it works (but ofcourse the scrolling is not nice).
So I tried made a loop-method that uses requestAnimationFrame() like below, but still nothing happens when I click on the items:
function loop(func, throttle) {
let running;
let speed = throttle || 0;
function insideLoop() {
if (running !== false) {
requestAnimationFrame(insideLoop);
speed--;
if(speed <= 0){
running = func();
speed = throttle || 0;
}
}
}
insideLoop();
}
Any ideas what I need to do?
Basically this is used to creat a horizontal parallax effect. I use anchor links to move the page back and forth ebtween pages horizontally, which all works nicely.
Now i want to include the parallax background, which also works on the first try. below is my javascript:
<script>
$(document).ready(function () {
$("#nav a").bind("click", function (event) {
$("section").removeClass('current');
$("#nav a").removeClass('current');
event.preventDefault();
var target = $(this).attr("href");
$("#wrapper").stop().animate({
scrollLeft: $(target).position().left - $("#container").position().left,
scrollTop: $(target).position().top - $("#container").position().top,
},
1000);
var x = $("#wrapper").scrollLeft();
$("#parallax").animate({
'background-position-x': '+20%',
'background-position-y': '0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
});
</script>
what this colde does is add a class to my nav links and the section which is on screen, then animates to that section on screen, after which the parallax div should move too. This works on the first click to a new section, but after that it just stays.
I think the fault lies in the
-position-x': '+20%',
line of code, but I do not know why this wouldn't work. Has anyone got any thoughts?
I am not sure that you can use += in the way you are trying to.
If I understand what you are trying to do I think your logic is slightly wrong. When you click you want to move the background by 20% right? In order to do that make moving the background a function which you can call when you want to move it by 20px. Something like:
var moveBackground = function(){
// First get the current background position - assuming its 0 on first time around
var currentX = parseInt($("#parallax).css('background-position-x'));
var newX = currentX + 20;
$("#parallax").animate({
'background-position': newX + '%' + ' 0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
}
This is completely untested code, I wrote whilst at work so don't hate me if that doesnt work.