Gateway remains a perfect stack to use for displaying important alerts to website users or as a convenient space to display additional content; like useful links, shopping carts, testimonials, help documentation, website navigation menus, special calculators and social media buttons. Essentially it is a blank canvas to place whatever you want inside. There are many parameters available to customise Gateway and make it look like a true part of your website or webapp.

Example

Click the button below to see some an example of Gateway in action. This example has Gateway styled and positioned using the default settings.


Open Me!


This example uses a link to open the Gateway stack. Ordinarily you can set Gateway stacks to open automatically as the webpage loads or trigger them from other stacks. There's a downloadable project file above (for RapidWeaver 8+) which provides more working examples of Gateway. You can also copy and paste these examples into your own websites, to continue using them.

Setup

Follow these instructions for getting your first Gateway stack setup
  1. Install Gateway in the normal way. Open your Stacks library. Drag and drop a Gateway stack into the page.
  2. Press the blue button to add your first content block inside Gateway.
  3. Any simple stacks can be added in the drop zome marked 'drag stacks here'.
  4. Within the Gateway stack settings, choose the position of your panel and amend any of the other style settings.
  5. Preview your webpage in RapidWeaver to test the result.

Triggering (Opening) Gateway stacks

The default behaviour is to have the Gateway stack trigger (open) as the page loads. This can be toggled-off within the stack settings. If automatic opening is disabled, it becomes your responsibility to decide and setup an alternative method of opening Gateway:
  1. Provide a unique ID and use an anchor on the webpage address (e.g. https://example.com/#myGateway)
  2. Setup links or buttons with a class attribute and a value equal to the ID of the Gateway stack you are wishing to open.
  3. Use a jQuery Javascript callback in stacks that support callbacks, example: $('#myGateway').trigger('click');

Taking the second example there, we can assume that our Gateway stack has a unique ID of myGateway. Add a button stack to the page. In the settings for the button link, leave the URL field empty. Setup a new custom attribute, with a key of class and a value of myGateway.

This simple configuration will instantly give you an attractive button that can be used to open your Gateway stack.

Remember that in web development, all IDs are case sensitive and must not contain spaces or special characters. Only hyphens and underscores are allowed. IDs can contain numbers, but the ID cannot start with a number.

Closing Gateway stacks


While setting up content blocks in Gateway, you probably saw the option to add a close button. Any stack dragged and dropped into one of these sub-stacks (like a button or image) will work as a close button.

If you prefer instead to create your own custom close button, simply allocate it a class attribute with a value of closeGateway similar to the steps outlined above for triggering a Gateway stack. Examples of this can be found in the downloadable project file.