Element slider in Ruby on Rails - ruby-on-rails

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

Related

Rails Masonry elements overlapping after an AJAX call

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

Infinite scrolling with will_paginate. Issue removing element

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.

Rails lazy loading

I have an app which has an index page that shows currently 10 search results. Rather than doing the standard lazy load with javascript, similar to the Railscast where new objects are shown when the user gets to the bottom of the page, I would like to have to page have a button on the bottom. When that button is clicked, I would like the next 10 objects from the search results to show and so on. Is there a tutorial for this/how would I do this?
you should use gem like
https://github.com/amatsuda/kaminari or https://github.com/mislav/will_paginate.

jQuery refresh of buttons that are multiple levels below accordion-set parent

I have multiple accordion-set's nested in side of each other, they make a types of multi-category sorted list. Anywhere from 3 to 5 steps into the accordion nests I can start having actual items (buttons), they are in reality stylized 'A' elements.
I'm able to get the nested accordion-sets to refresh on successful AJAX return, but can not seem to figure out how to get the buttons to refresh and take on the jQ mobile styling.
$('#main-market-list').find('div[data-role="collapsible-set"]').collapsibleset({refresh:true}); is what Im using for the accordion-sets, whats the button version of the same logic?
You could try $(".ui-page-active").trigger("create") to force JQM to restyle the entire page.So your buttons too will get styled along with accordion sets.
edit: you could try $('.button-class').button('refresh'); where button-class is the class name for the links which you would like to style.

jQuery slideToggle() applies display:block while sliding

I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});

Resources