My masonry transitions works well on first load.
However, when I make an AJAX call to retrieve new items, the old elements remains the same position, but the new items are aligned vertically from top to bottom.
It works well on the first load.
After an AJAX call, the new items are aligned vertically
my index.html.haml
.masonry-container.transitions-enabled
= render 'masonry_container', items: #items
_masonry_container.html.haml
- items.each do |item|
#i guess the code here is not important as i generate each image box succesfully
index.js.erb
$(".masonry-container").imagesLoaded(function(){
$(".masonry-container").append("<%= j render 'masonry_container',
items: #items %>").masonry('appended', "<%= j render
'masonry_container', items: #items %>", 'reloadItems');
});
Would appreciate if you could offer some helps.
Because things are changing and Masonry doesn't know about it, you probably need to have it run again after the changes.
https://masonry.desandro.com/methods.html#layout-masonry
Lays out all item elements. layout is useful when an item has changed size, and all items need to be laid out again.
But maybe you want to have Masonry be part of the process, so it has full knowledge of what's happening, instead of forcing it:
https://masonry.desandro.com/methods.html#adding-removing-items
Related
I have a svelte component that display a list of items, the item list is exported and can be updated outside the component. Usually the list is long and there is a vertical scrollbar on the container <div>.
<script>
export let items = [];
export let function stickTo(item) {
// What to write here?
}
</script>
<div id="container">
{#each items as item}
<div id="{item.anchor}">...</div>
{/each}
</div>
I would like to scroll the container to a given item, and then stick to it even if the item list is updated. The idea is that all items can appear or disappear anywhere in the list, but the selected item should always stay at the same place on the screen.
You could use a svelte action to perform that.
You'd have to keep some kind of "temp array" that would store the old values of "items".
Everytime items would get updated, you would find the new value that's been added by comparing the two arrays.
Of course, if you do have some kind of communication between your components, using context or store, the temp array is not relevant.
Since all your div have ids, I guess you could retrieve the height of the element that has just been added by doing a getElementById(newElementId).getBoundingClientRect().height
Then you'd just have to apply a scrollTo to your node (that has been passed by the svelte action). The Y value would be equal to the current scrollTop + your new element's height, the X would be 0.
Still you'd need to be careful not to update the scroll if the element has been placed after your selected item element in the items array.
Maybe I did not understand what you want to do, but I'd go for something like this. Here is an REPL :
https://svelte.dev/repl/bb45f0487f7f4a43af58fb3b861c19ec?version=3.38.2
I'm implementing infinite scroll with will_paginate and ajax. Whenever I press the 'load more' elements, it brings me the next 4 elements in the collection. At the moment, everything is ok. But when I remove some element of some page, the next page has been already established in the 'load more' button; because of this, the next time I press the 'load more' button, one element is skipped. Does anybody know how can I solve this? (Sorry about my english)
Pagination gems don't work very well in your use case.
The easiest way to solve this is: if you have a list of elements ordered by e.g. id, on your next page request send the id of the last element on the current page, and use it to offset the next page.
What is happening is that pagination isn't eager loading the next set, but instead is doing an offset count
initial index + page_length * (page number - 1)
limit page_length
When you delete an element it forward shifts the index of every element after it in the database for this query. Which leaves your front end element indexes at a different state than the backend has.
You will need to re-load every "page" starting with the one containing the deleted element and work to the latest loaded "page" to get the front end to have the same element indexes that the back end has.
I wanna use infinite scroll down pagination in rails and want to pass the information like page number so that next data can be retrieved in the action and for the scroll down i can append the data to the existing data in my view.
is there any thing scroll down pagination that we can do with the will_paginate?
Thanks in advance
--Vam.
This Jquery plugin may help https://github.com/jney/jquery.pageless
to see how to do this yourself, have a look at
http://railscasts.com/episodes/174-pagination-with-ajax
to see how to use will_paginate with ajax (jquery). Ryan shows how to modify the usual will_paginate approach. First how to modify the links of the pagination bar and then he shows how to modify the view to display newly loaded objects... In this video he replaces shown items by newly loaded items. You'd just have to tweak the index.js.erb to append them.
nevertheless ... you might also want to checkout his video
http://railscasts.com/episodes/114-endless-page
in which he shows what you asked for but without will_pagination
My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab
I'm working on a Rails3 application. I'm trying to create a slider type display where 5 elements (from a table in the database) are on the page in a row and on both sides there are arrows.
What i want is that by pressing the arrows, the next (or prev, depending on the arrow) element will be displayed by re-rendering the whole slider and replacing the content with the appropriate elements. At all times i want 5 elements to be displayed on the page and each click of an arrow will seem to make one element disappear on one side and another to appear on the other side. I also want it to be a round slider, meaning It never ends just jumps from the last element to the first.
How do i achieve this. All the work should be done within the controller. In addition I want the starting point of the elements to be randomized, meaning that on the first load of the page the slider may be in the middle of it's cycle. Any ideas?
I'd rather better ways than re-rendering the whole slider, like simply changing its content by AJAX and only changing what must be changed.
What you are looking for is a carousel. There are many plugins to do this if you are using any of the JavaScript libraries like JQuery or PrototypeJS. This is an example of one such thing. And here is a list of Top 10 Javascript slideshows, carousels and sliders.
These two videos might help
http://railscasts.com/episodes/254-pagination-with-kaminari
http://railscasts.com/episodes/51-will-paginate
If you used will_paginate for example you could set your controller as follows
def self.search(search, page)
paginate :per_page => 5, :page => page,
:conditions => ['name like ?', "%#{search}%"],
:order => 'name'
end
Then just use CSS to skin the navigation as you need it information on that here
Pagination 101
Pagination Gallery