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?
Related
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.
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?)
Im trying to change the cursor on differnet actions. Essentially like panning a map.
Default: Standard pointer cursor
Shift Press: Grab Cursor
Shift + Left Click(hold/dragging): Grabbing Cursor
However, this works great until i start to move, which then my cursor jumps back to Grab instead of staying on grabbing. What am I doing wrong?
$(document).keydown(function(event){
//spacebar = 8
if (event.keyCode == 16) {
$('#mysvg').css('cursor', '-webkit-grab');
}
});
$(document).keyup(function(event){
//spacebar = 8
if (event.keyCode == 16) {
$('#mysvg').css('cursor', 'pointer');
}
});
$( "#mysvg" ).mousedown(function(event){
if (event.shiftKey) {
$('#mysvg').css('cursor', '-webkit-grabbing');
}
});
Keydown fires repeatedly in many browsers until you lift the key. I know Chrome and Firefox have this behavior. So your keydown handler is resetting the cursor.