You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
4.3 KiB
HTML
101 lines
4.3 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle.js FAQ
|
|
description: Frequently asked questions about Shuffle.js
|
|
image: /hero.png
|
|
extraJS: [ "faq.js" ]
|
|
---
|
|
<section class="container">
|
|
<div class="row">
|
|
<h2>FAQs</h2>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container search-section">
|
|
<div class="row">
|
|
<div class="col-6@sm">
|
|
<input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield textfield--large" id="search" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
|
|
<article id="spaces" class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">Why Does Shuffle leave empty spaces?</h3>
|
|
<p class="question__answer">The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest <a target="_blank" rel="noopener" href="http://packery.metafizzy.co/">packery</a>.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="images" class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">Why are images overlapping?</h3>
|
|
<p class="question__answer">If the size of your items are dependent on images, they can overlap if shuffle is initialized before all the images have loaded. Check out <a href="{{ site.baseurl }}{% post_url 2013-05-03-images %}">this demo</a> to see how to fix it.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="isotope" class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">What’s the difference between Shuffle and Isotope?</h3>
|
|
<div class="question__answer">
|
|
<span>Isotope:</span>
|
|
<ul>
|
|
<li>more layout modes</li>
|
|
<li>more options</li>
|
|
<li>community of users</li>
|
|
<li>commercial use requires a license</li>
|
|
</ul>
|
|
|
|
<span>Shuffle:</span>
|
|
<ul>
|
|
<li>robust filtering</li>
|
|
<li>slightly smaller</li>
|
|
<li>responsive by default</li>
|
|
<li>sizer element (which <a href="https://packery.metafizzy.co/options.html#element-sizing">packery also has</a>)</li>
|
|
</ul>
|
|
|
|
<p>They are <em>very</em> similar, but I think Shuffle's filtering and sorting are easier to customize, which is the main reason I created this plugin. Isotope has a much larger community, is battle-tested, and has many stackoverflow answers.</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="padding" class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">Padding isn’t working on the shuffle element.</h3>
|
|
<p class="question__answer">The padding is ignored by Shuffle because it creates complexities with absolute positioning the shuffle-items when they have a percentage width as well as setting the height of the shuffle container because of box-sizing. To fix this, wrap the shuffle element in another element which has the padding on it.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="centering" class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">Can I center the layout?</h3>
|
|
<p class="question__answer">Yes. Use the <code>isCentered</code> option.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="col-12@sm question js-question">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">It’s not working with Boostrap 4</h3>
|
|
<p class="question__answer">Bootstrap 4 uses flexbox for grids, so your main shuffle container element must be a <code>.row</code> and the items inside the row (shuffle items) should all be columns. See the <a href="{{ site.baseurl }}{% post_url 2017-06-12-flexbox-grid %}">Flexbox demo</a>.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="col-12@sm question question--unanswered">
|
|
<div class="question__inner">
|
|
<h3 class="question__title">Didn't find an answer?</h3>
|
|
<p class="question__answer">Try looking at the javascript files for the demos or searching the issues <a href="https://github.com/Vestride/Shuffle/issues">on GitHub</a>.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
</div>
|
|
</section>
|