Topbar Joey

Button_Plus.png

Version 1.0

Quick Start

Where ever you put the Joey stack is where the launcher will appear. So usually this will be in the dropzone of TopBar when using the Launcher and Joeys' Main Content.

The Main content dropzone will be injected into TopBar and will be revealed by clicking or hovering the launcher.  This content is will always appear in TopBar even if Joey is else where on the page

To open external content (i.e somewhere else on the page) - drop whatever you want in a css box and give it a class name. Enter this class name in the External Content setting in Joey - no dots or anything before classname - exactly as you typed in CSSBox.

This external content will then be revealed with a click of the Joey Launcher - If you have stuff in the main content then both that (in the TopBar) and the external content will be revealed. If nothing is in the main content then just external will be revealed.

Scroll content is always injected in to TopBar. If you are only using scroll content it doesn't matter where Joey is on the page as no launcher is required. Remember it is only the launcher that appears where you put Joey and so then there is no need to put Joey into the TopBar DropZone in this case.

You can have as many Joeys on the page as you like, all doing different things.
Version 1.0.1
  • Fixed problem of initial scroll collapse not animating
  • Improved efficiency of scroll detection
  • Added update of scroll percentage on window resize
  • Fixed problem of image launcher disappearing
  • Cursor Pointer when hovering over Image Launcher
  • Recalculate percentage based position with window resize

Resources

Sample Project Files

Joey Demo Project

This the RW6 project that was used to make the full Joey Demo page as shown at : demo.bigwhiteduck.com/Joey/

This Project uses some third party stacks that you may not own:

Joe Workman: Jack

Big White Duck: Button Plus, Paragraph Plus & Header Plus

DooBox: Tabs


Joey Magellan Project

This the RW6 project that was used to make the demonstration of using a Magellan nav within TopBar at : demo.bigwhiteduck.com/JoeyMag/

To make this work you must add the CSS as shown on the page.

The CSS can be added to:

The page inspector CSS for use on a single page

Site Styles CSS with the option to use a global site styles template

RapidWeaver 6 Site Wide CSS in the project settings code section

Newsletter

Sign up below to receive updates on new products and offers first.

E Sign Up

Plus Stacks

Plus stacks contain original code
© Joe Workman

- Sitemap

Plus Stacks

Plus stacks contain original code
© Joe Workman

- Sitemap

Newsletter

Sign up below to receive updates on new products and offers first.

E Sign Up