Stack Filter 2

Stack Filter 2 is a fancy list of stacks which can be tagged with keywords and three different sortable indizes. The corresponding "Stack Filter Activator" will let you filter this list by choosing which ones of the tagged Stacks will be shown. After clicking on an "Activator" the list is dynamically filtered by fancy animations.

Rewritten from the original Stack Filter this one brings you enhanced performance in RapidWeaver and rearrangable Stack Filter Items. No more struggling with moving one item to the first position of the list of Stacks. Now you can simply drag and drop one of the items to any position in the list.
Stack Filter was never cooler than today. Now you can not only filter your list but you can also sort it. Every item in the list can be sorted by one of three sortable indices you can provide. For example names, dates, positions...

Screenshots

Examples

Live Example:
Take a look at my Stacks overview page, where you can filter all Stacks by category

Example Activators

Example Searchfield

Example Sorting (ascending)

Example Sorting (descending)

Stack Filter elements:

  • Stacks Image 29262
    Sortable 1: Position 1
    Sortable 2: 2013
    Sortable 3: Whale
  • Stacks Image 29268
    Sortable 1: Position 2
    Sortable 2: 2012
    Sortable 3: Flower
  • Stacks Image 29274
    Sortable 1: Position 3
    Sortable 2: 2011
    Sortable 3: Citrus
  • Stacks Image 29280
    Sortable 1: Position 4
    Sortable 2: 2010
    Sortable 3: Fly

Examples

    Board
  • Stacks Image 14736
    Jane D. (62)
  • Stacks Image 14734
    John D. (33)
  • Stacks Image 14760
    Michael K. (55)
  • Stacks Image 14841
    Nick K. (35)

Infos and Requirements

Rapidweaver
Rapidweaver 5/6/7
Stacks 2 only
Stacks 2 / 3
Responsive
Compatible to
responsive themes
Internet
Internet connection
for preview

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox

Tutorial

    Drop a Stack Filter 2 Stack on your page
    Drop any number of Stack Filter 2 Item Stacks into this Stack. Each Item can be filtered and sorted
    Give each Item one or more categories. The items will hide if a category is activated (or searched for) they don't use.
    Now drop a Stack Filter Activator, Sorter or Search Stack and set up the same unique identifier in the Stack Filter 2 and the other Stacks. You can also use a normal text link to activate a Stack Filter. Just enter the following URL:
    javascript:stacks.StackFilter2.activate('filter1','one',2000, true)
      filter1: the id of the Stack Filter 2
      one: The name of the category to be activated
      2000: Duration in ms
      true or false: Scale effect
    Set for each Activator / Sorter / Search Stack which categories will be shown after clicking on it or which sort field should be used.

Settings

    • Unique identifier: each list of filterable items must have a unique id in order to allow two or more of these lists on one page
      collapse (edit mode): You can collapse a list of many many items to have a better overview of the rest of your Stacks on the page
      padding top/left: Padding between each list item
      Alignment: left, center or right align your items
    • Category: Enter any number of whitespace separated keywords as categories. This item will be visible as long as the list is filtered by at least one of its categories
      Sortable 1/2/3: "Stack Filter 2 Sorter" Stack uses the keywords provided in these fields. If you you sort by "Sortable 1" it looks at and compares all Stack Filter 2 Items keywords entered in the Sortable 1 field.
      Alignment: left, center or right
    • Duration: Time in ms the effect will need to rearrange all items
      Show Categories: Define which items with this Category-Tag shall be shown. Enter one of the categories you set up for the Stack Filter 2 Items or the predefined word "all" to show all items
      Stack Filter ID: Specify here the unique filter id of the "Stack Filter 2" - Stack
      Scale effect: dis-/reappearing items are shown using a scale effect
    • Duration: Time in ms the effect will need to rearrange all items
      Stack Filter ID: Specify here the unique filter id of the "Stack Filter 2" - Stack
      Scale effect: dis-/reappearing items are shown using a scale effect
      Placeholder: This text is a placeholder in the input field and will disappear as soon as you begin typing
      Width / Width unit: Setup the input fields width in pixel or percent
      Height / Font-Size / Padding / Border: Customize the input field with several options
      Native appearance: If you apply this option you have fewer options to customize the input field but it will be displayed in a native OS/browser style.
    • Duration: Time in ms the effect will need to rearrange all items
      Stack Filter ID: Specify here the unique filter id of the "Stack Filter 2" - Stack
      Order By: Select one of the three available fields (Sortable 1-3). Clicking on this Stack will sort all items of the mentioned Stack Filter 2 by the value of the selected field.
      Direction: Ascending or Descending
      Scale effect: dis-/reappearing items are shown using a scale effect