I have a long list of company names need to be displayed in the picker dropdown and it's causing the app to freeze. I am aware of the infinite scroll if it's viewing the content, where you fetch a limited size of the data from the server side and load more as the scroll reach to the bottom. But does it apply the same concept for a dropdown picker?
I am using the library #react-native-picker/picker and considering the behavior of the component I have no idea how to handle it.
I haven't done anything on my codes yet. Currently it's fetching all the listing from the server side and dump all the data in the picker.
usually it's best practice for large select list to create a modal screen which open up by clicking on the selectbox and there you provide a search box on top and show list using FlatList as it's good for large set of data and will not freeze your screen while rendering.
Check out this
This issue 2850 mentioned something may help you and to be clear there was a solution mentioned by M1K3Yio
please check the code using react-window in this link !!
Related
I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:
Install a screen reader such as NVDA.
Turn on NVDA screen reader.
Go to https://vue-search-select.netlify.app/#/model
Tab to a search text field.
Confirm drop down of results appear.
Press the down arrow key to focus on any of the search result items.
Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.
Here is a 10 second clip to that demonstrates steps 3 of 7.
https://www.youtube.com/watch?v=Nxx1k1oKETI
How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?
Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.
I tried adding a customAttr like so:
<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
return function() { return '" aria-label="hello" tabindex="0'; }
}
Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.
It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute
Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....
I have been creating application in React Native. The goal of the application is to have content that can be changed without updating the app. I understand that the two best solutions are either Firebase or some other API call at every application start to get new content. Now I would just like to know if there are any recommended way to style content beside my three current solutions:
Styling content with markdown and then parsing it in application
Styling content with html and then parsing it in application
Or having a standard content object so that all the content is packed the same way and then showing right text/media on correct place with correct style
I am open to any other styling solutions for content and would like to know what is the best way. I also already have a server responding to API call that returns new content, the biggest problem is styling.
I am working on web application which is implemented with angular and react js. In this, I have a scenario to scroll and check whether element is displaying or not.
I have tried all ways like using x,y values, scrollIntoView and all possible ways what I have noticed on different blogs and technical related web pages. But, i an not succeeded in it.
Here, I need some suggestions like what are other approaches we have to scroll webpage other than javascriptexecutor as this is already applied and failed in my case.
As a side note, elements will be loaded dynamically when we scroll the webpage and will not be available in the DOM itself. To get these elements, we have to scroll manually and check it.
Thanks in Advance..
I found a root cause why javascriptexecutor is not working on my application. This script will work only on browser (I.e. if browser have scroll bar), but in my application browser does not have a scroll bar instead it has virtual table scroll bar (scroll bar inside application).
Even I found a solution for the same after 2 days of investigation using Keys.PAGE_DOWN/UP inside do while loop.
Thanks for your support.
NOTE: New to this forum (UX/User Experience), so please let me know if this would be better in a different category. I searched Stack Exchange for "pinterest" and this forum seemed to have the most results. Thanks!
Hi guys. I'm writing a jQuery gist to grab links of all the images pinned to a given board in Pinterest. However, I've been running into the problem of having to repeatedly keep scrolling because all the results are not displayed on the same page. With the trendy "infinite scroll" or "lazy load" feature, one has to keep scrolling to the bottom without actually knowing if they are anywhere close because it seems to depend on your zoom percentage in your browser window and your window size as well, as to how many items display on your screen. I've been searching this for hours to no avail.
Searches I've already done keep returning non-productive results
The results I get when searching for
"Pinterest how to disable lazy loading" and "Pinterest how to disable infinite scroll"
keep returning the opposite of what I am looking for -- incorrect results for my purposes are anything like:
"How to add infinite scroll to my website",
"20 Useful Pinterest Tools",
or anything to do with adding infinite scroll.
The Problem: Infinite Scroll/Lazy Loading makes it hard for me to use browser plugins like jquerify (Chrome) and FireQuery (Firefox)
The issue for me is that I want to be able to view all my pins on a given board at once. Then I can use jQuery to manipulate all images on the page. Currently, infinite scroll makes it hard to keep track of where I'm at. I've tried stuff already by it's late at night and hard to remember everything. The important find was that in page source, Pinterest is using a "lazy" function. Here is what I found:
P.lazy = {
onImageLoad: function(a) {
var b = LOADED_CLASS;
P.overlap.isOverlappingViewport(a) && (b += FADE_CLASS);
a.className += b
}
};
This is just starting to be a deeper rabbit hole. I've checked for plugins to "remove", "disable", or "bypass" lazy loading, but haven't found any ... only those for adding it in.
Thanks in advance for your kind assistance and Cheers.
Pinterest loads cards via Ajax. When you scroll to the bottom of a page, browser javascript fires an Ajax call to load the next page full of cards.
This means it's not really possible to "disable" the infinite scrolling feature.
A few possible approaches:
Depending on how you're instantiating the browser, you might try setting or spoofing the window dimensions to a very large height. Pinterest may detect that height and attempt to load a window's worth of images, which may be enough to cover the feed you're trying to scrape.
If #1 is not practical for you, you can use javascript/jquery to keep scrolling the browser down until it has finished loading all the images. There are several ways to do this, since you are injecting javascript into the browser session.
(a) You can do this the "dumb" way with a loop that sets a timeout (setTimeout), then scrolls to the bottom (scrollTo()), then keeps going until the window stops scrolling and that comprises a kludgey auto-detect for the bottom of the page load.
(b) a more sophisticated approach would be to implement a listener for pinterest's ajax load function, (see the code, but it's a GET request to URL https://www.pinterest.com/resource/UserHomefeedResource/get/). An ajaxComplete() jQuery handler may help you detect the completion of a page load request so you can scrape the new images loaded.
Hope that helps
I am trying to recreate some effects similar to the div loading effects on this site i.e. there is no visible content when you load the page but upon clicking on a navigation link, it dynamically loads the divs.
http://worldofmerix.com
It is for a film studio website and I would like it to be interactive like this site. Does anyone know how I could achieve these effects with Javascript and/or jQuery?
Thanks for all the help in advance!
Have you used jQuery before or looked at the docs? This is really quite simple using jQuery's built-in animation effects such as fadeIn. The site you've linked to doesn't dynamically load the content - it's all part of the same page and simply displayed and hidden as appropriate.
Here's a rough fiddle showing how it works. Of course, you'd need to work out the styles and quirks in animations.