Key Features

Dynamic Number Display

Display real-time statistics like client counts, project completions, or any numerical data with smooth animated counters. The animation triggers when the counter enters the viewport, ensuring optimal performance and user engagement. Perfect for highlighting business achievements, completed projects, or ongoing metrics dynamically.

Fully Customizable Styling

Match counters with your site design by customizing every aspect of their appearance:
- Number Color: Choose any color for the counter numbers
- Background Color: Set custom background colors with RGBA support
- Typography: Full control over font family, size, weight, line height, letter spacing, and text shadow
- Border Options: Customize border width, style, color, and radius for all sides
- Padding & Margin: Adjust spacing around counters with dimension controls
- Google Fonts: Integrate any Google Font with custom weights
- Text Position: Display counter titles above or below the numbers

Advanced Number Configuration

Configure your counters with precise control:
- Custom Ranges: Define starting and ending numbers for meaningful data presentation
- Adjustable Speed: Control animation duration (in milliseconds) for smooth counting
- Thousand Separator: Enable comma separators for large numbers (e.g., 1,000 instead of 1000)
- Custom Separator: Use any character as thousand separator (comma, period, space, etc.)
- Prefix & Suffix: Add text or symbols before or after numbers (e.g., $, %, units, or custom text)

Multiple Counters Support

Deploy multiple counters on a single page to display diverse data points simultaneously. Each counter can have:
- Unique starting and ending values
- Individual animation speeds
- Custom titles and descriptions
- Independent styling options
- Prefix and suffix customization

Perfect for showcasing multiple KPIs, achievements, or real-time statistics in a single module instance.

Responsive Design

Fully responsive layout that works seamlessly across all devices:
- Cross-Device Compatibility: Consistent display on desktops, tablets, and mobile devices
- Mobile Breakpoint: Automatic stacking on mobile devices (768px breakpoint)
- Flexible Width: Counters automatically adjust width based on number of items
- Enhanced User Experience: Smooth and interactive browsing experience for all users

Modern IntersectionObserver API

Uses the native IntersectionObserver API for optimal performance:
- Viewport Detection: Counters animate only when they enter the viewport
- Performance Optimized: No unnecessary animations for off-screen content
- Browser Fallback: Automatic fallback for older browsers without IntersectionObserver support
- One-Time Animation: Prevents multiple initializations with proper cleanup

Contextual Details

Add meaningful context to your numbers:
- Counter Titles: Display descriptive text above or below each counter
- Prefixes: Add symbols or text before numbers (e.g., $, €, %, or custom text)
- Suffixes: Add units or text after numbers (e.g., +, %, users, projects, etc.)
- Enhanced Messaging: Make numbers more relevant and impactful with contextual information

Advanced Customization

Complete control over counter appearance and behavior:
- Module Class Suffix: Add custom CSS classes for advanced design control
- CSS Integration: Seamless integration with your website's design framework
- Tailored Appearance: Ensure counters match your brand's look and feel perfectly
- Flexible Layout: Counters automatically adjust to available space

Modern Joomla Compatibility

Fully compatible with the latest Joomla versions:
- Joomla 4, 5 & 6 Support: Complete migration to modern Joomla platform
- Modern PHP 8.0+: Updated codebase with modern PHP syntax and type hints
- WebAssetManager: Uses Joomla's native asset management for optimal loading
- Future-Proof: Built with latest web standards for long-term reliability

Optimized Performance

Lightweight and fast implementation:
- Efficient JavaScript: Optimized jQuery countTo plugin with proper event handling
- Lazy Loading: Counters only animate when visible in viewport
- Minimal DOM Queries: Efficient element selection and manipulation
- Asset Optimization: Proper use of WebAssetManager with defer attributes

Enhanced Security

Built with security best practices:
- Input Sanitization: All user input properly sanitized with htmlspecialchars()
- XSS Prevention: Comprehensive output escaping
- Type Validation: Proper integer casting and validation for numeric values
- Array Safety: Secure handling of subform data and object conversion

Use Cases

• Business Websites: Display client counts, years of experience, completed projects
• E-commerce Sites: Show number of products, satisfied customers, or orders processed
• Portfolio Sites: Highlight number of projects, clients served, or awards won
• Non-Profit Organizations: Showcase donations received, volunteers, or people helped
• Educational Institutions: Display student count, courses offered, or years of excellence
• Healthcare: Show number of patients treated, doctors, or facilities
• Real Estate: Highlight properties sold, happy clients, or years in business
• Technology Companies: Showcase users, downloads, or active installations

Technical Details

Requirements

• Joomla Version: 4.x, 5.x, or 6.x (Joomla 3.x support discontinued)
• PHP Version: 8.0 or higher
• Module Type: Site Module
• License: GNU/GPL v2 or later
• Update Server: Automatic updates supported via Joomla Update Manager

Installation

1. Install the module through Joomla's Extension Manager
2. Configure Style Settings (colors, typography, borders, spacing)
3. Add counter slides with starting/ending values, speed, and titles
4. Optionally add prefixes and suffixes to numbers
5. Configure thousand separator if needed
6. Assign the module to a module position
7. Publish and enjoy animated counters!

Customization Options

Style Settings
- Counter number color and typography
- Counter title color and typography
- Background color (with RGBA support)
- Padding and margin (all sides configurable)
- Border (width, style, color, radius for all sides)
- Text position (top or bottom)

Counter Settings
- Starting number (data from)
- Ending number (data to)
- Animation speed (in milliseconds)
- Counter title/text
- Number prefix
- Number suffix

Advanced Settings
- Module class suffix for custom CSS

Why Choose Counters Module?

1. Professional Animation: Smooth, eye-catching animations that engage visitors
2. Complete Customization: Control every aspect of counter appearance and behavior
3. Easy to Use: Simple subform interface for adding multiple counters
4. Modern Technology: Uses IntersectionObserver API for optimal performance
5. Responsive Design: Works perfectly on all devices and screen sizes
6. Joomla 6 Ready: Fully compatible with latest Joomla versions
7. Well Optimized: Lightweight code with efficient asset loading
8. Regular Updates: Continuously updated for compatibility and security
9. Google Fonts Support: Integrate any Google Font for typography
10. Multiple Counters: Display unlimited counters in a single module instance

Getting Started

1. Install the module through Joomla's Extension Manager
2. Navigate to Modules → Counters
3. Configure Style Settings to match your brand
4. Add counter slides with your desired numbers and titles
5. Customize prefixes, suffixes, and thousand separators
6. Assign to a module position and publish
7. Watch your counters animate when they enter the viewport!

Transform your website's metrics display with Counters. Perfect for any Joomla website that wants to showcase achievements, statistics, or key performance indicators with professional animated counters.

Support

For support, documentation, and updates, please visit:
- Support: https://support.joomlax.com
- Store: https://joomlax.com

Version History

The module has been continuously updated to support the latest Joomla versions. Version 1.9 introduces Joomla 6 support, IntersectionObserver API implementation, enhanced form fields with default values, improved security, and complete JoomlaX branding update.