I have an ng-repeat that loads posts from a firebase database. I load the items in reverse so as new posts are made, they appear at the top of the list (similar to Facebook). I have been able to maintain scroll position for the user if a new item is added to the top, however, when a post is deleted, I cannot seem to keep the post the user was looking at in view. The div will shift the content to fill the voided space. Is there an elegant solution to this problem? I am able to accomplish this if each post was the same height, however, different posts are different heights.
I maintain scroll when adding a post through most likely a sloppy method. In the ng-repeat, I add a class "first". Using arrivejs, when a new ".first" element is loaded, I calculate the posts height and the scrollTop of the container and just do some math.
Any suggestions are greatly appreciated.
Related
Title is maybe confusing but I will try to explain what is that I need.
I have application that shows tables of some place (e.g restaurant). This tables are shown to end user.
But I want owner to be able to rearrange these tables position from admin panel. He will be presented container ( just a rectangle to keep it simple ) and I want them to be able to take table (it can be icon or whatever) and place it wherever they want (literally in any direction or position in this container). They can add as many tables as they want and place them where they want. This part is for frontend and I am not too scared of this. But problem for me is how can I save this information using Laravel? because I want owner to save this position of tables and then when end user comes to page of that place I want them to see the positioning of these tables that owner provided.
How can I achieve this? Is it possible?
I don't need Laravel specific answer, just to point me in right direction so I can understand the logic of how this can be saved on backend.
I am using Vue.js on frontend and Laravel for backend.
I made this sketch so you can see what I mean : https://prnt.sc/1tcv3lf
Off the top of my head:
Frontend
In Vue, you can implement a reusable component for the tables. These components will have a top and a left props which define their absolute position from the container's top and left (CSS rules). You can easily make them draggable using jQuery by calculating mouse pointer's position relative to the container's top-left corner. Pass them as props into top and left for the table components. Store them in an array [{ top: _, left: _ }]. Append to this array whenever a new table is added.
When save button is clicked send this array to the backend.
Backend
Not sure what exactly is bothering you about this, you can simply store it in a database with top and left columns, each row representing one table in your frontend.
Then you can query this database to fetch all rows whenever users visit the page, pass it as an array to the frontend. The frontend will use this array to construct all the tables in the right positions.
Currently I have trouble in with interacting with the elements within the page using lazy loading. I need to select the list of items (which mostly from top till the bottom of page, up to like 100 items). With the lazy loading implemented, i could only select a portion of it, like 1/3 of that since they split all the items into 3 different portions then it will only load the the first portion. I found out using a tricky Javascript could help to scroll it to the bottom like page.execute_script("window.scrollTo(0,100000)"), then i could probably get all the items.
but should be saving that as the last option.
So, my question is Does Capybara support to interact with Lazy Loading stuff like that . Also what should I do to get the whole items, without using that Javascript ?
If you're just scraping data from a site then the easiest solution is going to be just using execute_script to scroll the page. If however you're testing an app behaves correctly then you want to stay away from execute_script since it can allow you to do things a user never could which may invalidate your tests. Instead use hover to move the mouse pointer over an element on the page that would trigger loading the next portion. For instance if you have a list of items showing up
<ul id="my_list_of_items">
<li class="item"></li>
<li class="item"></li>
...
<li class="item"></li>
</ul>
and the next group of items are loaded into the page when the bottom of the list is scrolled into view then do something like
find('.item:last-child').hover
This will cause the last item element on the page to be scrolled into view and the move pointer moved over it, which would then trigger loading of more items.
I'm using Primefaces' selectManyMenu to display a list of hundreds of items. I've also included a filter on top. The issue is that when I select, say, the 200th item in the list, I have to manually scroll down to the 200th item each time to see if it has been checked.
I want it so that whenever I select an item, it moves to the top of the menu, so that it is easy to view all the selected items from that list at the top without having to scroll down and up all the time.
Any suggestions?
Looks like your component is getting updated when selecting or unselecting an item, and that's the reason you're reloading the list and losing your scroll position.
Else, it looks like you could use a workround for this. Something like
Catch the select/unselect/change event and trigger a backing Bean function where
You rearrange you list of items sot that the selected ones will be pushed first
oncomplete, you will update your selectManyMenu component.
By the way, maybe it's time to think again if you're using the right component and UX practice. and I have the impression that selectManyMenu is not meant to be used with lists of 200+ items. Personally I think you should avoid using a list that will have to scroll down, for selectMany components. For example you could use another component like a pickList
I have a UI that looks similar to the mail app. A table view along the left with a single column of items. When one of the those items on the left is selected, details about that item are shown on the right.
When some event occurs in my app that requires the data in the left table view to be reloaded, the current selection is lost and then the right detail view and left master view get out of sync.
The way i hoped to solve this problem was, when it was time to reload the table data, I would:
1. Save the current selected item
2. reload the table data
3. Handle a delegate method or notification that let me know when the reloading was done.
4. Re-select the proper item by finding it in the new list of items in the table.
Unfortunately I cannot find any way to determine when the table is done reloading. Is there a. any way to figure this out, or b. a more elegant solution to this problem?
thanks.
update: In case my problem was unclear, imagine you are in the mail app and you have some message selected. That summary cell is shown as selected on the left, and the details of the message are shown on the right. Suppose new mail comes in which appear as new cells at the top of the table. How is the message you are currently viewing preserved, and not de-selected?
reloadData is something of a sledgehammer. 10.7 offers a better solution.
Instead of using reloadData, when you have new rows to add, use insertRowsAtIndexes:withAnimation: . When you have rows to delete, use removeRowsAtIndexes:withAnimation: . And, of course, if an existing row has changed, there's reloadDataForRowIndexes:columnIndexes.
These should remember the selection for you (at least, the equivalents on iOS do).
If you can't target 10.7, some of the other suggestions will probably help out. noteNumberOfRowsChanged may also be helpful but I've not actually used it.
You can save selection on tableView(_:shouldSelectRow:) then select the row right after you create the cell in tableView(_:viewFor:row:) using selectRowIndexes(_:byExtendingSelection:).
It is pretty reliable no matter how / when / how many times you reload the table.
Semi-newbie to jQuery; just can't quite get this...
I have a list of items on a page, and I want to insert a new item at the top of the list by (a) sliding the existing items down and (b) fading the new item into its position at the top of the list. I can get the new item inserted into the list, but so far all the effects I've gotten to work are things like $('#theList').prepend(theNewItem).hide().fadeIn(1000);, which fades in the entire set of items, including the new one, and doesn't do anything about the sliding.
Of course (?), part of my problem is that I need to be applying the .fadeIn (and, presumably, the .slideUp) methods to the new item, not the whole list, but I can't seem to get my hands on it. I can get the ID of the new item, but it's not showing up in the DOM after the prepend (at least, console.log('#theNewItemsID') is returning an empty list).
Any advice out there? Thanks much!
How about
$('#theList').prepend(theNewItem).children(':first').hide().fadeIn(1000);
Demo: http://jsfiddle.net/gaby/CrjQF/
Alternative
If the variable theNewItem holds a jQuery object then you can also use the .prependTo()docs method to skip the filtering
theNewItem.prependTo('#theList').hide().fadeIn(1000);
demo: http://jsfiddle.net/gaby/CrjQF/1/
Explanation
It happend because your initial selector is the #theList so the chained commands refer to that. Using the .children()docs method combined with :firstdocs selector we reduce the selected items to the first child of #theList (the newly added)