view more/less button to a unordered list of items for a book shelf and auto adjustment of shelf after every 6 books in a row

Question

Hej Guys,

I am working on a book shelf container, using Bootstrap 3.0, i have something like this so far,

http://www.bootply.com/19NyAgMDED

here , i have hardcoded bookshelf with some books in it ,for every 6 books in a row, but i would like to have the shelf automatically after every 6 books in a row, reason for that is ,in my next step i am going to load these books via Rest / json data . So i would like to load books as exactly like they are now,

Also as a beginning ,after page load i would like to show only 6 books ,upon pressing pressing view more button i would like to show remaining and view less button to show only less than or equal to 6 books.

ANY KIND OF HELP MUCH APPRICIATED,

Thanks in advance,

score 0 · Answer 1 · answered Sep 27 '14 at 19:50

One suggestion is write a conditional logic on Javascript side to check the number of books and if the number of books is found to be more than 6, deal with it separately. Create separate class in CSS and append them to the Element which makes them appear like a shelf.

Thanks

score 0 · Answer 2 · answered Sep 27 '14 at 20:26

I commented in the code itself. I don't have material to test this, so please tell me if this works for you. You'll have to change the request URL and the vars, of course.

$.ajax({
    url: "https://your/json/source",
    type: "GET",
    dataType: "json",
    success: function (data) {
        var booksHTML = "";
        // The loop
        for (var i = 0; i < data.books.length; i++) {
            // Make sure the book exists in json
            if (typeof data.books[i] !== "undefined") {
                // Get vars for book data such as url, img src and title
                var url = data.books[i].url,
                    image = data.books[i].img.src,
                    title = data.books[i].title;
                // Generate relevant HTML for a single book
                booksHTML += '<div class="col-xs-4 col-md-2">';
                booksHTML += '<a href="' + url + '" title="' + title + '" target="_blank"><img src="' + image + '" alt="' + title + '" class="img-responsive book"/></a>';
                booksHTML += '</div>';

                // If, in the loop, this is the third book or something that is a multitude of 3
                // but not a multitude of 6, we add the hidden shelf
                // ELSE if, in the loop, it's the sixth book or a multitude of 6
                // we add a shelf, without the hidden class. This could be written a little shorter, but this
                // is the clearest.
                if (((i + 1) % 3 === 0) && ((i + 1) % 6 !== 0)) {
                    booksHTML += '<div class="col-xs-12 shelf hidden-md hidden-lg"></div>';
                } else if (((i + 1) % 6 === 0)) {
                    booksHTML += '<div class="col-xs-12 shelf"></div>';
                }
            }
        }
        // END the loop

        // Append generated HTML to a container
        $(".container .row").append(booksHTML);
    }
});

Better readable in this fiddle. Let me know if this works, and then I might add the "view more" button.

i would really appriciate if you can help with button also – Sr070960 Sep 28 '14 at 17:11 — Sr070960, Sep 28 '14 at 17:11

score 0 · Answer 3 · answered Oct 15 '14 at 22:32

If you start by grouping your books into rows, angular can build your layout using nested ng-repeats:

function getRows(array, columns) {
  var rows = [];

  //http://stackoverflow.com/questions/8495687/split-array-into-chunks
  var i, j, temparray, chunk = columns;
  for (i = 0, j = array.length; i < j; i += chunk) {
    temparray = array.slice(i, i + chunk);

    rows.push(temparray);
  }

  return rows;
}

Then your html can simply be:

<div class="container">
  <div ng-repeat="row in rows" ng-show="$index==1 || show.more==true">
    <div ng-repeat="book in row" class="col-xs-4 col-md-2">
      <a href="">
        <img ng-src="{{book.url}}" class="img-responsive book" />
      </a>
    </div>
    <div class="col-xs-12 shelf"></div>
  </div>
</div>
<button ng-click="show.more = true;" ng-show="show.more == false">Show More</button>
<button ng-click="show.more = false;" ng-show="show.more == true">Show Less</button>

Note the two buttons that toggle show.more, a variable that controls visibility of the book rows.

Here is a working demo: http://embed.plnkr.co/uY9Yx57frTpXoCDIm65L/preview

view more/less button to a unordered list of items for a book shelf and auto adjustment of shelf after every 6 books in a row

3 Answers3