01 Overview

Counter Up is a site-side Joomla module (mod_lgx_counter_up) that animates numbers from zero up to their target value the instant they scroll into the visitor’s viewport. The counting engine uses jQuery Waypoints to detect viewport intersection and a custom counter library (custom-counter.min.js) to perform the animation. All per-module styles are injected as scoped CSS declarations tied to the module’s unique ID, so multiple instances on a single page never conflict.

Version 3.0.0 rebuilds the extension on Joomla’s modern extension API: a PSR-4 namespaced class tree under LogicHunt\Module\CounterUp, a DI service provider in services/provider.php, and a typed Dispatcher that extends AbstractModuleDispatcher. This makes the module fully forward-compatible with Joomla 4, 5, and 6.

02 System Requirements

03 Installation

1. Download the package. You will have a ZIP file named mod_lgx_counter_up_v3_0_j6_x.zip. Do not unzip it before uploading.
2. Open the Extension Manager. In your Joomla administrator, navigate to System → Install → Extensions.
3. Upload and install. Use the Upload Package File tab. Select the ZIP file and click Upload & Install. Joomla will process the manifest and copy all files to /modules/mod_lgx_counter_up/.
4. Enable the module. Go to Content → Site Modules. Find Counter Up by LogicHunt.com in the list, open it, and set Status to Published.
5. Assign a position and pages. Select a module position and use the Menu Assignment tab to control which pages display the module.
6. Add counter items. Open the Item Source tab, click Add New Item, and configure each counter’s value, title, icon, and description.
7. Save and verify. Click Save & Close, then visit the front end to confirm the animation fires on scroll.

Update Server

The manifest registers an update server so Joomla notifies you of new releases automatically:

Updates appear in System → Update → Extensions. Running the updater is safe — method="upgrade" preserves all existing module parameters.

04 File Structure

05 Counter Items (Item Source Tab)

Counter items are managed through a native Joomla subform repeater field (lgx_counter_up_repeat_field). The subform supports a minimum of 1 and a maximum of 1,000 items. Click Add New Item to append a row. Each row contains the following fields:

06 Basic Settings Tab

Layout Order

Controls the render order of Icon, Number, Title, and Description inside each counter card. The selected value maps directly to a PHP switch statement in tmpl/default.php. See Layout Order Reference for all 11 options.

Counter Configuration

Advanced Custom Style

A raw CSS textarea. Content is injected via $document->addStyleDeclaration() after all scoped module styles. See Custom CSS Field.

07 Responsive Control Tab

Sets the number of counter cards displayed per row at each viewport breakpoint. The Dispatcher passes these values to LgxCounterUpHelper::LgxRowItemCount($n), which calculates 100 / n percent and injects it as a scoped flexbox rule targeting .lgx_app_item.

Tablet and mobile note: At ≤991 px and ≤767 px breakpoints, background-attachment is automatically reset to initial to prevent fixed-background rendering issues on iOS and Android.

08 Style Settings Tab

Item Behaviour

Item Border

Number Styling

Icon Styling

Title and Description Typography

09 Section Settings Tab

Controls the outer section wrapper — background imagery, color overlay, and spacing.

Background Image

Background Color Overlay

Section Dimensions and Spacing

10 Section Header

An optional header block rendered above the counter grid inside .lgx_counter_up_header. Enable it to display a section title (<h2>) and subtitle (<h4>) with full typography control.

11 Advanced Tab

12 Layout Order Reference

The Layout Order parameter in the Basic tab controls the render order of four elements: Icon (I), Number/Count (N), Title (T), and Description (D) inside each counter card. Two additional layouts float the icon left or right of the stacked number/title/description block.

The floating layouts (l_i_t_n_d and r_i_t_n_d) wrap the number, title, and description in a .lgx_item_info_wrap div positioned alongside the icon using flexbox direction set by the parent .lgx_item_floating_{floating_style} class.

13 Hover Effects Reference

