I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.
This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.
The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.
Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!
My demo here:
https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx
p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.
Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx
It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.
here is a much simpler solution with the new react-virtual version
the idea is to call measureElement on img onLoad
Related
I am working on a project that requires a slider control that corresponds to an image and or a multitude of div objects. The spacing of the slider is irregular (the steps could be [1,4,7,13,14,16...]). Also the steps will correspond to specific spots on an image and or to a specific div object. The perfect slider would be dynamic and re-size with the screen but that may be actually impossible.
The hard part is that I am unable to use JQueryUI, instead I am limited to using controls that work with AngularJS.
I have been looking for hours and cannot find anything that would be a good starting point. So my question is whether anyone has found a good slider control to use with AngularJS?
This one fits some of your criteria
angularjs-slider
A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
The app I'm writing involves buttons that have a slight noise filter texture, which can be any size. For a standard button I'd simply use resizableImageWithCapInsets: but due to the texture, this causes unusual artefacts to appear on the resulting button.
A solution I have in mind, is to use the Core Image monochrome filter combined with the random noise filter to add the noise texture to a plain image. In theory this works, and in practice this has been shown to work (One example here) but these are all in cases where the button size is known at the point of invoking the CI code.
What I'm looking to do, is use the appearance proxies, so across the app I can simply set the style of UIBarButtonItems for instance.
Is there a way I can apply these CI filters to the buttons through the appearance proxies or isn't this possible? Would something like a category on UIImage to add noise work? I'm not entirely sure at which point the appearance proxy would actually invoke that code.
Any help is appreciated
OK So I finally solved it but found out some stuff on the way.
It seems you can create a category on UIImage and use that in the appearance proxy. I created a category to add noise, and it seemed to partly work, but I couldn't get it looking how I wanted as it wasn't quite rendering properly, but in the process of coding this discovered another method
resizableImageWithCapInsets:resizingMode:
Because the texture I was dealing with was simply noise, it could be tiled, so rather than the image now being stretched, the centre of the image is instead tiled which gives me the appearance I needed :)
There is an example of two-way binding to Center property from Micrsoft guys.
You can find it here.
Its sample works fine, but they disabled full animation. When I set AnimationLevel="Full" and use the Compass I get trembling picture.
I really like aminations effects and don't want to turn it off.
Are there any ways to get working Compass and keep full animation?
This is a known problem and as far as i know, it hasn't been fixed. I too would very much like it to be fixed.
When full animation is on and the map is moved, it will move the map in an arch (zooms out and then back in). However, small distance movements still use the arch and this creates the shaking.
I have searched extensively (4 months ago) for a good work around for this problem.
I didn't find anything other than turning off the full animation.
I'm currently trying to build my personal website with Silverlight 3 and I've got this idea that you should be able to flip through the content in a certain way. I haven't seen exactly what I wanted before, so I uploaded a screenshot of the design for you guys to get a better idea of what I'm talking about:
Picture of desired effect http://www.bo-mortensen.dk/bmdkflip.jpg
As you can see it's more or less a carousel on the X axis. I've seen a fair number of carousel tutorials, but it seems to be quite "complicated" for what I'm looking for.
My main problem is that I fail to understand how to make this thing dynamic. I can sure do the flipping animations, but when it comes to the best approach of making the bottom page (the mirrored one) the previous etc, I'm a bit lost :)
I'm looking for any good advice on how to make this dynamic in such a way that the only thing that needs to be changed is the content itself (text, pictures etc) Also, I believe that each page/usercontrol should be using the same two (flip up and flip down) animations, if that's possible at all?
Hope I made myself clear on this - it's late after all ;) If not, just let me know and I'll see if I can elaborate!
Looks like you are looking for a Flippable 3D control. So check out my blog for one and you can tweak it to make vertical rotation.
http://jobijoy.blogspot.com/2009/04/3d-flipper-control-using-silverlight-30.html