ZipBar

 


Effortless Tabs

ZipBar is a clean, easy to use stack to help you organize lots of information on a single page. Similar to a tab stack, you can hide lots of content behind each button in the bar, only to be revealed at the user's discretion. It's like a supplemental navigation bar.

You'll have your first ZipBar up and running in just minutes. With simplified options and our own color math engine built in, all you need to do is pick a few basic colors and fill in the content.

Instructions

Configure ZipBar in just a couple of easy steps.

  1. Open your Stacks Library. Drag a ZipBar stack element from your Stacks Library onto your Stacks page.
  2. Double-click on each "Button Title" to give each button name.
  3. Drag other stacks into each available content space and propagate each item with text and media as needed.
  4. Add more tabs by clicking the blue button in edit mode.
  5. Make other adjustments like animation effect, gradient, shadow, radius and colors.

NOTE: To make your button link to another page or site, simply add a properly formatted HTML anchor tag, i.e.

<a href="http://www.example.com">My Link</a>

ZipBar 2 was released on 12th October 2016 and is a free update for all existing users. Please login and download the update from your Paddle Locker or get in contact (with your receipt) to request a copy. This stack now requires a minimum of Stacks 3 and RapidWeaver 6.

Example

Here's a working example of the ZipBar stack in action; demonstrating some simple content types and some more complex setups:

  • Standard Text
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Columns Of Text

    About Us

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Leading The Way

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • AdaptiveGrid
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
     
    The free AdaptiveGrid stack is the go-to stack for thousands of RapidWeaver users. Sadly equal-height columns don't tend to work too well when they are toggled between hidden and shown (it messes-up the calculations somewhat). Fortunately the ZipBar stack allows you to attach an optional 'custom callback' to each individual tab. So if you want something to happen when a tab is clicked, callbacks might be the answer. In this example, entering equalheight('.ZipBarCatcher .adaptiveGrid .gridCellInner'); in the custom callback box reinitiates the column height calculations when a tab is clicked. Therefore the columns retain equal heights, even after they are toggled opened and closed.
  • ImageCompare
    Before After
    My Image My Image
     
    This ZipBar example makes use of powerful custom callbacks to initiate the free ImageCompare stack, when the tab is opened. Simply select the tab in Stacks edit mode and enter the following for the On Click callback;

    $(".ZipBarCatcher .imageCompare").twentytwenty({default_offset_pct: 0.80});

    And in the Off Click callback, enter this:

    $(".ZipBarCatcher .twentytwenty-overlay, .ZipBarCatcher .twentytwenty-handle").remove();

    The first callback tells the ImageCompare stack to initiate (run), as soon as the tab panel is opened, with the drag handle set at 80%. The second callback destroys (removes) the shade and drag handle from the current ImageCompare stack, to stop these dynamically 'stacking up' if you keep returning to this tab. 'ZipBarCatcher' restricts the callback to only working on ZipBar stacks.
  • Video
     
    If you are using HTML5 video in tab panels, you definitely need a way to stop the video when a user navigates onto a different tab. Otherwise the video will just keep playing in the background; which can be a point of much confusion! Again, custom callbacks in ZipBar can really help us to fix common problems like this. The example video above was embedded using the free Embed stack, and the following Off Click Callback was added to this tab, to stop the video when another tab is clicked:

    $(".ZipBarCatcher video").trigger('pause');

    A nice feature of this technique is that the video remembers where it was played to; so if the user comes back to the tab again, they can resume the playback from where they paused it.
Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the YourHead Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 6 or greater) and Stacks 3 or later.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo version already provided on the website, to fully evaluate this stack for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the support page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Free demo versions
We provide free demo versions of all our stacks, so you can try before you buy! In the free demo's, automatic updates are disabled, a credit is displayed below the stack, and the stack fades out of view after 60 seconds. There are no trial expiries or disabled features. Buy with the confidence of knowing what you're getting.
What is a Stack?
A stack is a drag-and-drop component you can add to your webpages. These individual stack elements can be used to quickly add extra layout or functionality. Stacks work inside the Stacks plugin by YourHead software; an extremely popular plugin for RapidWeaver.
Learn more >
Customer support
Questions, feature requests, bug reports, or advice required about our stacks? No problem, we're here to help you. Fast and friendly expert support direct from the developers. No lousy FAQs, canned responses, complicated ticket systems or outsourced support agents here!
Learn more >
All prices shown include any applicable VAT
RapidWeaver® is a registered trademark of Realmac Software
Webpage Updated: 02/05/2017