Scroll Box Pro - JoomlaX Documentation

Introduction

Scroll Box Pro is a Joomla module that allows you to display scrolling text within a customizable box on your Joomla website. This documentation covers the installation, configuration, and usage of the Scroll Box Pro module.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the Downloads section of our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: ScrollBoxPro_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the ScrollBoxPro_UNZIP.zip package. After unzipping, you will find the following contents:

Folder Joomla 4, 5 & 6: This extension is compatible with Joomla 4.x, 5.x, and 6.x. In this folder, you will find the installation file named mod_scrollbox_X.x.zip.
ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

For Joomla 4, 5 & 6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

After successful installation:

Go to Content > Site Modules
You will find Scroll Box Pro listed. Click on it to configure.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

Configuration

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Content > Site Modules, and find Scroll Box Pro in the list.

General Settings

Scroll Direction: Select the direction in which the text should scroll.
- Options are: Left to Right, Right to Left, Top to Bottom, or Bottom to Top.
Scroll Speed: Select the speed of the text scroll.
- Options range from Very Slow (0.3) to Ultra Fast (10).
- Recommended: Normal (1) or Medium (2).
Pause On Hover: Choose whether to pause scrolling when the mouse hovers over the box.
- Options are: Yes or No.
- When enabled, scrolling pauses on hover (desktop) and touch (mobile) for better readability.

Content Settings

Content Source: Select the input method of messages.
- Options are: Custom Editor or Joomla Article.
Select Article: Choose an article to be displayed (shown only if Content Source is set to Joomla Article).
Enter Text: Enter your text here using the Joomla editor (shown only if Content Source is set to Custom Editor).
Enable Max Length?: Enable max text length restriction.
- Options are: Yes or No.
Max Length (Characters): Set max character count (shown only if Enable Max Length? is set to Yes).
Strip HTML Tags?: Choose to remove HTML tags from content.
- Options are: Yes or No.
- When enabled, all HTML tags are removed and only plain text is displayed.

Styling Settings

Text Color: Enter the hexadecimal color code for the text (default is #000000).
Font Size (px): Enter the size of the text in pixels (default is 16).
Font Weight: Select the font weight for your text.
- Options are: Normal or Bold.
Box Width: Enter the width of the box (default is 100%).

Supports various units: px, %, vh, vw, or auto.
Examples: 100%, 500px, 50vw, auto.

Box Height: Enter the height of the box (default is auto).

Supports various units: px, %, vh, vw, or auto.
Examples: 300px, 80vh, auto.

Background Color: Enter the hexadecimal color code for the box background (default is #FFFFFF).

Supports RGBA format for transparency.

Advanced Settings

Module Class Suffix: Enter your desired module suffix for additional styling (optional).
Additional CSS: Add custom CSS code to further customize the scroll box appearance. This CSS will be added inline to the page.

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Scroll Box Pro will display the scrolling text based on your settings, providing a dynamic and engaging content area.

Features

Pause On Hover: Allows users to pause the scrolling text by hovering over the box (works on desktop and mobile touch devices).
Multiple Scroll Directions: Choose from left to right, right to left, top to bottom, or bottom to top scroll directions.
Adjustable Scroll Speed: Customize the scroll speed from very slow (0.3) to ultra fast (10) to suit your website's needs.
Customizable Styling: Set text color, font size, font weight, box dimensions (with flexible units), and background color.
Flexible Content Input: Use either the Joomla editor or select a Joomla article to display scrolling text.
Content Processing: Strip HTML tags or apply max length restrictions to content.
Pure JavaScript: No jQuery dependency, improved performance and reduced load time.
Responsive Design: Fully responsive and mobile-friendly implementation.
Advanced Customization: Add module class suffix and additional CSS for further styling.

FAQ

How do I change the scroll direction?
- Adjust the Scroll Direction setting under General Settings.
Can I change the text color?
- Yes, set the Text Color under Styling Settings.
How do I input my own text?
- Set the Content Source to Custom Editor and enter your text in the Enter Text field.
Can I use a Joomla article for the scrolling text?
- Yes, set the Content Source to Joomla Article and select the desired article from the modal interface.
How do I adjust the scroll speed?
- Change the Scroll Speed setting under General Settings. Choose from Very Slow (0.3) to Ultra Fast (10).
Can I add HTML elements to the scrolling text?
- Yes, when using the Custom Editor, you can add HTML elements like links, images, or formatted text. If you want plain text only, enable Strip HTML Tags?.
How do I limit the text length?
- Enable Enable Max Length? and set the Max Length (Characters) value under Content Settings.
Can I use responsive units for box dimensions?
- Yes, you can use %, vh, vw, px, or auto for both width and height.

Troubleshooting

Text Not Scrolling: Ensure the module is assigned to a visible template position and published. Verify the Scroll Direction and Scroll Speed settings. Check browser console for JavaScript errors.
Styling Issues: Check the Styling Settings and adjust text color, font size, and background color as needed. Clear browser cache and Joomla cache after making changes.
Content Not Displaying: Verify the selected content source and ensure the text or article is properly configured. Check that the article is published if using Joomla Article source.
Pause on Hover Not Working: Ensure Pause On Hover is set to Yes in General Settings. Check browser console for JavaScript errors.
Module Not Visible on Page: If you are using Firefox or Google Chrome, right-click on your website and click on "View Page Source". In the source code, search for text like "scrollbox" or "jx-scroll-box". If you don't find the text, then it's confirmed that the module isn't activated on the page.
Changes Not Reflecting: If Joomla cache is activated, try to clear it once after you make changes to the module parameter settings. Go to System > Clear Cache.
Adding Module Inside Article: To add this module inside an article, go through the URL: https://docs.joomla.org/How_do_you_put_a_module_inside_an_article?