Databases
StackOverflow2013
Postsdbo
POjquery / isotope | basic implementation issues
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery / isotope | basic implementation issues
    primarykey
    data
    text
    <p>I'm already using scrollTo, but that can be scrapped or replaced by something else if this trumps it (it's just to jump from top nav to a footer section). </p> <p>the goal is to have the list of items filter using the isotope filtering, and preferably highlight the selected filter link above (though I'm fairly certain that I'll get that working once I get the isotope bit functioning in basic form, but wouldn't turn down any help to make that happen all at once).</p> <p>I'm using jQ 1.7.1 and isotope, both minified versions as well as scrollTo 1.4.2 minified. you can see the full bit here: <a href="http://beta.wildcatbelts.com/wrestling-belt-gallery-ren.php" rel="nofollow">http://beta.wildcatbelts.com/wrestling-belt-gallery-ren.php</a></p> <p>my jQ:</p> <pre><code>$(window).load(function(){ var $container = $('#blist'); $container.isotope({ itemSelector : 'ul#blist &gt; li' }); $('#ncont a').click(function(){ $.scrollTo( '#fcont', 1200, {axis:'y'} ); }); $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); }); </code></pre> <p>leading in with:</p> <pre><code>$(document).ready(function(){ </code></pre> <p>... (which I'm used to seeing more often) doesn't work as another (old, abandoned) plugin on another page (just the homepage) fails with it. I'll happily use each version on the pages necessary to get them both functioning.</p> <p>my markup:</p> <pre><code> &lt;ul id="filters" class="option-set" data-option-key="filter"&gt; &lt;li&gt;&lt;a href="#" data-filter="*" class="selected"&gt;Show All&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter=".P5"&gt;5 Plates&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter=".P3"&gt;3 Plates&lt;/a&gt;&lt;/li&gt; [ * several more filters] &lt;/ul&gt; &lt;ul id="blist"&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P0"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P3"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P0"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P0"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P5"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="belts P3"&gt;&lt;a href="/example.php"&gt;&lt;img src="/images/pic.jpg" alt="alt text" /&gt;&lt;span&gt;caption&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; [ * many, many more ] &lt;/ul&gt; </code></pre> <p>thanks.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJeremy
    1. USJeremy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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