Module BuaXua Floating Documentation https://www.joomtut.com/images/joomtut-default-image.png
Joomtut Logo
Details

Module Buaxua Floating

The Module BuaXua Floating can displays your images or modules with floating effect. When you scroll the browser window, your images or modules are alway displayed. This module is suitable for display Ads, Banners, Menu, Socials Button, Contact Form, Login Form, Email Form, Custom code,...

Module BuaXua Floating Features

  • Floating your image link directly without creating module
  • Floating your module by ID
  • Floating your module by Position Name
  • Floating your module on Top, Middle, Bottom, Center of the website.
  • Your module snap to website edge
  • Your module snap to windows edge
  • Adjustable floating speed
  • Auto Show/Hide on small screen device
  • Display first time only
  • Show/Hide Close Button
  • Floating with Start Point
  • Show/Hide at Start Point
  • Adjust Side Offset
  • Settings Width and Height
  • Module Class
  • Custom CSS
  • Support the most common browser with latest version
  • Compatible with Joomla! version: 3.x, 4.x and Joomla! 5.x with Behaviour - Backward Compatibility

Changes from the previous version

  • Work on Joomla! 5.x with Behaviour - Backward Compatibility
  • Security fixed.
  • Fixed the module not working well on some websites.
  • Optimized to increase loading speed.

Download Module BuaXua Floating

Download Module BuaXua Floating

Video Clip

Module BuaXua Floating Documentation

1. Install the module BuaXua Floating via Joomla! Extensions -> Manage -> Install.

2. Go to Extensions -> Modules and open the module BuaXua Floating then select Show Title to Hide and Published the module BuaXua Floating on any available position of your template. We recommend you publish the module BuaXua Floating on the position named Debug because it is located at the bottom of your web page.

There are some templates that do not enable Debug position, please try to publish the module BuaXua Floating on any other positions. Such as Footer, Bottom, Top, Position-7, ...

3. Go to Menu Assignment tab and select All Pages to display the module BuaXua Floating on all pages of your website.

4. Keep all default settings and click Save & Close.

5. Clear your Joomla! cache and your Browser cache.

6. Go to your site then refresh your browser.

Live Demo: BuaXua Floating display images with default settings

If you see two demo banners floating on your website, this module works well on your site. If not, please view Troubleshooting below.

If you have installed the module BuaXua Floating Free, you don't need to remove it, just install the module BuaXua Floating Pro and open it then click Save to apply the Pro features. Your module will be upgraded to Pro and your old settings will be kept.

Please back up your website before making any changes.

1. Go to Content -> Media then upload your image to joomla! image folder.

2. Go to Extensions -> Modules then open the module BuaXua Floating and go to Left Side Settings tab to settings for the left side.

3. Change Width and Height to fit your image.

4.Select Vertical Position and Horizontal Position to display your image on the left side.

5. Select your image to display on left side.

6. Enter your Link URL for the image.

7. Do the same way for Right Side Settings.

8. Click Save & Close.

Live Demo: BuaXua Floating display images with floating

1. Go to Extensions -> Modules then looking for the ID number of your module.

2. Open the module BuaXua Floating and go to Left Side Settings tab to settings for the left side.

3. Change Width and Height to fit your image.

4.Select Vertical Position and Horizontal Position to display your image on the left side.

5. Select Module ID in Floating Type drop-down list.

6. Enter your module ID to Module ID field.

7. Do the same way for Right Side Settings.

8. Click Save & Close.

Live Demo: BuaXua Floating display module by ID

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Left Side Settings tab to settings for the left side.

2. Change Width and Height to fit your image.

3. Select Vertical Position and Horizontal Position to display your image on the left side.

5. Select Module Position in Floating Type drop-down list

6. Remember the name of module position in Module Position field. By default, this name is float-left but you can change it to whatever you want.

7. Do the same way for Right Side Settings. By default, the position of right side is float-right

8. Click Save & Close the module BuaXua Floating.

9. Open your module that you want to float on the left side (images, Banners, Custom HTML,...). Go to the Position field and enter float-left (type by your keyboard then press enter).

