blog-tutorial-post-template

Tutorials

Setup

1. Drag and drop the Quick Finder stack into the Stacks editor.

2. Next, place the content that you want to be searchable inside of the Quick Finder Content stack. Quick Finder treats each nested stack as one single item. So if you put Stack A inside of Stack B, it will treat Stack B as a part of Stack A. If you want Stack A and Stack B to be individual items, place them each within the content stack, but not within another stack or with one inside of the other.

Here’s a visual representation:
cleanTut-01a

3. The Quick Finder Content stack does not need to stay nested in the Quick Finder stack and can be dragged and placed in another location.

4. Select the Quick Finder stack and in the settings menu navigate to the Settings tab and select a Search Function to determine how the stack will handle the search bar input.

Search Function: Show all, narrow results on input
The stack will show all items when the search bar is empty. When a user adds text to the search bar it will hide items that do not contain the current search term or phrase.

Search Function: Hide all, find results on input
The stack will hide all items when the search bar is empty. When a user adds text to the search bar it will show items that contain the current search term or phrase.

Search Function: Show all, sort all on input
The stack will show all items when the search bar is empty. When a user adds text to the search bar it will sort all items with those that contain the current search term or phrase at the top.

5. Optionally enable case sensitive matches.

Case sensitive matches only
When enabled, the search will only find a match when the searched term or phrase is exactly as typed with upper and lower case characters.

6. Using the next option, we can enable search suggestions to make sorting through items even faster. These suggestions will show below the search bar when it is focused. If a suggestion is clicked it will automatically populate the search bar and execute a search using the predefined term or phrase.

Show search suggestions
When enabled, a textfield will display. Here you can define your search term or phrase suggestions in a comma separated list.

7. In the settings menu Search Input Styles section you can change the appearance of the search bar. The customization options are all pretty straight forward and will only affect the appearance of the stack.

8. There are also style settings for the Quick Finder Content

Max width
The Quick Finder Content stack will automatically fill the width of the stack you place it inside of. Use this setting to define a maximum width you want the items to display.

Columns
Define how many items you want in a single row based on screen size. There is also a forth input for setting (Gap) the distance in pixels between each of the items.

Highlight search terms
When enabled, every term or phrase that is found in the items will be highlighted with the defined colors.

9. Lastly, in the Advanced section you can define a unique ID. This ID only needs to be changed if you are using more than one Quick Finder stack on a single stacks page.

10. After you have added a new unique ID (it can be something as simple as the number 2), copy the ID and select the Quick Finder Content stack. In the settings menu, add the ID to the Content ID field. This will assign the search bar to this content.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software