Our application uses infinite scrolling to navigate large lists of items. As of now it is one way scrolling only that is when a user scrolls to bottom of the list, we make an api call to fetch 10 records and append the same in rendered list.
We want to make it bidirectional scroll with few changes in it:
Assumptions: 1 page is equivalent to 10 records in list
Suppose we make api calls to fetch pages and each page is having the 10 records and we want to maintain a list of 3 pages or 30 records only, if we fetch more pages then we remove the 1 page from the rendered list items
Let me explain it through few use cases:
Initially webpage loads with 1 page or 10 records.
Then user scrolls down to bottom and 1 more page is loaded.
Suppose list is having records of 3 pages (p1, p2 and p3) that is 30
Since list is reached a threshold limit of 30 records, Now if user scrolls to bottom, we fetch the fourth page and also remove the first page so that list will still be having
30 records but changed pages that are p2, p3, p4
If user scrolls to top again we remove the last page that is p4 and loads p1 page and prepend it to list
Just to be more clear, Below is execution of use cases
Initially list is having 10 records or first page p1
and threshold is of 3 pages or 30 records
User scroll down and reaches the threshold of 3 pages
p1 -> p2 -> p3
Scroll to bottom again
p2 -> p3 -> p4
scroll to bottom again
p3 -> p4 -> p5
scroll back to top
p2 -> p3 -> p4
scroll back to top
p1 -> p2 -> p3
Since once the list reaches its threshold limit of records we will be having the fixed length scrollable content so how do i manage the scroll top so that user still has some scroll area left to fetch more content.
Please advise any approach or any existing library which supports such use cases
Related
from selenium import webdriver
driver = webdriver.Chrome(executable_path="chromedriver.exe")
driver.get("https://www.ungm.org/Public/Notice")
driver.maximize_window() #maximize the window size
driver.execute_script("window.scrollBy(0,document.body.scrollHeight)")
https://www.ungm.org/Public/Notice this page updates its table data using javascript. I want to scrape it but first I need to load all the table which loads dynamically. although the above program scrolls down but it is not scroll till the end of the page.
I want all 771 items should be displayed but it scrolls down as much as I can see only 30 items.
You can use this function to scroll indefinitely until scrolling is no longer possible (no more loaded content):
def scroll(driver, timeout):
scroll_pause_time = timeout
# Get scroll height
last_height = driver.execute_script("return document.body.scrollHeight")
while True:
# Scroll down to bottom
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
# Wait to load page
time.sleep(scroll_pause_time)
# Calculate new scroll height and compare with last scroll height
new_height = driver.execute_script("return document.body.scrollHeight")
if new_height == last_height:
# If heights are the same it will exit the function
break
last_height = new_height
Using scroll(driver, 2) would scroll, wait for 2 seconds then check If the scroll height has changed (new content), If not then it probably reached the end which will result in a break out of the loop.
Note: Adjust the timeout argument (in seconds) depending on how long on average it takes to load the content.
Grid doesn't fit because I need WindowScroller and they doesn't work together.
I already have 3 nodes in row for dir
but I need to have 6 nodes in row for file
dir and file can't be in the same row, instead must be whitespace (check out screen shots)
I've tried to switch 3 or 6 nodesInRow with isDir flag and track actual nodes indexed as increment after each of actual put-node-in-row but it didn't work because of reRenders that start's not from rowInd = 0
actual:
https://imgbbb.com/images/2019/04/10/Screen-Shot-2019-04-10-at-5.57.30-PMa278117232cc829d.png
expected:
https://imgbbb.com/images/2019/04/11/Screen-Shot-2019-04-11-at-1.19.57-PM.png
P.S. Sorry for direct img links ... it's because of 'You need at least 10 reputation to post images.'
This is the way how I wanted it to work
https://codesandbox.io/s/lpvn23vz7
I'm doing a React/Redux project, and need to implement a virtualized/infinite-loading list. react-virtualized seems intended to do the job, but even after reading all of the available docs and reading a number of StackOverflow posts, I haven't been able to get it working or found a clear explanation of the mechanics of how the components actually work.
The primary examples I've looked at are:
https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples
The primary issues I'm running into are:
It's very unclear how the loader is triggered to make a call to loadMoreRows() in the initial load/render case. Typical scenario is that we'd design the component to initialize itself with data by calling loadMoreRows() when it's initially rendered. The config values necessary to make this happen aren't obvious.
It's not clear whether the rowCount property is intended to represent the current state of loaded rows (the number of rows in a block/page of data), or the total count of the full set of row data. And, in either case, these can't be known in advance of making the initial AJAX load call, so what's the intention for setting the initial value of rowCount?
I've tried putting the code from various examples into my project, but I never see the loadMoreRows call being made. I think what's need is a fleshed-out example that demonstrates a very typical use case of a) initially rendering an empty List, which then triggers an initial data load call; b) updating the rowCount property, and when/where to do this; c) managing the currently-loaded data set representing the current block/page of data.
Any pointers would be much appreciated.
loadMoreRows is passed as a prop to InfiniteLoader (you can see that in the examples). It isn't meant to be called manually, it is used internally by InfiniteLoader and List, and is called automatically when scrolling down.
rowCount can have both of those behaviours. Your API could tell how many items there are without fetching them all, or it could not. rowCount simply tells List how many rows there are.
So for example, let's say we have 100 stores, and our first fetch gives us the first 10. That same response should say if there are more stores to be fetched still or not. Another fetch could tell us there are 100 stores total.
With this, we could use the total of 100 as rowCount (by querying the total number of stores, without fetching them all) OR we could use 10 + 1 as rowCount, as the first fetch told us there were still more stores to be loaded yet.
What would this mean?
If we have the first 10 stores loaded, and use rowCount = 100, InfiniteLoader would display 100 rows, but only the first 10 would have any content at all, with the rest of them showing the "loading" row placeholder component. And as that 'not yet loaded' rows appear as you scroll down, InfiniteLoader would call the loadMoreRows function to, well, load more rows.
In the other hand, if we had used rowCount = 10 + 1, InfiniteLoader would display only 11 rows, with only the last one being the "loading" row placeholder component. And when loadMoreRows is called, rowCount would be items.length + 1 === 20 + 1.
Summing up
loadMoreRows isn't meant to be called manually. It is called automatically by InfiniteLoader when a row that isn't loaded is being shown in the viewport. So initially rowCount could be just 1, no row would be loaded, and loadMoreRows would be called.
rowCount could either be currentItems.length + (moreToBeLoaded ? 1 : 0) or totalItems. The difference being what is shown to the user, either "Oops, end of what is loaded, wait some for more" or "Look, these are all the items there is, but haven't been loaded yet, wait some for them to load"
I want to display count of no of items fetched per page using pagination like
Displaying 10 items
Although limit is set to pagination to 20 but It will not always fetch 20 items when there are only 15 items or 10 items or 25 items.
In these cases it will either have one page result for items count 15 and 10 or two pages result for items count 25.
I want to print the no of items showing on each page. Like for total items 25.
It will show Displaying 20 items on first page and Displaying 5 items on second page.
How is it possible in CakePHP 3.2 ?
This is how I get it working in CakePHP 3.2
There are two ways you can do it.
Using Helpers
create a file paginator-counter.php in /config directory with your tokens and string and add a line in /src/view/AppView.php
public function initialize()
{
$this->loadHelper('Paginator', ['templates' => 'paginator-counter']);
}
This will load the file located at config/paginator-templates.php
And then use it in your view.
For more : http://book.cakephp.org/3.0/en/views/helpers/paginator.html
Using direct string
Just print in view where you want to print the counter
<?= $this->Paginator->counter('Showing {{current}} results out of {{count}}') ?>
More tokens can be found Here : http://book.cakephp.org/3.0/en/views/helpers/paginator.html#creating-a-page-counter
I'm using 2nd way to print counter ie., using sting directly
Can someone shed some light on how Install4j's back button actually works? I should note at this point that I'm using install4j Multi-Platform Edition 5.1.2 (build 5492).
Loop Example
This example is based on a screen group containing 2 screens ('Screen 1' and 'Screen 2').
Start screen
Screen 1 (in the looped group)
Screen 2 (in the looped group)
End screen
Screen group properties:
Loop index start: 0
Loop index step: 1
Loop expression: (Integer)context.getVariable("i") < 2
Loop index variable name: i
As expected, clicking next repeatedly results in the following screen flow:
Start screen
Screen 1 (i=0)
Screen 2 (i=0)
Screen 1 (i=1)
Screen 2 (i=1)
Screen 1 (i=2)
Screen 2 (i=2)
End screen
I would expect the back button to step backwards through the history listed above. However, the actual behaviour is as follows:
End screen
Screen 2 (i=3)
Screen 1 (i=3)
Screen 1 (i=3)
Screen 1 (i=3)
Start screen
Clearly this is not what any rational user would expect. To complicate matters further, the change Log Install4j for 5.1 Build 5435 includes the following:
Fixed wrong behavior when going back in the screen history where
screen loops were present
The other issue raised in this example, is how do you decrement the loop counter when stepping backwards? It would appear there's no practical way of doing this when using a looped screen group.
If this is case, the only way of implementing a loop which can be stepped through backwards is to implement your own screens in order to override previous(). The side effect being that you have to hand code your screens just to get the correct back button behaviour for loops, which seems ridiculous.
Has anyone else found a decent workaround for this problem? The install4j manual is pretty lame in that the word 'history' only appears once. There's no specification for how the back button works whatsoever.
This is a bug, it will be fixed in 5.1.4. Please contact support#ej-technologies.com to get the current build where it is fixed.
The other issue raised in this example, is how do you decrement the
loop counter when stepping backwards? It would appear there's no
practical way of doing this when using a looped screen group.
This will work automatically in 5.1.4.