You can select a module position from the drop-down list of predefined positions or enter your own module position by typing in the name then press Enter

10. Click Save & Close your module.

Do the same way to display other module on the right side.

Live Demo: BuaXua Floating display module by position

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Options tab.

2. Enter the screen width to Auto Hide Screen Width. If you enter 601, your images or modules will not display on all devices with a screen width equal or smaller than 600px.

3. Click Save & Close the module BuaXua Floating.

Live Demo: BuaXua Floating auto hide on small screen devices

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Left Side Settings tab.

2. Enter the value in Start Point field. If you enter 200, your images or modules starts showing up in place, when you scroll down your website 200px your images or modules start floatting.

3. Set Display Start Point to Yes. Your images or modules starts with hidden, when you scroll down your website 200px your images or modules will display and floating.

4. Click Save & Close the module BuaXua Floating.

Live Demo: BuaXua Floating display images on scroll down and hide them on scroll up

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Left Side Settings tab.

2. Set Close Button to Show.

3. Select Button Position.

4. Do the same way for Right Side Settings.

5. Click Save & Close the module BuaXua Floating.

Live Demo: BuaXua Floating display Close button on images or modules

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Options tab.

2. Set Display First Time Only to Yes.

3. Click Save & Close the module BuaXua Floating.

Live Demo: BuaXua Floating display your images or modules first time only

1. Go to Extensions -> Modules then open the module BuaXua Floating and go to Left Side Settings tab.

2. Enter your Template or Bootstrap CSS Class in Module Class field.

3. Enter your CSS Code in CSS Override.

4. Do the same way for Right Side Settings.

5. Click Save & Close the module BuaXua Floating.

Live Demo: BuaXua Floating apply class and css to your images or modules

You can copy or duplicate this module then publish them with different settings on different pages.

Please note that only one module works on the same page.

Module BuaXua Floating Troubleshooting

1. Go to Extensions -> Modules and open the module BuaXua Floating then check to make sure the Status is Published and All Pages has been selected in Menu Assignment

2. Go to Left Side Settings tab and select Display Left Side to Yes. Do the same in Right Side Settings tab.

3. This module require jQuery Library to work. Joomla! load jQuery Library by default. But if not, please go to Extensions -> Modules and open the module BuaXua Floating, go to Options tab then set Load jQuery Library to Yes

4. The position named debug is not Enable on your template. You can go to your template option to enable it. Other ways, please try to publish the module BuaXua Floating on other position.

There are some templates that do not enable Debug position, please try to publish the module BuaXua Floating on any other positions. Such as Footer, Bottom, Top, Position-7, ...

Read more about How to enable debug position

1. Go to Extensions -> Plugins then open the plugin named System - JCH Optimize

2. Go to Exclude Options tab then set Exclude all internal SCRIPT declarations to Yes.

1. Go to Extensions -> Modules and open your module then check to make sure the Status is Published and All Pages has been selected in Menu Assignment

2. Check to make sure you have select the correct Module Position.

Go to Extensions -> Modules and open the module BuaXua Floating then set Fix Display option to Yes.

Other ways, you can try to publish the module BuaXua Floating on other position or create a new position for your template.

The problems caused by compatibility view in Internet Explorer. You can fix it in one of the following ways:

Install the Plugin JoomTut Meta Tags

JoomTut Meta Tags is a simple plugin for Joomla! This plugin will fix website display problems with compatibility view in Internet Explorer by adding X-UA-Compatible Meta Tag Description to your website. The X-UA-Compatible meta tag helps render Web pages in older IE browsers. It also allows you to add your custom tags to head section.

Download Plugin JoomTut Meta Tags

Add yourself by editing your template

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find:
<head>
  • Affter add:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • Your code looks like this:
<head>
   ...
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <jdoc:include type="head" />
   ...
</head>

3. Click Save & Close

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find
</body>
  • Before add
<jdoc:include type="modules" name="buaxua_floating" />
  • Your code looks like this
...
<jdoc:include type="modules" name="buaxua_floating" />
</body>
</html>

3. Publish the module BuaXua Floating on the position named buaxua_floating