StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I combine jQuery UI Sortable Grid with a dynamic "shelf?"
text
Body
copied!<p>I'm currently working on a web application that features an iBooks-like shelf.</p> <p>I have a scrollable with a shelf-like bookshelf:<img src="https://timnovo.files.wordpress.com/2011/02/ipad_bookshelf_background_by_daftfunk841.png" alt="link here"> that automatically resizes to the area of the div depending on the browser size.</p> <p>I am also using <a href="http://srobbin.com/blog/3d-css-book-covers/" rel="nofollow noreferrer">3D CSS Book Covers</a> as my sortable items.</p> <p>How would I go about adding these sortable items so they are aligned on each "shelf" of the bookshelf, even when the browser and bookshelf change sizes, and when too many items are on one shelf they start populating the next shelf?</p> <p>Along with that, I would like not to be limited by the bookshelf image which limits me to only 5 shelves and have the ability to add <em>n</em> number of shelves without a repeating image.</p> <p>An issue i've run into is that resizing the bookshelf image vertically make the size of each shelf larger and thus making the books smaller and unaesthetic. </p> <p>I've checked out the example bookshelves on the <a href="http://www.turnjs.com/" rel="nofollow noreferrer">turn.js</a> website and also saw the <a href="http://codecanyon.net/item/multipurpose-bookshelf-slider-jquery-plugin/1985655" rel="nofollow noreferrer">jQuery Multipurpose Bookshelf Slider</a> (which you have to pay for) to get an idea of how to create this, but I'm a bit lost.</p> <p>Thanks for any help!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload