MyListing Explore Scroll
The {CODICTS} MyListing Explore Scroll plugin fixes and enhances the horizontal scroll behavior of the listing type tabs on the MyListing Explore page.
When your site has many listing types, the Explore page header displays them as a row of tabs (e.g., “Restaurants,” “Hotels,” “Events”) with left/right arrow buttons for scrolling. The default MyListing scroll behavior can be unreliable or non-functional. This plugin replaces it with smooth, animated scrolling that works reliably every time.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
That’s it — visit your Explore page and the scroll arrows will now work with smooth animation. No settings page or configuration needed.
Key Features
| Feature | Description |
|---|---|
| Smooth Scroll Navigation | Replaces the default listing type tab scrolling with a smooth animated scroll (500ms duration). |
| Comfortable Scroll Step | Each click scrolls by half the visible container width plus a small offset, providing natural “page-by-page” navigation with slight overlap so you don’t lose context. |
| Left & Right Arrow Support | Supports both the previous (left) and next (right) arrow buttons. |
| Restyled Arrow Buttons | Arrow buttons are restyled with a clean circular design, subtle border, hover scale effect, and a gradient fade on the left side. |
| Zero Configuration | No settings page — activate and it works automatically. |
How It Works
The MyListing Explore page header displays listing type tabs in a horizontal row. When there are more tabs than can fit in the visible area, left and right arrow buttons appear for navigation.
This plugin enhances those arrow buttons in two ways:
Visual: The arrow buttons are restyled as small white circles with chevron icons (‹ and ›), a subtle border, and a hover effect that scales the button slightly with a drop shadow. The left arrow also has a white gradient fade to visually indicate more content exists to the left.
Functional: Clicking an arrow triggers a smooth animated scroll. Each click scrolls roughly half the visible width of the tab container, so you can comfortably browse through all listing types without losing your place.
Compatibility
| Item | Details |
|---|---|
| Child Theme | Not required. The plugin only adds CSS and JavaScript — it does not clone any templates. |
| {CoDicts} MyListing Explore Categories Addon | Compatible as of v1.1.0. Both plugins target the same Explore header area but work independently. |
| Dynamic Content | Compatible with MyListing’s Vue.js-based Explore page. The click handler uses event delegation so it works with dynamically rendered content. |
Frequently Asked Questions
Does this require a child theme?
No. Unlike many other CoDicts plugins, this plugin does not override template files. It only adds CSS and JavaScript, so a child theme is not required.
Is there a settings page?
No. The plugin works automatically upon activation with no configuration needed.
Can I change the scroll speed or distance?
Not from the admin area. The scroll duration is set to 500ms and the scroll distance is half the visible container width plus a small offset. These values are not configurable without modifying the plugin code.
Will this conflict with other plugins that modify the Explore page?
It is designed to be compatible with the {CoDicts} MyListing Explore Categories Addon. For other plugins, conflicts are unlikely since the JavaScript uses event delegation and targets very specific CSS selectors.
What happens when I deactivate the plugin?
The scroll arrows revert to MyListing’s default behavior. No data or files are modified — the plugin only adds CSS and JavaScript at runtime.
Does this plugin work without the MyListing theme?
The plugin will activate without MyListing, but it will have no effect. The CSS and JavaScript target MyListing-specific elements that don’t exist in other themes.
Troubleshooting
Scroll Arrows Not Appearing
| Cause | Solution |
|---|---|
| Not enough listing types | The arrows only appear when there are more listing type tabs than can fit in the visible area. Add more listing types or reduce the container width. |
| MyListing theme not active | The plugin relies on MyListing’s Explore page structure. Verify the MyListing theme is active at Appearance → Themes. |
| Plugin not activated | Go to Plugins → Installed Plugins and verify the plugin is active. |
Scrolling Feels Too Fast or Too Slow
| Cause | Solution |
|---|---|
| Fixed scroll step | The scroll distance is calculated based on your container width and is not configurable from the admin. On very wide or very narrow screens, the step may feel different. This is expected behavior. |
Arrow Styling Looks Different Than Expected
| Cause | Solution |
|---|---|
| CSS conflict | Another plugin or custom CSS may be overriding the arrow button styles. Check the browser inspector (F12) to see if competing styles are applied to the .cts-prev and .cts-next elements. |
For further support, visit codicts.com or contact us at support@codicts.com.