Using MarqueePlugin
The MarqueePlugin displays a horizontally scrolling text banner on any page.
Description
Use this plugin to create a moving text strip — useful for announcements,
alerts, or highlights. The banner pauses automatically when you hover over
it with the mouse. See Plugins for a complete list of available plugins.
Syntax
[{MarqueePlugin text='Your message here'}] renders as:
Parameters
| Parameter | Default | Description |
|---|---|---|
text | *(required unless fetch is used)* | The message to display. |
fetch | *(none)* | Call a data manager to get the text dynamically. See Live Data from Managers below. |
speed | medium | Scroll speed: slow, medium, fast, or a number of seconds. |
direction | left | Direction of movement: left or right. |
behavior | scroll | scroll (continuous loop), slide (enters and stops), alternate (bounces). |
loop | infinite | Number of passes before stopping (applies to slide / alternate). |
bgcolor | *(none)* | Background colour of the banner strip (any CSS colour). |
color | *(none)* | Text colour (any CSS colour). |
fontsize | *(inherit)* | Font size of the banner text (any CSS length: 1.5em, 24px, 2rem). |
separator | • | Characters shown between repetitions in scroll mode. |
cssclass | *(none)* | Extra CSS class added to the banner for custom styling. |
Examples
Simple Announcement
[{MarqueePlugin text='Community meeting Tuesday 7 PM in the clubhouse'}] renders as:
Coloured Alert Banner
[{MarqueePlugin text='Maintenance window tonight 02:00–04:00 UTC' speed='fast' bgcolor='#f8d7da' color='#721c24'}] renders as:
Slow Information Strip
[{MarqueePlugin text='Welcome — enjoy your stay!' speed='slow' bgcolor='#d1ecf1' color='#0c5460'}] renders as:
Slide In Once
[{MarqueePlugin text='New feature available — click here to learn more' behavior='slide' loop='1'}] renders as:
Bouncing Text
[{MarqueePlugin text='Special event this weekend!' behavior='alternate'}] renders as:
Custom Separator Between Repetitions
[{MarqueePlugin text='Free Wi-Fi in the lobby' separator=' ❖ '}] renders as:
Large Headline Banner
Use fontsize= to make the text stand out. Any CSS length unit works —
em, rem, px, vh, etc.
[{MarqueePlugin text='Grand Opening — Saturday 10 AM' fontsize='2em' bgcolor='#0d6efd' color='white' speed='slow'}] renders as:
Small Ticker Strip
[{MarqueePlugin text='Latest scores: Home 3 — Away 1 • Home 0 — Away 2' fontsize='0.85em' speed='fast'}] renders as:
Live Data from Managers
Instead of typing static text, use fetch= to pull live data from any data
manager that supports it. The banner text updates automatically every time
the page renders.
Syntax: fetch='ManagerName.methodName(option=value,...)'
[{MarqueePlugin fetch='HansDataManager.toMarqueeText()'}] renders as:
Options inside fetch=
Options are passed as key=value pairs separated by commas inside the
parentheses. Each manager defines which options it accepts.
Common options (supported by all managers that implement toMarqueeText):
| Option | Description |
|---|---|
limit | Maximum number of items to include (e.g. limit=3) |
sort | Sort order shorthand, e.g. sort=date-desc or sort=name-asc |
since | ISO date — only items at or after this date (e.g. since=2026-01-01) |
before | ISO date — only items before this date |
HansDataManager-specific options:
| Option | Description |
|---|---|
alertLevel | Filter by level: ADVISORY, WATCH, or WARNING |
colorCode | Filter by aviation colour: YELLOW, ORANGE, or RED |
observatory | Filter by observatory code: avo, hvo, cvo, etc. |
Examples
[{MarqueePlugin fetch='HansDataManager.toMarqueeText(limit=3)'}] renders as:
[{MarqueePlugin fetch='HansDataManager.toMarqueeText(alertLevel=WATCH)' speed='fast' bgcolor='#fff3cd' color='#856404'}] renders as:
Notes
- The banner uses CSS animation — it works in all modern browsers without
any additional setup. - Moving the mouse over the banner pauses the scrolling; moving away
resumes it. - You can place multiple banners on the same page and each will scroll
independently. - The
privateuser-keyword on a page still controls who can view the
page; the plugin itself has no access restrictions.
No comments yet.