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)
Related
For example when implementing these collapsible items:
First approach that comes to my mind is to store a variable in the model expandedItems: List ItemId
to verify if an item is expanded you check if its id is in the list
to expand an item you add its id to the list
to collapse an item you remove its id from the list
There also are css-only solutions like this one https://jsfiddle.net/5hcwzf7s/2/
What would the advantages / disadvantages of css-only over the id list be?
I think storing the list in the model is common, easy to understand, and the usual way to do things like these.
I find a few downsides to the css solution:
is hard to read and understand
is fragile and hard to maintain
might not work on all browsers
uses href which makes the item id show up in the url when you click to expand
treats expanding as a url change, and when the user clicks back it unexpands the item instead of navigating to the previous page
only allows one item to be expanded at a time
On the other hand, I find no downsides to the expandedItems list approach. Performance might be a concern because we're operating on a list, but the user will have to be expanding thousands of items to make the list long enough to notice any difference. I don't think is polluting the model either, this kind of information is what the model should hold.
I think you want to put this all in your model. The css approach is perhaps a nice trick, but is not very scalable.
In particular you would end up putting state in the css file, and part of it even twice. Keep it all in your model, put the full content into the screen, and then just attach a class when contracted, which sets a max height and truncates the rest with elipsis
As title says I am attempting to identify a new element that is added to a page after an add new button is clicked that shares an xpath the same as many other elements.
To give some background there is a list of items on the page. You can interact with the list in the following ways. Add New, Edit and Delete.
You can add a new row to the list. When you click add new you type in text to name the item in the list and then have the option to save or cancel.
The cancel element (new row) is the same as the delete element (existing row) in terms of xpath (except where it is on the list).
I can't use the specific list element because this is an automation script that would run everyday and the position on the list could change.
Any thought on what I could do to do identify the xpath of the new cancel button when add new is clicked.
The button itself does not contain words but is an image of a trashcan, so I can't use something like text to find a cancel button.
I saw some ways to add text to find by but the issue I'd run into is that a user could generate this new row at anytime.
Any thoughts would be helpful! :)
Thanks!
To identify the new cancel button, you can try and tweak (it's a wild guess) one the following XPath expressions :
If the trash is an image, we look for an element which child contains a #src attribute (the name of the image : trash.gif for example).
//*[./*[contains(#src,"trash.gif")]]
If the trash is an icon, we can search the same way as before (you need to identify the name of the icon) :
//*[./i[contains(#class,"trash")]]
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 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.
I have a Infragistics UltraGrid using a bindingSource.
If I add a new object to my binding list, it adds a row to the bottom of the grid which is fine if there's no user defined sort.
Question is if the user clicks on a column header to sort the grid, is there a way for new rows to appear in the proper sorted order instead of always on the bottom?
Re-sorting all rows on every insert is too expensive.
Seems kind of ghetto. Infragistics support also indicated that the RefreshSortPosition() method is the only choice.
// Add to binding list which will trigger a row to be added to the bound ultragrid.
this.bindingList.Add(new Person("Smith", "John"));
// Get length since we know this will always be added to the end
int length = this.ultraGrid.Rows.All.Length;
// Get it to sort
this.ultraGrid.Rows[length - 1].RefreshSortPosition();
To be a bit more efficient, you can always be clever by disable redrawing, etc and then call refresh on a bunch of rows after a batch of orders, etc...
Hope that helps. I had very little luck Googling this problem.