The Item Style parameter in the Style Settings tab appends a class to each counter card element as lgx_app_hover_effect_{value}. All effects are pure CSS, defined in _hover_effect.min.css.

14 Template Override

Counter Up supports two types of Joomla override.

CSS Override (Automatic)

On every page load, asset.php checks for a custom stylesheet at:

If the file exists, it is loaded automatically after the module’s own style.min.css. Create this file in your active template to override any module styles without modifying core files. No configuration required.

Layout Override (Manual)

Copy tmpl/default.php to:

Joomla will use your override instead of the module’s bundled template. Combined with the LESS source files in assets/less/, this gives full control over markup and compiled styles.

15 Custom CSS Field

The Custom Style textarea in the Basic tab injects arbitrary CSS into the document via $document->addStyleDeclaration(). It is injected after all scoped module styles, so it has full cascade priority over any generated rule.

Use module-scoped selectors to avoid affecting other elements:

16 Architecture Notes

DI Service Provider

services/provider.php returns an anonymous class implementing ServiceProviderInterface. It registers three service providers against the Joomla DI container:

Dispatcher Data Flow

Dispatcher::getLayoutData() calls parent::getLayoutData() for base Joomla layout setup, then:

1. Reads the subform repeater via $params->get('lgx_counter_up_repeat_field') and processes it through LgxCounterUpHelper::LgxCounterUpSource() to produce a normalized $items array.
2. Optionally shuffles the array via LgxCounterUpHelper::LgxCounterUpRandomize() if random === 1.
3. Extracts every backend parameter into typed local variables.
4. Calls require on assets/asset.php while all variables are in local scope — this registers stylesheets and scripts and injects all scoped CSS declarations.
5. Returns the populated $data array to the parent dispatcher, which passes it to tmpl/default.php.

JavaScript Initialisation

tmpl/default.php outputs an inline <script> block that initialises a Waypoint for every .lgx_counter{module->id} element:

The this.destroy() call ensures the Waypoint is removed after the counter fires once — scrolling back up and down will not re-trigger the animation.

17 CSS Class Reference

18 Frequently Asked Questions

The counter animates but only shows 0

Verify the Count Value field contains a recognisable numeric string. If the value contains only non-numeric characters (e.g. a label with no digits), the counter engine has nothing to count toward and stays at zero.

The animation fires on page load, not on scroll

Waypoints triggers on bottom-in-view, meaning the module is likely already visible in the viewport when the page loads. This is expected behaviour — the counter fires immediately if the section is already on screen.

The counter fires twice on the same scroll

This should not occur because this.destroy() is called inside the handler. If you see repeated animation, check whether the module position is being rendered twice by the active template.

Random mode is not working

Disable caching for this module instance. Go to the Advanced tab and set Caching to No Caching. A cached render will not re-shuffle on subsequent requests.

Background parallax effect is not working on mobile

This is intentional. The module automatically resets background-attachment to initial at ≤991 px and ≤767 px breakpoints to prevent fixed-background rendering issues on iOS Safari and Android Chrome.

How do I add a prefix or suffix to the counter number?

Enter the full string including non-numeric characters directly in the Count Value field. For example: $1,234, 99%, or 1,200+. The counter engine automatically detects and animates the numeric portion.

How do I style a specific module instance differently?

Use the Custom Style field in the Basic tab with the module-scoped ID selector (e.g. #mod_lgx_counter_up123 .lgx_cu_value { ... }), or create a file at templates/{your-template}/css/mod_lgx_counter_up.css which is loaded automatically for all instances.

Can I use multiple Counter Up modules on one page?

Yes. Each instance receives a unique module ID from Joomla. All CSS is scoped to #mod_lgx_counter_up{ID} and all JavaScript selectors target .lgx_counter{ID}, so instances are fully isolated from each other.

19 Support

LogicHunt provides direct developer support for all extensions. Response times are typically within one business day.